← Back to branch summary

~katiekitty/+junk/solidstate

« back to all changes in this revision

Viewing changes to solidstate/trunk/include/dhtmlxTabbar/samples/tab_nested.html

  • Committer: root
  • Date: 2010-01-13 07:44:31 UTC
  • Revision ID: root@ds3-vamp.cs-monitor.cz.cc-20100113074431-kt8ceoeznpjg22x7
Reviving the project

Show diffs side-by-side

added added

removed removed

Lines of Context:
solidstate/trunk/include/dhtmlxTabbar/samples/tab_nested.html
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
2
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
3
 
 
4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
5
<head>
 
6
        <title>DHTML TabBar sample. dhtmlXTabBar - Nested TabBars</title>
 
7
</head>
 
8
<style>
 
9
        body {font-size:12px}
 
10
        .{font-family:arial;font-size:12px}
 
11
        h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
 
12
        xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
 
13
        div.hdr{
 
14
                background-color:lightgrey;
 
15
                margin-bottom:10px;
 
16
                padding-left:10px;
 
17
        }
 
18
</style>
 
19
<body>
 
20
        <div class="hdr">DHTML JavaScript Tabbar samples</div>
 
21
        <h1>Nested TabBars</h1>
 
22
        <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTabBar.css">
 
23
        <script  src="../js/dhtmlXCommon.js"></script>
 
24
        <script  src="../js/dhtmlXTabbar.js"></script>
 
25
    <a href='javascript:void(0)' onclick='doIt()'>Attach content to TabBar</a>
 
26
        <br><br>
 
27
        <table>
 
28
                <tr>
 
29
                        <td>
 
30
                                <div id="a_tabbar" style="width:390px; height:390px;"/>
 
31
                        </td>
 
32
            <td><div id='html_01' style='padding:5px;'><div id='html_1' style="width:300px; height:340px;"></div></div></td>
 
33
            <td><div id='html_02' style='padding:5px;'><div id='html_2' style="width:300px; height:340px;"></div></div></td>
 
34
        </tr>
 
35
        </table>
 
36
<hr>
 
37
<XMP>
 
38
<div id="a_tabbar" style="width:400;height:100"></div>
 
39
        <script>
 
40
                tabbar=new dhtmlXTabBar("a_tabbar","top");
 
41
                ...
 
42
                tabbar2=new dhtmlXTabBar("html_1","right");
 
43
                ...
 
44
                tabbar3=new dhtmlXTabBar("html_2","bottom");
 
45
                ...
 
46
                tabbar.setContent("a1","html_01");
 
47
                tabbar.setContent("a2","html_02");
 
48
                tabbar.setContentHTML("a3","<br/>The content can be set as <b>HTML</b> node or as <b>HTML</b> text.");
 
49
        </script>
 
50
</XMP>
 
51
        <script>
 
52
                        tabbar=new dhtmlXTabBar("a_tabbar","top");
 
53
            tabbar.setImagePath("../imgs/");
 
54
 
 
55
            tabbar.setSkinColors("#FCFBFC","#F4F3EE");
 
56
            tabbar.addTab("a1","Tab 1-1","100px");
 
57
            tabbar.addTab("a2","Tab 1-2","100px");
 
58
            tabbar.addTab("a3","Tab 1-3","100px");
 
59
            tabbar.setTabActive("a1");
 
60
 
 
61
 
 
62
                        tabbar2=new dhtmlXTabBar("html_1","right");
 
63
            tabbar2.setImagePath("../imgs/");
 
64
 
 
65
            tabbar2.setSkinColors("#FCFBFC","#F4F3EE");
 
66
            tabbar2.addTab("a11","Tab 1-1","100px");
 
67
            tabbar2.addTab("a21","Tab 1-2","100px");
 
68
            tabbar2.addTab("a31","Tab 1-3","100px");
 
69
            tabbar2.setTabActive("a11");
 
70
            tabbar2.setContentHTML("a11","1-11");
 
71
            tabbar2.setContentHTML("a21","1-21");
 
72
            tabbar2.setContentHTML("a31","1-31");
 
73
 
 
74
 
 
75
                        tabbar3=new dhtmlXTabBar("html_2","bottom");
 
76
            tabbar3.setImagePath("../imgs/");
 
77
 
 
78
            tabbar3.setSkinColors("#FCFBFC","#F4F3EE");
 
79
            tabbar3.addTab("a12","Tab 1-1","100px");
 
80
            tabbar3.addTab("a22","Tab 1-2","100px");
 
81
            tabbar3.setTabActive("a12");
 
82
            tabbar3.setContentHTML("a12","2-12");
 
83
            tabbar3.setContentHTML("a22","2-22");
 
84
            
 
85
 
 
86
            function doIt(){
 
87
                tabbar.setContent("a1","html_01");
 
88
                tabbar.setContent("a2","html_02");
 
89
                tabbar.setContentHTML("a3","<br/>The content can be set as <b>HTML</b> node or as <b>HTML</b> text.");
 
90
            }
 
91
        </script>
 
92
<br><br>
 
93
  <div id="out_zone"></div>
 
94
  <p><a href="http://www.scbr.com/docs/products/dhtmlxTabbar/index.shtml" style="font-weight:bold;">Go to the dhtmlxTabbar main page</a> or <a href="javascript:self.close()">Close this page</a></p>
 
95
</body>
 
96
</html>