| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | |
|---|
| 6 | <title>Dojox TitleGroup Test</title> |
|---|
| 7 | |
|---|
| 8 | <!-- required: a default theme file, and ColorPicker css --> |
|---|
| 9 | <link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css"> |
|---|
| 10 | <link rel="stylesheet" href="../TitleGroup/TitleGroup.css"> |
|---|
| 11 | |
|---|
| 12 | <style type="text/css"> |
|---|
| 13 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 14 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 15 | |
|---|
| 16 | #bar, #bar2 { |
|---|
| 17 | width:300px; |
|---|
| 18 | float:left; |
|---|
| 19 | margin-right:15px; |
|---|
| 20 | } |
|---|
| 21 | |
|---|
| 22 | .clear { |
|---|
| 23 | clear:both; |
|---|
| 24 | } |
|---|
| 25 | </style> |
|---|
| 26 | |
|---|
| 27 | <!-- required: dojo.js --> |
|---|
| 28 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script> |
|---|
| 29 | |
|---|
| 30 | <!-- do not use! only for testing dynamic themes --> |
|---|
| 31 | <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|---|
| 32 | |
|---|
| 33 | <script type="text/javascript"> |
|---|
| 34 | dojo.require("dojox.widget.TitleGroup"); |
|---|
| 35 | dojo.require("dijit.form.Button"); |
|---|
| 36 | dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
|---|
| 37 | |
|---|
| 38 | dojo.ready(function(){ |
|---|
| 39 | |
|---|
| 40 | var tg = new dojox.widget.TitleGroup({ |
|---|
| 41 | style:"width:500px;" |
|---|
| 42 | }).placeAt("holder"); |
|---|
| 43 | |
|---|
| 44 | tg.addChild(new dijit.TitlePane({ title:"Woot.", open:true })); |
|---|
| 45 | tg.addChild(new dijit.TitlePane({ title:"Second", open:false })); |
|---|
| 46 | new dijit.TitlePane({ title:"Testing placeAt", open:false }).placeAt(tg); |
|---|
| 47 | new dijit.TitlePane({ title:"Removed", open:false, id:"killer" }).placeAt(tg); |
|---|
| 48 | |
|---|
| 49 | tg.startup(); |
|---|
| 50 | |
|---|
| 51 | setTimeout(function(){ |
|---|
| 52 | tg.removeChild(dijit.byId("killer")).placeAt("graveyard"); |
|---|
| 53 | }, 3000); |
|---|
| 54 | |
|---|
| 55 | }); |
|---|
| 56 | |
|---|
| 57 | </script> |
|---|
| 58 | </head> |
|---|
| 59 | <body class="claro"> |
|---|
| 60 | |
|---|
| 61 | <h1 class="testTitle">Dojox TitleGroup test</h1> |
|---|
| 62 | |
|---|
| 63 | <div id="bar" dojoType="dojox.widget.TitleGroup"> |
|---|
| 64 | <div dojoType="dijit.TitlePane" open="true" title="Title 1">Yellow.</div> |
|---|
| 65 | <div dojoType="dijit.TitlePane" open="false" title="Title b">Heeeeee<br><br>hawwwww</div> |
|---|
| 66 | <div dojoType="dijit.TitlePane" open="false" title="Title 3"><p style="font-size:27pt">WOW</p></div> |
|---|
| 67 | <div dojoType="dijit.TitlePane" open="false" title="Title d"><p>a button.</p> |
|---|
| 68 | <button dojoType="dijit.form.Button">Label</button> |
|---|
| 69 | </div> |
|---|
| 70 | <div dojoType="dijit.TitlePane" open="false" title="Title 4 (href)" href="get_time.php"></div> |
|---|
| 71 | </div> |
|---|
| 72 | |
|---|
| 73 | <div id="bar2" dojoType="dojox.widget.TitleGroup"> |
|---|
| 74 | <div dojoType="dijit.TitlePane" open="false" title="Title 1" open="open">Yellow.</div> |
|---|
| 75 | <div dojoType="dijit.TitlePane" open="true" title="Title b">Heeeeee<br><br>hawwwww</div> |
|---|
| 76 | <div dojoType="dijit.TitlePane" open="false" title="Title 3"><p style="font-size:27pt">WOW</p></div> |
|---|
| 77 | <div dojoType="dijit.TitlePane" open="false" title="Title d (embedded TitlePanes)"> |
|---|
| 78 | <h3>See:</h3> |
|---|
| 79 | <div dojoType="dijit.TitlePane" title="I should open fine"> |
|---|
| 80 | <h3>See:</h3> |
|---|
| 81 | <div dojoType="dijit.TitlePane" title="I should open fine too"> |
|---|
| 82 | <p>Did i?</p> |
|---|
| 83 | </div> |
|---|
| 84 | </div> |
|---|
| 85 | </div> |
|---|
| 86 | </div> |
|---|
| 87 | |
|---|
| 88 | <div class="clear"></div> |
|---|
| 89 | |
|---|
| 90 | <h2>A TitlePane for good measure:</h2> |
|---|
| 91 | |
|---|
| 92 | <div dojoType="dijit.TitlePane" title="Basic, for Sanity" style="width:300px"> |
|---|
| 93 | <p>Lorem, ipsum <a href="#">dolor</a></p> |
|---|
| 94 | </div> |
|---|
| 95 | |
|---|
| 96 | <h2>Programattic</h2> |
|---|
| 97 | |
|---|
| 98 | <div id="holder"></div> |
|---|
| 99 | |
|---|
| 100 | <h2>Once removed, will show up here:</h2> |
|---|
| 101 | <div id="graveyard"></div> |
|---|
| 102 | |
|---|
| 103 | </body> |
|---|
| 104 | </html> |
|---|
