< Back
Page 9 of 9
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 AccordionContainer
The accordion container is very popular in Dojo. It presents users with an accordion-like control that lets them expand pages to see a page's content.
Although you can use content panes in an accordion container, the example here, accordioncontainer.html, uses the more common AccordionPane pages.
To add accordion containers:
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.AccordionContainer"); statements to your code.
Create a new <div> element with the dojoType dijit.layout.AccordionContainer. In this element, include four <div> elements, each with the dojoType dijit.layout.AccordionPane.
Script 4.9 shows what your page should look like after you make the additions.
Script 4.9. Adding accordion containers.
1 <html> 2 <head> 3 <title>Using 4 AccordionContainer</title> 5 6 <link rel="stylesheet" 7 type="text/css" 8 href="http://o.aolcdn.com/ 9 dojo/1.1/dojo/ 10 resources/dojo.css" /> 11 12 <link rel="stylesheet" 13 type="text/css" 14 href="http://o.aolcdn.com/dojo/ 15 1.1/dijit/ 16 themes/tundra/tundra.css" /> 17 18 <script 19 djConfig="parseOnLoad:true" 20 type="text/javascript" 21 src="https://o.aolcdn.com/dojo/1.1/ 22 dojo/dojo.xd.js"> 23 </script> 24 25 <script type="text/javascript"> 26 dojo.require("dojo.parser"); 27 dojo.require( 28 "dijit.layout.ContentPane"); 29 dojo.require( 30 "dijit.layout.AccordionContainer"); 31 </script> 32 </head> 33 34 <body class="tundra"> 35 <h1>Using Accordion Containers</h1> 36 <br> 37 38 <div dojoType= 39 "dijit.layout.AccordionContainer" 40 style="width:150px; height:180px; 41 margin:5px"> 42 <div dojoType= 43 "dijit.layout.AccordionPane" 44 title="CEO"> 45 Ralph Kramden 46 </div> 47 48 <div dojoType= 49 "dijit.layout.AccordionPane" 50 title="VP Operations"> 51 Ed Norton 52 </div> 53 54 <div dojoType= 55 "dijit.layout.AccordionPane" 56 title="VP Marketing"> 57 Alice Kramden 58 </div> 59 60 <div id="blue" dojoType= 61 "dijit.layout.AccordionPane" 62 title="Treasurer"> 63 Trixie Norton 64 </div> 65 </div> 66 </body> 67 </html>- Save your file.
- Navigate to your file in a browser. You should see a new accordion container (Figure 4.11).
Figure 4.11 An accordion container.
- Click a new section in the container to open the corresponding new accordion pane (Figure 4.12).
Figure 4.12 A new accordion pane.
)
)
< Back
Page 9 of 9