This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a TabContainer Dijit in Code
You can also create TabContainer layout Dijits in code. The next example, tabcontainerprogram.html, mimics the previous task. In the code, you configure the content panes by passing attributes to the ContentPane constructor, such as {title : "Tab 4", closable: true}, to set the title and closable attributes.
To create tab containers in code:
- 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.8 shows what your page should look like after you make the additions.
Script 4.8. Creating tab containers in code.
1 <html> 2 <head> 3 <title>Creating Tab Containers in 4 Code</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 22 <script type="text/javascript"> 23 dojo.require("dojo.parser"); 24 dojo.require( 25 "dijit.layout.ContentPane"); 26 dojo.require( 27 "dijit.layout.TabContainer"); 28 dojo.addOnLoad(function(){ 29 var container = new 30 dijit.layout.TabContainer({ 31 style : "width:280px; 32 height:100px;"}, "tab"); 33 var page1 = new 34 dijit.layout.ContentPane( 35 {title : "Tab 1"}); 36 page1.domNode.innerHTML="<b> 37 Ralph Kramden</b><br>CEO"; 38 var page2 = new 39 dijit.layout.ContentPane({title : 40 "Tab 2"}); 41 page2.domNode.innerHTML="<b>Ed 42 Norton</b><br>VP Operations"; 43 var page3 = new 44 dijit.layout.ContentPane({title : 45 "Tab 3"}); 46 page3.domNode.innerHTML="<b>Alice 47 Kramden</b><br>VP Marketing"; 48 var page4 = new 49 dijit.layout.ContentPane({title : 50 "Tab 4", closable: true}); 51 page4.domNode.innerHTML="<b> 52 Trixie Norton</b><br>Treasurer"; 53 container.addChild(page1); 54 55 container.addChild(page2); 56 container.addChild(page3); 57 container.addChild(page4); 58 59 container.startup(); 60 }); 61 </script> 62 </head> 63 <body class="tundra"> 64 <h1>Creating Tab Containers in 65 Code</h1> 66 <br> 67 <div id="tab"> 68 </div> 69 </body> 70 </html>- Save your file.
- Navigate to your file in a browser. You should see the new tab container (Figure 4.10).
Figure 4.10 Creating a tab container in code.
)