| New file |
|---|
| 0,0 → 1,158 |
|---|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>TabContainer Demo</title> |
| |
| <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> |
| |
| <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> |
| </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;"> |
| <div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div> |
| <div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2"></div> |
| <div dojoType="dijit.layout.ContentPane" title="Tab 3" 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> |
| |
| <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> |