This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using StackContainer
The stack container lets you stack pages (that is, content panes) on top of each other.
The next example, stackcontainer.html, creates a stack of four pages that list personnel at an imaginary company.
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.StackContainer"); statements to your code.
Create a new stack container by setting a <div> element's dojoType attribute to dijit.form.StackContainer and enclose four content panes. Add two buttons that call the container's forward and back methods to navigate through the stack.
Script 4.5 shows what your page should look like after you make the additions.
Script 4.5. Adding stack containers.
1 <html> 2 <head> 3 <title>Using Stack Containers</title> 4 <link rel="stylesheet" 5 type="text/css" 6 href="http://o.aolcdn.com/ 7 dojo/1.1/dojo/ 8 resources/dojo.css" /> 9 <link rel="stylesheet" 10 type="text/css" 11 href="http://o.aolcdn.com/dojo/ 12 1.1/dijit/ 13 themes/tundra/tundra.css" /> 14 <script 15 djConfig="parseOnLoad:true" 16 type="text/javascript" 17 src="https://o.aolcdn.com/dojo/1.1/ 18 dojo/dojo.xd.js"> 19 </script> 20 <script type="text/javascript"> 21 dojo.require("dojo.parser"); 22 dojo.require( 23 "dijit.layout.ContentPane"); 24 dojo.require( 25 "dijit.layout.StackContainer"); 26 </script> 27 </head> 28 <body class="tundra"> 29 <h1>Using Stack Containers</h1> 30 <br> 31 <div id="stack" 32 dojoType= 33 "dijit.layout.StackContainer" 34 style="width:150px; height:75px; 35 margin:5px; border:solid 1px;"> 36 <div dojoType= 37 "dijit.layout.ContentPane"> 38 <b>Ralph Kramden</b><br>CEO 39 </div> 40 <div dojoType= 41 "dijit.layout.ContentPane"> 42 <b>Ed Norton</b><br>VP Operations 43 </div> 44 <div dojoType= 45 "dijit.layout.ContentPane"> 46 Alice Kramden<br>VP Marketing 47 </div> 48 <div dojoType= 49 "dijit.layout.ContentPane"> 50 Trixie Norton<br>Treasurer 51 </div> 52 </div> 53 <button dojoType= 54 "dijit.form.Button">< 55 <script type="dojo/method" 56 event="onClick" args="evt"> 57 dijit.byId("stack").back( ); 58 </script> 59 </button> 60 <button dojoType= 61 "dijit.form.Button">> 62 <script type="dojo/method" 63 event="onClick" args="evt"> 64 dijit.byId("stack").forward( ); 65 </script> 66 </button> 67 </body> 68 </html>- Save your file.
- Navigate to your file in a browser. You should see a stack container and two buttons (Figure 4.5).
Figure 4.5 A stack container.
- Click the buttons to navigate from page to page (Figure 4.6).
Figure 4.6 A new page in a stack container.
)
)