This chapter is from the book
This chapter is from the book
This chapter is from the book
Using TabContainer
The TabContainer container lets you place your content panes on tabbed pages. All you need to do is place content panes (with the title attribute set to the tab's label) inside this container. To let the user close a tab, set the content pane's closable attribute to "true".
The example tabcontainer.html displays four tabs, and the fourth tab can be closed (when you click the close icon, the tab disappears).
To add tab containers:
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.TabContainer"); statements to your code.
Create a new tab container, enclosing four content panes in it. Make the fourth tab closable, and add code to display an alert box when the content pane's onClose event occurs.
Script 4.7 shows what your page should look like after you make the additions.
Script 4.7. Adding tab containers.
1 <html> 2 <head> 3 <title>Using 4 TabContainer</title> 5 <link rel="stylesheet" 6 type="text/css" 7 href="http://o.aolcdn.com/ 8 dojo/1.1/dojo/ 9 resources/dojo.css" /> 10 <link rel="stylesheet" 11 type="text/css" 12 href="http://o.aolcdn.com/dojo/ 13 1.1/dijit/ 14 themes/tundra/tundra.css" /> 15 <script 16 djConfig="parseOnLoad:true" 17 type="text/javascript" 18 src="https://o.aolcdn.com/dojo/1.1/ 19 dojo/dojo.xd.js"> 20 </script> 21 <script type="text/javascript"> 22 dojo.require("dojo.parser"); 23 dojo.require( 24 "dijit.layout.ContentPane"); 25 dojo.require( 26 "dijit.layout.TabContainer"); 27 </script> 28 </head> 29 <body class="tundra"> 30 <h1>Using Tab Containers</h1> 31 <br> 32 <div dojoType= 33 "dijit.layout.TabContainer" 34 style="width:280px; height:100px; 35 margin:5px; border:solid 1px;"> 36 <div dojoType= 37 "dijit.layout.ContentPane" 38 title="Tab 1"> 39 <b>Ralph Kramden</b><br>CEO 40 </div> 41 42 <div dojoType= 43 "dijit.layout.ContentPane" 44 title="Tab 2"> 45 <b>Ed Norton</b><br>VP Operations 46 </div> 47 <div dojoType= 48 "dijit.layout.ContentPane" 49 title="Tab 3"> 50 <b>Alice Kramden</b><br>VP 51 Marketing 52 </div> 53 <div dojoType= 54 "dijit.layout.ContentPane" 55 title="Tab 4" 56 closable="true"> 57 <b>Trixie Norton</b><br>Treasurer 58 <script type="dojo/method" 59 event="onClose" args="evt"> 60 alert("Closing tab 4"); 61 return true; 62 </script> 63 </div> 64 </div> 65 </body> 66 </html>- Save your file.
- Navigate to your file in a browser. You should see a tab container (Figure 4.8).
Figure 4.8 A tab container.
- Click a new tab to opening the corresponding page (Figure 4.9).
Figure 4.9 A new tab page.
)
)