Dojo StackContainer

In this section, you will learn about the StackContainer with example.


 
Ads

Dojo StackContainer

        

In this section, you will learn about the StackContainer with example.

Try Online: Stack Container

StackContainer : This is a container that has more children, but displays only one child at a time (look the pages in a book one by one). This container is a good for wizards, slide shows, and long listing or text blocking.

Here is the code of Program:

<html>
<head>
<title>Stack Container Demo</title>
  <style type="text/css">
  @import "../resources/dojo.css";
  @import "../dijit/themes/tundra/tundra.css";
  
  </style>
  <script type="text/javascript" src="dojo.xd.js"
    djConfig="parseOnLoad: true"></script>
  <script type="text/javascript">
  dojo.require("dojo.parser");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.StackContainer");
  dojo.require("dijit.form.Button");
 </script>
</head>
<body class="tundra">
  <button id="previous" 
onClick="dijit.byId('mainTabContainer').back()"><<-Previous</button>
  <button id="next" onClick="dijit.byId('mainTabContainer').forward()">
   Next->></button>
  <div id="mainTabContainer" dojoType="dijit.layout.StackContainer"
 style="width: 90%; border:1px solid #9b9b9b; height: 10em;
 margin: 0.5em 0 0.5em 0; padding: 0.5em;">
  <p id="Page1" dojoType="dijit.layout.ContentPane" label="Intro">
  Page First  
  </p>
 
  <p id="Page2" dojoType="dijit.layout.ContentPane">
  Page Second.
  </p>
  <p id="Page3" dojoType="dijit.layout.ContentPane" >
  Page Third.
  </p>
 </div>
</body>
</html>

Output of the Program:

Whenever you click the "Previous" command button the you get the previous pages and click the "Next" command button then you get next pages of the stack container.

 

Try Online:

Advertisements

Ads
Share on Google+Share on Google+

Dojo StackContainer

Posted on: November 1, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

Ads
 

Discuss: Dojo StackContainer  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads