source: Dev/branches/rest-dojo-ui/client/dijit/tests/test_TitlePane.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 9.5 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>TitlePane Test</title>
6
7        <style type="text/css">
8                @import "../themes/claro/document.css";
9                @import "css/dijitTests.css";
10        </style>
11
12        <!-- required: a default dijit theme: -->
13        <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
14
15        <!-- required: dojo.js -->
16        <script type="text/javascript" src="../../dojo/dojo.js"
17                data-dojo-config="parseOnLoad: false, isDebug: true"></script>
18
19        <!-- not needed, for testing alternate themes -->
20        <script type="text/javascript" src="_testCommon.js"></script>
21
22        <script type="text/javascript">
23                dojo.require("dijit.dijit"); // optimize: load dijit layer
24                dojo.require("dijit.TitlePane");
25                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
26
27                // widgets used inside subpage loaded via href=
28                dojo.require("dijit.form.Button");
29                dojo.require("dijit.form.ComboBox");
30                dojo.require("dijit.layout.TabContainer");
31                dojo.require("dijit.layout.AccordionContainer");
32                dojo.require("dijit.layout.LinkPane");
33
34                function randomMessageId(){
35                        return Math.floor(Math.random() * 3) + 3;
36                }
37
38            dojo.ready(function(){
39       
40                        dojo.declare("dijit.TestTitlePane", dijit.TitlePane, {
41                                templateString: '<div class="dijitTitlePane">' +
42                                                                '    <div class="dijitTitlePaneTitle" data-dojo-attach-point="titleBarNode" style="cursor: default;">' +
43                                                                        '<span data-dojo-attach-event="onclick:toggle,onkeypress: _onTitleKey" tabindex="0"' +
44                                                                                'role="button" data-dojo-attach-point="focusNode,arrowNode" style="cursor: pointer;">' +
45                                                                                        '<img src="${_blankGif}" alt="" class="dijitArrowNode" role="presentation"/>' +
46                                                                                        '<span data-dojo-attach-point="arrowNodeInner" class="dijitArrowNodeInner"></span>' +
47                                                                                 '</span>' +
48                                                                        '<span data-dojo-attach-point="titleNode" class="dijitTitlePaneTextNode"></span>' +
49                                                                    '</div>' +
50                                                                    '<div class="dijitTitlePaneContentOuter" data-dojo-attach-point="hideNode">' +
51                                                                        '<div class="dijitReset" data-dojo-attach-point="wipeNode">' +
52                                                                            '<div class="dijitTitlePaneContentInner" data-dojo-attach-point="containerNode" role="region" tabindex="-1">' +
53                                                                            '</div>' +
54                                                                        '</div>' +
55                                                                    '</div>' +
56                                                                '</div>'
57                        });
58       
59                    dojo.parser.parse();
60            });
61        </script>
62</head>
63<body class="claro">
64        <h1 class="testTitle">Dijit TitlePane Test</h1>
65
66        <input id="input" value="for tab testing"/>
67
68        <h1>Test #1: plain title pane, width=300px</h1>
69        <div id="testPane1" data-dojo-id="pane1" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #1",
70                tooltip:"I\"m the tooltip for Title Pane #1\"s title bar",
71                style:"width: 300px;" '>
72                Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
73                iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
74                orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
75                pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
76                Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
77                nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
78                consectetuer adipiscing elit.
79        </div>
80        <button id="titleButton" onclick="pane1.set('title', 'New Title')">change title</button>
81        <button id="closeButton" onclick="pane1.set('open', false)">close pane</button>
82        <h1>Test #2: title pane with form, width=300px</h1>
83
84        <div id="pane_2" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #2", style:"width: 300px;"'>
85                <form>
86                        <label for="age">Age: </label> <input id="age"/><br>
87                        <label for="disc">Discount card </label><input id="disc" type="checkbox"/><br>
88                        <button>Submit</button><br>
89                </form>
90        </div>
91        <br>
92
93        <h1>Test #3: initially closed pane</h1>
94        <div id="closed" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Initially closed pane", open:false, style:"width:500px;"'>
95                <form>
96                        <label for="age2">Age: </label><input id="age2"/><br>
97                        <label for="discount">Discount card </label><input type="checkbox" id="discount"/><br>
98                        <button>Submit</button><br>
99                </form>
100
101                <p>And a TabContainer, to make sure it lays out correctly:</p>
102                <div id="tabContainer" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 400px; height: 250px;"'>
103                        <a data-dojo-type="dijit.layout.LinkPane" data-dojo-props='href:"layout/tab1.html", onLoad:function(){ console.log("load of SubTab 1"); }'>SubTab 1</a>
104                        <a data-dojo-type="dijit.layout.LinkPane" data-dojo-props='href:"layout/tab2.html",  onLoad:function(){ console.log("load of SubTab 2"); }, selected:true'>SubTab 2</a>
105                </div>
106        </div>
107        <button onclick="dijit.byId('closed').set('content', 'hello world! (' + new Date() + ')');">reset content</button>
108
109        <h1>Test #4: title pane with href (initially closed)</h1>
110        <p>The pane should open to "Loading..." message and then 3 seconds later it should slide open more to show loaded data.</p>
111        <div id="href1" data-dojo-type="dijit.TitlePane" data-dojo-props='duration:1000, title:"Pane from href", open:false,
112                href:"layout/getResponse.php?delay=3000&amp;messId=3", preventCache:true,
113                style:"width: 400px;"'>
114                Loading...
115        </div>
116
117        <h1>Test #5: title pane with href (initially closed)</h1>
118        <p>The pane should start to open to "Loading..." but halfway through href data will be loaded, and it should expand correctly.</p>
119        <div id="href2" data-dojo-type="dijit.TitlePane" data-dojo-props='duration:1000, title:"Pane from href", open:false,
120                href:"layout/getResponse.php?delay=500&amp;messId=3", preventCache:true,
121                style:"width: 400px;"'>
122                Loading...
123        </div>
124
125        <h1>Test #6: nested title pane</h1>
126        <div id="outer" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Outer pane", style:"width:300px;"'>
127                <p>This is a title pane, containing another title pane ...
128                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus pulvinar orci, sed vestibulum urna sem ut pede.
129More Ipsum...
130
131                <div id="inner" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Inner pane", style:"width:250px;"'>
132                        <p>And this is the inner title pane...
133                        <p>Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
134                </div>
135
136                <p>And this is the closing line for the outer title pane.
137        </div>
138
139        <h1>Test #7: subclassed title pane (only arrow is selectable and focusable)</h1>
140        <div id="ttp" data-dojo-type="dijit.TestTitlePane" data-dojo-props='title:"Title Pane #7", style:"width: 300px;" '>
141                Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
142                iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
143                orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
144                pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
145                Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
146                nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
147                consectetuer adipiscing elit.
148        </div>
149
150        <table style="border: solid blue 2px; margin-top: 1em;">
151                <tr>
152                        <td>
153                                Here's some text below the title panes (to make sure that closing a title pane releases the space that the content was taking up)
154                        </td>
155                </tr>
156        </table>
157        <h1>Test #8: locked open title pane</h1>
158        <div id="locked" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #8", style:"width: 300px;", toggleable:false '>
159                Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
160                iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
161                orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
162                pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
163                Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
164                nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
165                consectetuer adipiscing elit.
166        </div>
167
168        <h1>Test #9: TitlePane in AccordionContainer</h1>
169        <div id="ac" data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props='style:"width: 400px; height: 300px;" '>
170                <div id="accp1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"pane 1", selected:true'>
171                        Here's a closed title pane:
172                        <div id="actp1" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #9", style:"width: 300px;", open:false,
173                                        href:"layout/tab1.html", onLoad:function(){ console.log("load of actp1"); actp1Loaded = true; }'>
174                        </div>
175                        and an open one:
176                        <div id="actp2" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #10", style:"width: 300px;", open:true,
177                                        href:"layout/tab2.html", onLoad:function(){ console.log("load of actp2"); actp2Loaded = true; }'>
178                        </div>
179                </div>
180                <div id="accp2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"pane 2" '>
181                        Here's a closed title pane:
182                        <div id="actp3" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #11", style:"width: 300px;", open:false,
183                                        href:"layout/tab1.html", onLoad:function(){ console.log("load of actp3"); actp3Loaded = true; }'>
184                        </div>
185                        and an open one:
186                        <div id="actp4" data-dojo-type="dijit.TitlePane" data-dojo-props='title:"Title Pane #12", style:"width: 300px;", open:true,
187                                        href:"layout/tab2.html", onLoad:function(){ console.log("load of actp4"); actp4Loaded = true; }'>
188                        </div>
189                </div>
190        </div>
191
192</body>
193</html>
Note: See TracBrowser for help on using the repository browser.