Site Links: Home | Store | Contact Me |
This feature has not been developed yet. Click OK to close the window.
1 <html>
2 <head>
3 <title>Creating Dojo Tabs Using Code</title>
4 <meta name="keywords" content="dojo, javascript, web 2.0, ajax, tabs, code" />
5 <style type="text/css">
6 @import "/lib/1.8.3/dijit/themes/tundra/tundra.css";
7 @import "/lib/1.8.3/dojo/resources/dojo.css"
8 </style>
9 <style type="text/css">
10 /* Nav Buttons */
11 #NavButtons ul
12 {
13 padding-left: 0;
14 margin: 0px 0px 10px 0px;
15 background-color: #A4A4A4;
16 color: black;
17 float: left;
18 width: 100%;
19 font-family: arial, helvetica, sans-serif;
20 }
21
22 #NavButtons ul li { display: inline; }
23
24 #NavButtons ul li a
25 {
26 padding: 0.4em 1.1em;
27 background-color: #A4A4A4;
28 color: Black;
29 text-decoration: none;
30 float: left;
31 border-right: 1px solid #fff;
32 }
33
34 #NavButtons ul li a:hover
35 { background-color: gray; }
36 </style>
37 <link href="/css/blip.css" rel="stylesheet" type="text/css"></link>
38 <script type="text/javascript" src="/lib/1.8.3/dojo/dojo.js"
39 djConfig="parseOnLoad: true"></script>
40 <script type="text/javascript">
41 dojo.require("dojo.parser");
42 dojo.require("dijit.layout.ContentPane");
43 dojo.require("dijit.layout.TabContainer");
44 dojo.require("dijit.form.Button");
45 dojo.require("dijit.Dialog");
46
47 function tbdShow(){
48 dijit.byId('tbdDialog').show();
49 }
50
51 // Initialize on Load
52 dojo.addOnLoad(function(){
53 var tc = new dijit.layout.TabContainer(
54 {style:"width:100%;height:300px", selected:true},
55 "mainTabContainer"
56 );
57
58 var tab1 = new dijit.layout.ContentPane(
59 //properties
60 { title:"Tab1" },
61 "tab1"
62 );
63
64 var tab2 = new dijit.layout.ContentPane(
65 //properties
66 { title:"Tab2" },
67 "tab2"
68 );
69
70 var tab3 = new dijit.layout.ContentPane(
71 //properties
72 { title:"Tab3" },
73 "tab3"
74 );
75
76 var tc = dijit.byId("mainTabContainer");
77 tc.addChild(tab1);
78 tc.addChild(tab2);
79 tc.addChild(tab3);
80
81 tc.startup();
82 });
83 </script>
84 </head>
85 <body class="tundra">
86 <?php include($_SERVER['DOCUMENT_ROOT'] . "/in/hdrex.php") ?>
87
88 <!-- Page Content -->
89 <h3>Creating Dojo Tabs Using Code</h3>
90 <div id="mainTabContainer">
91 <div id="tab1">
92 <!-- NavButton -->
93 <div id="NavButtons">
94 <ul>
95 <li><a href="">Menu 1.1</a></li>
96 <li><a href="">Menu 1.2</a></li>
97 <li><a href="">Menu 1.3</a></li>
98 </ul>
99 </div>
100
101
102 <!-- End Menu Bar -->
103 </div>
104 <div id="tab2">
105 <!-- NavButton -->
106 <div id="NavButtons">
107 <ul>
108 <li><a href="">Menu 2.1</a></li>
109 <li><a href="">Menu 2.2</a></li>
110 <li><a href="">Menu 2.3</a></li>
111 </ul>
112 </div>
113
114 </div>
115 <div id="tab3">
116 <!-- NavButton -->
117 <div id="NavButtons">
118 <ul>
119 <li><a href="">Menu 3.1</a></li>
120 <li><a href="">Menu 3.2</a></li>
121 <li><a href="">Menu 3.3</a></li>
122 </ul>
123 </div>
124 </div>
125
126 </div>
127 <!-- TBD Dialog - Pops up when an unimplemented feature clicked -->
128 <div dojoType="dijit.Dialog" id="tbdDialog" title="TBD Dialog">
129 <h3>To Be Developed</h3>
130 <p>This feature has not been developed yet. Click OK to close the window.</p>
131
132 <div class="centerButton">
133 <button dojoType="dijit.form.Button" id="tbdOk">OK
134 <script type="dojo/method" event="onClick">
135 dijit.byId('tbdDialog').hide();
136 </script>
137 </button>
138
139 </div>
140 </div>
141 <h5>Source Code</h5>
142 <iframe frameborder="1" scrolling="auto" width="100%" align="middle" height="300px" src="Dojo-Tabs-With-Code.php.html"><p><a href="Dojo-Tabs-With-Code.php.html">Dojo-Tabs-With-Code.php.html</a></p></iframe>
143 <br/>
144 <h4>Comments</h4>
145 <p>This page is an example of how to create a Dojo tabs user interface using code instead of embedding tags in the HTML. A lot of the Dojo examples embed the JavaScript code with the HTML. I have never been a big fan of this. The JavaScript code and HTML should be totally separate. When I saw the technique for doing this in the Dojo book, I was very excited. Unfortunately, when I put in the code snippet into a page, it didn't work. Here is how I understand things.</p>
146 <ul>
147 <li>To assign a Dojo object to a <code>div</code> tag, first you call the widgets constructor and assign the result to a handle. For example, lines 37 to 46 create a TabContainer object and a ContentPane object. Notice the constructor takes 2 parameters. A list of widget attributes, and the <code>id</code> of the HTML element you want to apply the control to. The attribute list would appear as HTML attributes if you were defining everything in markup.</li>
148 <li>Next, associate the tabs with the tab container, add them as children to it. See lines 60 to 63. However, nothing is displayed yet.</li>
149 <li>To display the control in the page, call the <code>startup</code> method for the control. See line 65. That does the trick everything gets built and the tab is displayed.</li>
150 </ul>
151 <hr/>
152 <!-- End Page Content -->
153
154 <?php include($_SERVER['DOCUMENT_ROOT'] . "/in/ftrex.php") ?>
155 </body>
156 </html>
This page is an example of how to create a Dojo tabs user interface using code instead of embedding tags in the HTML. A lot of the Dojo examples embed the JavaScript code with the HTML. I have never been a big fan of this. The JavaScript code and HTML should be totally separate. When I saw the technique for doing this in the Dojo book, I was very excited. Unfortunately, when I put in the code snippet into a page, it didn't work. Here is how I understand things.
div tag, first you call the widgets constructor and assign the result to a handle. For example, lines 37 to 46 create a TabContainer object and a ContentPane object. Notice the constructor takes 2 parameters. A list of widget attributes, and the id of the HTML element you want to apply the control to. The attribute list would appear as HTML attributes if you were defining everything in markup.startup method for the control. See line 65. That does the trick everything gets built and the tab is displayed.