root / trunk / demos / widget / accordionContainer.html

Revision 3832, 7.2 kB (checked in by bill, 3 years ago)

layout widget demos

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
6<title>Accordion Widget Demo</title>
7
8<script type="text/javascript">
9        var djConfig = {isDebug: true };
10</script>
11<script type="text/javascript" src="../../dojo.js"></script>
12<script language="JavaScript" type="text/javascript">
13        dojo.require("dojo.widget.Tree");
14        dojo.require("dojo.widget.TreeNode");
15        dojo.require("dojo.widget.AccordionContainer");
16        dojo.require("dojo.widget.SplitContainer");
17        dojo.require("dojo.widget.ContentPane");
18</script>
19
20<style>
21html, body {
22        height: 100%;
23        width: 100%;
24        overflow: hidden;
25}
26#main {
27        height: 95%;
28        width: 95%;
29        left: 1%;
30        top: 1%;
31        position: relative;
32}
33.label {
34        border: 1px solid black;
35        background: #232323;
36        color: #fff;
37        font-weight: bold;
38}
39
40.label :hover {
41        cursor: pointer;
42}
43
44.accBody {
45        background: #ededed;
46        overflow: auto;
47}
48</style>
49</head>
50<body>
51<div dojoType="AccordionContainer" labelNodeClass="label" containerNodeClass="accBody"
52        style="border: 2px solid black;" id="main"
53>
54        <div dojoType="ContentPane" open="true" label="Pane 1">
55                <h2>Pane 1 w/ tree</h2>
56                <div dojoType="Tree" publishSelectionTopic="treeSelected" toggle="fade">
57                    <div dojoType="TreeNode" title="Item 1">
58                        <div dojoType="TreeNode" title="Item 1.1"><br/></div>
59                        <div dojoType="TreeNode" title="Item 1.2">
60                            <div dojoType="TreeNode" title="Item 1.2.1"></div>
61                            <div dojoType="TreeNode" title="Item 1.2.2"></div>
62                        </div>
63                        <div dojoType="TreeNode" title="Item 1.3">
64                            <div dojoType="TreeNode" title="Item 1.3.1"></div>
65                            <div dojoType="TreeNode" title="Item 1.3.2"></div>
66                        </div>
67                        <div dojoType="TreeNode" title="Item 1.4">
68                            <div dojoType="TreeNode" title="Item 1.4.1"></div>
69                        </div>
70                    </div>
71                </div>
72
73                <p>
74                        Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
75                        suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
76                        Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
77                        bibendum sit amet, semper quis, aliquet nec, sapien.  Aliquam
78                        aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
79                        ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
80                        dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
81                        quam.
82                </p>
83                <p>
84                        Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
85                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
86                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
87                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
88                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
89                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
90                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
91                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
92                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
93                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
94                        consequat quis, varius interdum, nulla. Donec neque tortor,
95                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
96                        ut eros sit amet ante pharetra interdum.
97                </p>
98        </div>
99
100        <div dojoType="ContentPane" label="Pane 2">
101                <h2> Pane 2 </h2>
102                <p>
103                        Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
104                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
105                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
106                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
107                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
108                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
109                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
110                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
111                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
112                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
113                        consequat quis, varius interdum, nulla. Donec neque tortor,
114                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
115                        ut eros sit amet ante pharetra interdum.
116                </p>   
117        </div>
118        <div dojoType="SplitContainer" label="Pane 3">
119        <p dojoType="ContentPane">
120                Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
121                Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
122                vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
123                augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
124                metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
125                ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
126                euismod, magna nulla viverra libero, sit amet lacinia odio diam id
127                risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
128                porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
129                faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
130                consequat quis, varius interdum, nulla. Donec neque tortor,
131                sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
132                ut eros sit amet ante pharetra interdum.
133        </p>
134        <p dojoType="ContentPane">
135                Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
136                Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
137                vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
138                augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
139                metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
140                ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
141                euismod, magna nulla viverra libero, sit amet lacinia odio diam id
142                risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
143                porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
144                faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
145                consequat quis, varius interdum, nulla. Donec neque tortor,
146                sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
147                ut eros sit amet ante pharetra interdum.
148                </p>
149        </div>
150</div>
151</body>
152</html>
Note: See TracBrowser for help on using the browser.