source: Dev/trunk/src/client/dijit/tests/layout/StackContainer.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 25.9 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>StackContainer Demo</title>
6
7        <script src="../boilerplate.js"></script>
8
9        <style>
10                .dijitStackController .dijitToggleButtonChecked button {
11                        background-color: white;
12                        background-image: none;
13                }
14                div.dijitStackContainer {
15                        border: solid 1px black !important;     /* override .dijitStackContainer-child rule for no border */
16                        padding: 3px;
17                }
18        </style>
19
20        <script type="text/javascript">
21                require([
22                        "doh/runner",
23                        "dojo/aspect",
24                        "dojo/_base/declare",
25                        "dojo/dom",
26                        "dojo/dom-geometry",
27                        "dojo/on",
28                        "dojo/parser",
29                        "dojo/query",
30                        "dojo/topic",
31                        "dijit/registry",
32                        "dijit/form/Button",
33                        "dijit/layout/BorderContainer",
34                        "dijit/layout/ContentPane",
35                        "dijit/layout/_LayoutWidget",
36                        "dijit/layout/StackContainer",
37                        "dijit/layout/StackController",
38                        "dijit/layout/TabContainer",
39                        "dijit/tests/helpers",
40                        "dojo/domReady!"
41                ], function(doh, aspect, declare, dom, domGeom, on, parser, query, topic,
42                                        registry, Button, BorderContainer, ContentPane, _LayoutWidget, StackContainer, StackController, TabContainer,
43                                        helpers){
44
45
46                        // Hash listing which objects have gotten a resize event
47                        var resizesHash = {};
48
49                        // track resize events
50                        aspect.after(_LayoutWidget.prototype, "resize", function(){
51                                console.log("resize of widget " + this.id);
52                                resizesHash[this.id] = arguments;
53                        }, true);
54
55                        function click(/*String*/ id){
56                                // Click dijit widget w/specified id
57                                on.emit(dom.byId(id), "click", {bubbles: true, cancelable: true});
58                        }
59
60                        function selected(page){
61                                console.debug("page selected " + page.id);
62                                var widget=registry.byId("myStackContainer");
63                                registry.byId("previous").set("disabled", page.isFirstChild);
64                                registry.byId("next").set("disabled", page.isLastChild);
65                                registry.byId("previous2").set("disabled", page.isFirstChild);
66                                registry.byId("next2").set("disabled", page.isLastChild);
67                        }
68                        topic.subscribe("myStackContainer-selectChild", selected);
69
70                        doh.register("programmatic", [
71                                function create(){
72                                        container = new StackContainer({ id: "sc" }, "myStackContainer2");
73                                        container.addChild(new ContentPane({
74                                                id: "page1Prog",
75                                                title: "Page 1",
76                                                content: "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"
77                                        }));
78                                        container.addChild(new ContentPane({
79                                                id: "page2Prog",
80                                                title: "Page 2",
81                                                content: "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."
82                                        }));
83                                        container.addChild(page3Prog = new ContentPane({
84                                                id: "page3Prog",
85                                                title: "Page 3",
86                                                content: "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:"
87                                        }));
88                                        container.addChild(new ContentPane({
89                                                id: "page4Prog",
90                                                title: "Page 4",
91                                                href: "tab1.html"
92                                        }));
93
94                                        // make the controller
95                                        controller = new StackController({containerId: "sc"}, "holder");
96
97                                        // start 'em up
98                                        controller.startup();
99                                        container.startup();
100
101                                        doh.is(4, container.getChildren().length, "num children");
102
103                                        // Check aria roles and structure.
104                                        doh.is(4, query("> *", container.containerNode).length, "wrapper nodes around children");
105                                        doh.is(4, query("> *[role=tabpanel]", container.containerNode).length, "wrapper nodes have role=tabpanel");
106                                        doh.is("page1Prog page2Prog page3Prog page4Prog", query("> * > *", container.containerNode).map(function(node){
107                                                return registry.byNode(node).id;
108                                        }).join(" "), "children of wrapper divs");
109                                },
110                                function selectHref(){
111                                        var d = new doh.Deferred();
112                                        registry.byId("sc").selectChild(registry.byId("page4Prog")).then(d.getTestCallback(function(){
113                                                doh.t(helpers.isVisible(dom.byId("page4Prog")), "page4 visible");
114                                                doh.t(helpers.isHidden(dom.byId("page1Prog")), "page1 hidden");
115                                        }));
116                                        return d;
117                                },
118                                function selectPlain(){
119                                        var d = new doh.Deferred();
120                                        registry.byId("sc").selectChild(registry.byId("page1Prog")).then(d.getTestCallback(function(){
121                                                doh.t(helpers.isVisible(dom.byId("page1Prog")), "page1 visible");
122                                                doh.t(helpers.isHidden(dom.byId("page4Prog")), "page4 hidden");
123                                        }));
124                                        return d;
125                                },
126                                function selectCurrent(){
127                                        var d = new doh.Deferred();
128                                        registry.byId("sc").selectChild(registry.byId("page1Prog")).then(d.getTestCallback(function(){
129                                                doh.t(helpers.isVisible(dom.byId("page1Prog")), "page1 visible");
130                                                doh.t(helpers.isHidden(dom.byId("page4Prog")), "page4 hidden");
131                                        }));
132                                        return d;
133                                },
134                                function addChild(){
135                                        // make sure that child gets put in right place, with role=tabpanel wrapper <div> around it
136                                        var child = new ContentPane({
137                                                id: "page2.5Prog",
138                                                title: "Page 2.5",
139                                                href: "tab1.html"
140                                        });
141                                        container.addChild(child, 2);
142
143                                        doh.is(5, query("> *", container.containerNode).length, "wrapper nodes around children");
144                                        doh.is(5, query("> *[role=tabpanel]", container.containerNode).length, "wrapper nodes have role=tabpanel");
145                                        doh.is("page1Prog page2Prog page2.5Prog page3Prog page4Prog", query("> * > *", container.containerNode).map(function(node){
146                                                return registry.byNode(node).id;
147                                        }).join(" "), "children of wrapper divs");
148                                },
149                                function removeChild(){
150                                        // note the layout containers only support removeChild(widget), not removeChild(number)
151                                        container.removeChild(page3Prog);
152
153                                        doh.is(4, query("> *", container.containerNode).length, "wrapper nodes around children");
154                                        doh.is(4, query("> *[role=tabpanel]", container.containerNode).length, "wrapper nodes have role=tabpanel");
155                                        doh.is("page1Prog page2Prog page2.5Prog page4Prog", query("> * > *", container.containerNode).map(function(node){
156                                                return registry.byNode(node).id;
157                                        }).join(" "), "children of wrapper divs");
158                                }
159                        ]);
160
161                        doh.register("parse", [
162                                function parse(){
163                                        return parser.parse();
164                                }
165                        ]);
166
167                        doh.register("basic operation", [
168                                function forward(){
169                                        click("next");
170                                        doh.t(helpers.isHidden(dom.byId("page1")), "page1 hidden");
171                                        doh.t(helpers.isVisible(dom.byId("page2")), "page2 visible");
172                                        doh.t(helpers.isHidden(dom.byId("page3")), "page3 hidden");
173                                },
174                                function previous(){
175                                        click("previous");
176                                        doh.t(registry.byId("previous").disabled, "disabled");
177                                        doh.t(helpers.isVisible(dom.byId("page1")), "page1 visible");
178                                        doh.t(helpers.isHidden(dom.byId("page2")), "page2 hidden");
179                                        doh.t(helpers.isHidden(dom.byId("page3")), "page3 hidden");
180                                },
181                                function clickPage2(){
182                                        click("dijit_layout_StackController_0_page2");
183                                        doh.t(helpers.isHidden(dom.byId("page1")), "page1 hidden");
184                                        doh.t(helpers.isVisible(dom.byId("page2")), "page2 visible");
185                                        doh.t(helpers.isHidden(dom.byId("page3")), "page3 hidden");
186                                },
187                                function clickTwice(){
188                                        click("dijit_layout_StackController_0_page1");
189                                        click("dijit_layout_StackController_0_page1");
190                                        var button = registry.byId("dijit_layout_StackController_0_page1");
191                                        doh.t(button.checked, "Page 1 button is still checked");
192                                }
193                        ]);
194
195                        doh.register("nested layout widgets", [
196                                function nestedLayout(){
197                                        click("nextPR");
198                                        var bcPos = domGeom.position("bc"),
199                                                tcPos = domGeom.position("tc");
200
201                                        doh.t("bc" in resizesHash, "BorderContainer got resize");
202                                        doh.is(300, Math.round(bcPos.w), "BorderContainer width");
203                                        doh.is(200, bcPos.h, "BorderContainer height");
204
205                                        doh.t("tc" in resizesHash, "TabContainer got resize");
206                                        doh.is(300, Math.round(bcPos.w), "TabContainer width");
207                                        doh.is(200, bcPos.h, "TabContainer height");
208                                }
209                        ]);
210
211                        doh.register("nested stackcontainer w/doLayout=false", [
212                                function resizeCalled(){
213                                        doh.t("stack1" in resizesHash, "stack1 resized");
214                                        doh.t("stack2" in resizesHash, "stack2 resized");
215                                        doh.t("stack3" in resizesHash, "stack3 resized");
216                                        doh.t("stack4" in resizesHash, "stack4 resized");
217                                        doh.t(helpers.isVisible(dom.byId("stack4")), "stack4 visible");
218                                }
219                        ]);
220
221                        doh.register("removeChild", function removeChild(){
222                                var container = new StackContainer({ id: "sc2","aria-label":"sc2" });
223                                container.addChild(new ContentPane({
224                                                id: "rpage1Prog",
225                                                title: "Page 1",
226                                                content: "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"
227                                }));
228                                container.addChild(new ContentPane({
229                                                id: "rpage2Prog",
230                                                title: "Page 2",
231                                                content: "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."
232                                }));
233                                var page3;
234                                container.addChild(page3 = new ContentPane({
235                                                id: "rpage3Prog",
236                                                title: "Page 3",
237                                                content: "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:"
238                                }));
239
240                                container.placeAt(document.body);
241                                container.startup();
242                                container.selectChild(page3);
243
244                                var resizes = 0;
245                                aspect.after(page3, "resize", function(){
246                                        resizes++;
247                                }, true);
248                                container.removeChild(page3);
249                                doh.is(0, resizes, "removing selected child doesn't call resize on it");
250                                doh.is(2, container.getChildren().length, "2 children");
251                        });
252
253                        doh.register("childless startup", function childlessStartup(){
254                                // make and start the container without children
255                                var container = new StackContainer({ id: "nssc", "aria-label":"nssc"},"noChildrenStackContainer");
256                                container.startup();
257
258                                // monitor _showChild() calls
259                                var showChildCalls = {};
260                                aspect.after(container, "_showChild", function(child){
261                                        showChildCalls[child.id] = (showChildCalls[child.id] || 0) + 1;
262                                }, true);
263
264                                // Create and add child
265                                var child1 = new ContentPane({
266                                        id: "ncsc1",
267                                        title: "Page 1",
268                                        content: "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"
269                                });
270                                var resizes = 0;
271                                aspect.after(child1, "resize", function(){
272                                        resizes++;
273                                }, true);
274                                container.addChild(child1);
275                                doh.is(1, resizes, "child1 resized when added");
276                                doh.is(1, showChildCalls["ncsc1"], "StackContainer._showChild(child1) called when child added");
277
278                                // Add another child
279                                container.addChild(new ContentPane({
280                                        id: "ncsc2",
281                                        title: "Page 2",
282                                        content: "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."
283                                }));
284                                doh.f("ncsc2" in showChildCalls, "StackContainer._showChild(child2) not called when child added");
285                                doh.is(1, showChildCalls["ncsc1"], "StackContainer._showChild(child1) not called when second child added");
286
287                                // addChild() unfortunately triggers child1.resize() to be called, in anticipation that the new
288                                // child may have caused the tab labels to overflow to 2 lines, thus reducing content size
289                                // doh.is(1, resizes, "child1 not resized when child2 added");
290                                var resizesBeforeContainerResize = resizes;     // in 1.7 this is 2, in 2.0 will hopefully be 1
291
292                                // Resize the StackContainer.
293                                container.resize();
294                                doh.is(resizesBeforeContainerResize + 1, resizes, "child1 resized once more when StackContainer resized");
295                                doh.is(1, showChildCalls["ncsc1"], "StackContainer._showChild(child1) not called when StackContainer resized");
296                        });
297
298                        doh.register("destroy", function destroy(){
299                                // destroyRecursive() on a StackController used to get an exception
300                                var oldNumWidgets = require("dijit/registry").length;
301                                registry.byId("holder").destroyRecursive();
302                                var newNumWidgets = require("dijit/registry").length;
303                                doh.is(5, oldNumWidgets - newNumWidgets, newNumWidgets + "-" + oldNumWidgets + " destroyed");
304                        });
305
306                        doh.register("selectChild before startup", function selectBeforeStartup(){
307                                var container = new StackContainer({ id: "sbs","aria-label":"sbs" });
308                                container.addChild(new ContentPane({
309                                        id: "sbs1",
310                                        title: "Page 1",
311                                        content: "select before startup page 1"
312                                }));
313                                container.addChild(new ContentPane({
314                                        id: "sbs2",
315                                        title: "Page 2",
316                                        content: "select before startup page 2"
317                                }));
318                                var page3;
319                                container.addChild(page3 = new ContentPane({
320                                        id: "sbs3",
321                                        title: "Page 3",
322                                        content: "select before startup page 3"
323                                }));
324
325                                container.selectChild(page3);
326                                container.placeAt(document.body);
327                                container.startup();
328
329                                doh.t(helpers.isHidden(dom.byId("sbs1")), "page1 hidden");
330                                doh.t(helpers.isHidden(dom.byId("sbs2")), "page2 hidden");
331                                doh.t(helpers.isVisible(dom.byId("sbs3")), "page2 visible");
332                        });
333
334                        doh.run();
335                });
336
337        </script>
338</head>
339
340<body class="claro" role="main">
341        <script type="dojo/require">
342                registry: "dijit/registry"
343        </script>
344
345        <h1 class="testTitle">A Tale Of Two Cities</h1>
346
347        <button id="previous" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainer").back() }'>&lt;</button>
348        <span data-dojo-type="dijit/layout/StackController" data-dojo-props='containerId:"myStackContainer"'></span>
349        <button id="next" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainer").forward() }'>&gt;</button>
350
351        <div id="myStackContainer" data-dojo-type="dijit/layout/StackContainer"
352                data-dojo-props='style:"width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;","aria-label":"my stack container"'>
353                <p id="page1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"page 1","aria-label":"page1"'>IT WAS the best of times, it <input aria-label="input" value="was the worst" /> of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p>
354                <p id="page2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"page 2"'>There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p>
355                <p id="page3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"page 3"'>It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p>
356        </div>
357
358        <button id="previous2" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainer").back() }'>&lt;</button>
359        <span data-dojo-type="dijit/layout/StackController" data-dojo-props='containerId:"myStackContainer"'></span>
360        <button id="next2" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainer").forward() }'>&gt;</button>
361
362
363        <h1 class="testTitle" style="margin-top: 3em;">Embedded layout widgets</h1>
364        <p>This tests having layout widgets embedded in the StackContainer, making sure they render on the hidden pane.</p>
365
366        <button id="previousPR" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainerPR").back() }'>&lt;</button>
367        <span data-dojo-type="dijit/layout/StackController" data-dojo-props='containerId:"myStackContainerPR"'></span>
368        <button id="nextPR" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainerPR").forward() }'>&gt;</button>
369
370        <div id="myStackContainerPR" data-dojo-type="dijit/layout/StackContainer"
371                data-dojo-props='style:"width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;","aria-label":"my stack container PR"'>
372                <div id="page1PR" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"page 1"'>
373                        <p>
374                                The next pane should have some text, plus two embedded layout widgets, which should
375                                appear correctly even though the pane is initially hidden
376                        </p>
377                </div>
378                <div id="page2PR" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"page 2", style:"padding: 1em;"'>
379                        <p>
380                                Here's a BorderContainer:
381                        </p>
382                        <div id="bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:"height:200px; width:300px"'>
383                                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width:100px", splitter:true'>
384                                        1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
385                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
386                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
387                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
388                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
389                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
390                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
391                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
392                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
393                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
394                                        consequat quis, varius interdum, nulla. Donec neque tortor,
395                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
396                                        ut eros sit amet ante pharetra interdum.
397                                </div>
398                                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
399                                        2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
400                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
401                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
402                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
403                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
404                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
405                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
406                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
407                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
408                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
409                                        consequat quis, varius interdum, nulla. Donec neque tortor,
410                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
411                                        ut eros sit amet ante pharetra interdum.
412                                </div>
413                        </div>
414                        <p>
415                                And a TabContainer:
416                        </p>
417                        <div id="tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"height:200px; width:300px","aria-label":"tc"'>
418                                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 1"'>
419                                        1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
420                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
421                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
422                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
423                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
424                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
425                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
426                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
427                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
428                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
429                                        consequat quis, varius interdum, nulla. Donec neque tortor,
430                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
431                                        ut eros sit amet ante pharetra interdum.
432                                </div>
433                                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 2"'>
434                                        2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
435                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
436                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
437                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
438                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
439                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
440                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
441                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
442                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
443                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
444                                        consequat quis, varius interdum, nulla. Donec neque tortor,
445                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
446                                        ut eros sit amet ante pharetra interdum.
447                                </div>
448                        </div>
449                        <p>
450                                That's it!
451                        </p>
452                </div>
453        </div>
454        <button id="previous2PR" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainerPR").back() }'>&lt;</button>
455        <span data-dojo-type="dijit/layout/StackController" data-dojo-props='containerId:"myStackContainerPR"'></span>
456        <button id="next2PR" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("myStackContainerPR").forward() }'>&gt;</button>
457
458        <h1>Nested StackContainers w/doLayout=false</h1>
459        <p>"hello world" inner text should be visible</p>
460    <div id="stack1" aria-label="stack1" data-dojo-type="dijit/layout/StackContainer" doLayout="false">
461        <div id="stack2" aria-label="stack2" data-dojo-type="dijit/layout/StackContainer" doLayout="false">
462            <div id="stack3" aria-label="stack3" data-dojo-type="dijit/layout/StackContainer" doLayout="false">
463                <div id="stack4" aria-label="stack4" data-dojo-type="dijit/layout/StackContainer" doLayout="false">
464                    hello world
465                </div>
466            </div>
467        </div>
468    </div>
469
470
471        <h1>Programmatic test</h1>
472
473        Links: <span id="holder"></span>
474
475        <div id="myStackContainer2" style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;">
476        </div>
477
478        <div id="noChildrenStackContainer" style="width: 90%; border: 1px solid #9b9b9b; height: 20em;"></div>
479</body>
480</html>
Note: See TracBrowser for help on using the repository browser.