diff options
Diffstat (limited to 'includes/js/dijit/tests/layout/test_TabContainer.html')
| -rw-r--r-- | includes/js/dijit/tests/layout/test_TabContainer.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_TabContainer.html b/includes/js/dijit/tests/layout/test_TabContainer.html new file mode 100644 index 0000000..5d51a8a --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer.html @@ -0,0 +1,183 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function testClose(pane,tab){ + return confirm("Please confirm that you want tab "+tab.title+" closed"); + } + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + // dojo.parser.parse(dojo.body()); + }); + + dojo.addOnLoad(function(){ + var tc = dijit.byId("mainTabContainer"); + var cp = new dijit.layout.ContentPane({ title: 'Programmatically created tab' }); + cp.domNode.innerHTML = "I was created programmatically!"; + tc.addChild(cp, 3); + }); + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer tests</h1> + + <p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading + files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already + part of this page. Tab2 is initially selected. + </p> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p id="foo">tooltip on this paragraph</p> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a> + + <a dojoType="dijit.layout.LinkPane" href="tab4.html">SplitContainer from href</a> + + </div> + + <p> + The next example is with closable tabs. + Tab 1 and Tab 3 can be closed; Tab 3 has a confirm box. + </p> + + <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;" + onfocus="console.log('user focus handler')" + onblur="console.log('user blur handler')" + > + <div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="First" closable="true"></div> + <div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Second"></div> + <div dojoType="dijit.layout.ContentPane" title="Third" onClose="testClose" closable="true"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p>If you try to close me there should be a confirm dialog.</p> + </div> + </div> + + <p>Tabs with titles on the bottom:</p> + + <div id="btabs" dojoType="dijit.layout.TabContainer" tabPosition="bottom" style="width: 100%; height: 10em;"> + <div id="btab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div> + <div id="btab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" onLoad="console.debug('Tab2 onLoad');" title="Tab 2"></div> + </div> + + <p>Tabs with titles on the left:</p> + + <div id="lhtabs" dojoType="dijit.layout.TabContainer" tabPosition="left-h" style="width: 100%; height: 10em;"> + <div id="lhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + <div id="lhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div> + </div> + + <p>Tabs with titles on the right:</p> + + <div id="lrtabs" dojoType="dijit.layout.TabContainer" tabPosition="right-h" style="width: 100%; height: 10em;"> + <div id="rhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + <div id="rhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div> + </div> + +<p></p> + <div dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabPosition="left-h"> + <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap"> + Once upon a time there was a dear little girl who was loved by + every one who looked at her, but most of all by her grandmother, + and there was nothing that she would not have given to the child. + </div> + <div id="HanselGretel" dojoType="dijit.layout.ContentPane" + title="Hansel and Gretel" closable="true" selected="true"> + Hard by a great forest dwelt a poor wood-cutter with his wife + and his two children. The boy was called Hansel and the girl Gretel. + He had little to bite and to break, and once when great dearth fell + on the land, he could no longer procure even daily bread. + </div> + <div id="GreenTwigs" dojoType="dijit.layout.ContentPane" + title="The Three Green Twigs"> + There was once upon a time a hermit who lived in a forest at the foot + of a mountain, and passed his time in prayer and good works, + and every evening he carried, to the glory of God, two pails of water + up the mountain. + </div> + + <h3>Typical rendering time</h3> + <table border=1> + <tr><th>IE</th><th>Firefox (mac)</th></tr> + <tr><td>1719</td><td>922</td></tr> + </table> + <h3>Rendering time</h3> + +</body> +</html> |