| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|---|
| 5 | <title>TabContainer Nested 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: the 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="isDebug: true, parseOnLoad: false"></script> |
|---|
| 18 | |
|---|
| 19 | <!-- only needed for alternate theme testing: do NOT use in your code! --> |
|---|
| 20 | <script type="text/javascript" src="../_testCommon.js"></script> |
|---|
| 21 | |
|---|
| 22 | <script type="text/javascript"> |
|---|
| 23 | dojo.require("doh.runner"); |
|---|
| 24 | dojo.require("dijit.dijit"); // optimize: load dijit layer |
|---|
| 25 | dojo.require("dijit.layout.TabContainer"); |
|---|
| 26 | dojo.require("dijit.TitlePane"); |
|---|
| 27 | |
|---|
| 28 | var resized = {}; |
|---|
| 29 | |
|---|
| 30 | dojo.ready(function(){ |
|---|
| 31 | dojo.connect(dijit.layout.TabContainer.prototype, "resize", function(){ |
|---|
| 32 | resized[this.id] = true; |
|---|
| 33 | }); |
|---|
| 34 | dojo.parser.parse(dojo.body()); |
|---|
| 35 | |
|---|
| 36 | // Tests that TabContainer.resize() (for the TabContainers nested in TitlePanes) |
|---|
| 37 | // is called at the right time. |
|---|
| 38 | doh.register("resize timing", [ |
|---|
| 39 | { |
|---|
| 40 | name: "subtabs1", |
|---|
| 41 | runTest: function(t){ |
|---|
| 42 | // Since tab 1 is selected and TitlePane 1 is open, subtabs1 should have resized on parse |
|---|
| 43 | doh.t(resized["subtabs1"], "subtabs1"); |
|---|
| 44 | doh.f(resized["subtabs2"], "subtabs2"); |
|---|
| 45 | doh.f(resized["subtabs3"], "subtabs3"); |
|---|
| 46 | } |
|---|
| 47 | }, |
|---|
| 48 | { |
|---|
| 49 | name: "subtabs2", |
|---|
| 50 | runTest: function(t){ |
|---|
| 51 | // Since TitlePane 2 is open, subtabs2 should get a resize when tab2 is selected |
|---|
| 52 | dijit.byId("mainTabContainer").selectChild(dijit.byId("tab2")); |
|---|
| 53 | doh.t(resized["subtabs2"], "subtabs2"); |
|---|
| 54 | doh.f(resized["subtabs3"], "subtabs3"); |
|---|
| 55 | } |
|---|
| 56 | }, |
|---|
| 57 | { |
|---|
| 58 | name: "subtabs3", |
|---|
| 59 | runTest: function(t){ |
|---|
| 60 | // Since TitlePane 3 is closed, subtabs3 shouldn't get a resize until tab3 is selected |
|---|
| 61 | // and TitlePane is open |
|---|
| 62 | dijit.byId("mainTabContainer").selectChild(dijit.byId("tab3")); |
|---|
| 63 | doh.f(resized["subtabs3"], "subtabs3 not sized yet"); |
|---|
| 64 | dijit.byId("tp3").set("open", true); |
|---|
| 65 | doh.t(resized["subtabs3"], "subtabs3 sized"); |
|---|
| 66 | } |
|---|
| 67 | } |
|---|
| 68 | ]); |
|---|
| 69 | |
|---|
| 70 | doh.run(); |
|---|
| 71 | }); |
|---|
| 72 | |
|---|
| 73 | </script> |
|---|
| 74 | |
|---|
| 75 | </head> |
|---|
| 76 | <body class="claro"> |
|---|
| 77 | |
|---|
| 78 | <h1 class="testTitle">Dijit layout.TabContainer nested TitlePane tests</h1> |
|---|
| 79 | |
|---|
| 80 | <div id="mainTabContainer" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 100%; height: 150px;"'> |
|---|
| 81 | |
|---|
| 82 | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id: "tab1", title:"Tab 1"'> |
|---|
| 83 | <h1>I am tab 1</h1> |
|---|
| 84 | <div data-dojo-type="dijit.TitlePane" data-dojo-props='id: "tp1", title:"Title pane 1", style:{width:"300px"}'> |
|---|
| 85 | <p>This is a title pane, containing another tab container ...</p> |
|---|
| 86 | <p> |
|---|
| 87 | 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. More Ipsum... |
|---|
| 88 | </p> |
|---|
| 89 | <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='id: "subtabs1", style:"width: 100%; height: 150px;"'> |
|---|
| 90 | <div id="tab1_1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"tab1.html", title:"Tab 1"'></div> |
|---|
| 91 | <div id="tab1_2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"tab2.html", refreshOnShow:true, title:"Tab 2", selected:true'></div> |
|---|
| 92 | </div> |
|---|
| 93 | </div> |
|---|
| 94 | </div> |
|---|
| 95 | |
|---|
| 96 | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id: "tab2", title:"Tab 2"'> |
|---|
| 97 | <h1>I am tab 2</h1> |
|---|
| 98 | <div data-dojo-type="dijit.TitlePane" data-dojo-props='id: "tp2", title:"Title pane 2", style:{width:"300px"}'> |
|---|
| 99 | <p>This is a title pane, containing another tab container ...</p> |
|---|
| 100 | <p> |
|---|
| 101 | 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. More Ipsum... |
|---|
| 102 | </p> |
|---|
| 103 | <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='id: "subtabs2", style:"width: 100%; height: 150px;"'> |
|---|
| 104 | <div id="tab2_1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"tab1.html", title:"Tab 1"'></div> |
|---|
| 105 | <div id="tab2_2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"tab2.html", refreshOnShow:true, title:"Tab 2", selected:true'></div> |
|---|
| 106 | </div> |
|---|
| 107 | </div> |
|---|
| 108 | </div> |
|---|
| 109 | |
|---|
| 110 | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id: "tab3", title:"Tab 3"'> |
|---|
| 111 | <h1>I am tab 3</h1> |
|---|
| 112 | <div data-dojo-type="dijit.TitlePane" data-dojo-props='id: "tp3", title:"Title pane 3", style:{width:"300px"}, open: false'> |
|---|
| 113 | <p>This is a title pane, containing another tab container ...</p> |
|---|
| 114 | <p> |
|---|
| 115 | 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. More Ipsum... |
|---|
| 116 | </p> |
|---|
| 117 | <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='id: "subtabs3", style:"width: 100%; height: 150px;"'> |
|---|
| 118 | <div id="tab3_1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"tab1.html", title:"Tab 1"'></div> |
|---|
| 119 | <div id="tab3_2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='href:"tab2.html", refreshOnShow:true, title:"Tab 2", selected:true'></div> |
|---|
| 120 | </div> |
|---|
| 121 | </div> |
|---|
| 122 | </div> |
|---|
| 123 | |
|---|
| 124 | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id: "hrefTab", href:"tab2.html", title:"Href Tab"'></div> |
|---|
| 125 | </div> |
|---|
| 126 | |
|---|
| 127 | <h3>Rendering time</h3> |
|---|
| 128 | |
|---|
| 129 | </body> |
|---|
| 130 | </html> |
|---|
