Ticket #5840: tabs_test.html

File tabs_test.html, 2.2 kB (added by guest, 11 months ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2            "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6<title>TabContainer Demo</title>
7    <style type="text/css">
8        @import "./dojo/dijit/themes/tundra/tundra.css";
9        @import "./dojo/dojo/resources/dojo.css"
10    </style>
11    <script type="text/javascript" src="./dojo/dojo/dojo.js"
12        djConfig="parseOnLoad: true"></script>
13    <script type="text/javascript">
14           dojo.require("dojo.parser");
15           dojo.require("dijit.layout.ContentPane");
16           dojo.require("dijit.layout.TabContainer");
17           function openTab(count){
18               // create a new tab and make the tab visible.
19               // tabs container
20               var tc = dijit.byId('mainTabContainer');
21               // before creating new tab check if there is already any channel
22               // tab open, if yes goto that that.
23   
24               var cb = dijit.byId('collaborateTab_'+count);
25               if(cb){
26                tc.selectChild(cb);
27               }
28               else{
29                // new tab
30                var nt = new dijit.layout.ContentPane({title:'tab '+count,
31                            href:'tab'+count+'.html',
32                            id:'collaborateTab_'+count,
33                            onLoad:dojo.hitch(null,'initTab',count),
34                            onUnload:dojo.hitch(null,'unloadTab',count),
35                            closable: true});
36                // just making the global channel variable.
37                tc.addChild(nt);
38                tc.selectChild(nt);
39                }
40           }
41           function initTab(count){
42              alert('tab onload event handler for tab '+count);
43           }
44           function unloadTab(count){
45              alert('tab unload event handler for tab '+count);
46           }
47    </script>
48</head>
49<body class="tundra">
50            <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
51                 style="width:auto;height:400px;">
52                 <!-- first tab -->
53                 <div id="LittleRed" 
54                      dojoType="dijit.layout.ContentPane" 
55                      title="Little Red Cap"
56                      style=""
57                      >
58                      <table>
59                      <tr><td><a href="javascript:openTab(1)">
60                      OpenTab1</a></td></tr>
61                      <tr><td><a href="javascript:openTab(2)">
62                      OpenTab2</a></td></tr>
63                      </table>
64                     
65                 </div>
66                 <!-- end of first tab -->
67
68            </div>
69            <!-- end of tabs container -->
70
71</body>
72</html>