git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/layout/test_AccordionContainer.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Accordion Widget Demo</title>
   6
   7         <style type="text/css">
   8                 @import "../../../dojo/resources/dojo.css";
   9                 @import "../css/dijitTests.css";
  10         </style>
  11
  12         <script type="text/javascript" src="../../../dojo/dojo.js"
  13                 djConfig="isDebug: true, parseOnLoad: true"></script>
  14         <script type="text/javascript" src="../_testCommon.js"></script>
  15
  16         <!-- uncomment for profiling
  17                 <script type="text/javascript"
  18                         src="../../../dojo/_base/html.js"></script>
  19                 <script type="text/javascript"
  20                         src="../../base/Layout.js"></script>
  21         -->
  22
  23         <script type="text/javascript">
  24                 dojo.require("dijit.layout.AccordionContainer");
  25                 dojo.require("dijit.layout.ContentPane");
  26                 dojo.require("dijit.layout.BorderContainer");
  27                 dojo.require("dijit.form.ComboBox");
  28                 dojo.require("dijit.form.Button");
  29                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  30
  31                 var accordion, pane4;
  32
  33                 function init(){
  34                         accordion = new dijit.layout.AccordionContainer({}, dojo.byId("accordionShell"));
  35                         dojo.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){
  36                                 // add a node that will be promoted to the content widget
  37                                 var refNode = document.createElement("span");
  38                                 refNode.innerHTML = "this is " + title;
  39                                 document.body.appendChild(refNode);
  40                                 var content = new dijit.layout.AccordionPane({title: title, selected: i==1}, refNode);
  41                                 console.debug("adding content pane " + content.id);
  42                                 accordion.addChild(content);
  43                         });
  44                         accordion.startup();
  45                         var refNode = document.createElement("span");
  46                         var title = "pane 4";
  47                         refNode.innerHTML = "this is " + title;
  48                         accordion.addChild(pane4=new dijit.layout.AccordionPane({title: title}, refNode));
  49                 }
  50
  51                 dojo.addOnLoad(init);
  52
  53                 function destroyChildren(){
  54                         accordion.destroyDescendants();
  55                 }
  56                 function selectPane4(){
  57                         accordion.selectChild(pane4);
  58                 }
  59         </script>
  60 </head>
  61 <body style="padding: 50px;">
  62
  63         <h1 class="testTitle">AccordionContainer Tests</h1>
  64
  65         <h2>Accordion from markup:</h2>
  66         <p>HTML before</p>
  67         <p>HTML before</p>
  68         <p>HTML before</p>
  69
  70         <div dojoType="dijit.layout.AccordionContainer" duration="200"
  71                 style="float: left; margin-right: 30px;  width: 400px; height: 300px; overflow: hidden">
  72                 <div dojoType="dijit.layout.AccordionPane" title="a">
  73                         Hello World
  74                 </div>
  75                 <div dojoType="dijit.layout.AccordionPane" title="b">
  76                         <p>
  77                                 Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
  78                                 suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
  79                                 Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
  80                                 bibendum sit amet, semper quis, aliquet nec, sapien.  Aliquam
  81                                 aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
  82                                 ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
  83                                 dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
  84                                 quam.
  85                         </p>
  86                         <p>
  87                                 Sed arcu magna, molestie at, <input value="fringilla in, sodales"/> eu, elit.
  88                                 Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
  89                                 vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
  90                                 augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
  91                                 metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
  92                                 ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
  93                                 euismod, magna nulla viverra libero, sit amet lacinia odio diam id
  94                                 risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
  95                                 porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
  96                                 faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
  97                                 consequat quis, varius interdum, nulla. Donec neque tortor,
  98                                 sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
  99                                 ut eros sit amet ante pharetra interdum.
 100                         </p>
 101                 </div>
 102                 <div dojoType="dijit.layout.AccordionPane" title="c">
 103                         <p>The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.</p>
 104                 </div>
 105         </div>
 106
 107         <p style="clear: both;">HTML after</p>
 108         <p>HTML after</p>
 109         <p>HTML after</p>
 110         <p></p>
 111         <p>Accordion with widgets</p>
 112         <div dojoType="dijit.layout.AccordionContainer" duration="200"
 113                 style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden">
 114                 <div dojoType="dijit.layout.AccordionPane" selected="true"
 115                         title="Pane 1" >
 116                                 <select>
 117                                         <option>red</option>
 118                                         <option>blue</option>
 119                                         <option>green</option>
 120                                 </select>
 121                                 <p>
 122                                 Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
 123                                 suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
 124                                 Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
 125                                 bibendum sit amet, semper quis, aliquet nec, sapien.  Aliquam
 126                                 aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
 127                                 ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
 128                                 dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
 129                                 quam.
 130                                 </p>
 131                                 <p>
 132                                 Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
 133                                 Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
 134                                 vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
 135                                 augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
 136                                 metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
 137                                 ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
 138                                 euismod, magna nulla viverra libero, sit amet lacinia odio diam id
 139                                 risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
 140                                 porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
 141                                 faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
 142                                 consequat quis, varius interdum, nulla. Donec neque tortor,
 143                                 sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
 144                                 ut eros sit amet ante pharetra interdum.
 145                                 </p>
 146                 </div>
 147
 148                 <!-- test lazy loading -->
 149                 <div dojoType="dijit.layout.AccordionPane" id="lazyLoadPane" title="Pane 2 (lazy load)" href="tab1.html"></div>
 150
 151                 <div dojoType="dijit.layout.AccordionPane" title="Pane 3 (split pane)">
 152                         <div dojoType="dijit.layout.BorderContainer" style="height:100%; width:100%">
 153                                 <div dojoType="dijit.layout.ContentPane" region="left" style="width:50%" splitter="true">
 154                                 1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
 155                                 Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
 156                                 vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
 157                                 augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
 158                                 metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
 159                                 ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
 160                                 euismod, magna nulla viverra libero, sit amet lacinia odio diam id
 161                                 risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
 162                                 porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
 163                                 faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
 164                                 consequat quis, varius interdum, nulla. Donec neque tortor,
 165                                 sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
 166                                 ut eros sit amet ante pharetra interdum.
 167                                 </div>
 168                                 <div dojoType="dijit.layout.ContentPane" region="center">
 169                                 2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
 170                                 Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
 171                                 vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
 172                                 augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
 173                                 metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
 174                                 ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
 175                                 euismod, magna nulla viverra libero, sit amet lacinia odio diam id
 176                                 risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
 177                                 porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
 178                                 faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
 179                                 consequat quis, varius interdum, nulla. Donec neque tortor,
 180                                 sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
 181                                 ut eros sit amet ante pharetra interdum.
 182                                 </div>
 183                         </div>
 184                 </div>
 185         </div>
 186
 187         <h2>Programatically created:</h2>
 188         <button onclick="destroyChildren();">destroy children</button>
 189         <button onclick="selectPane4();">select pane 4</button>
 190         <br>
 191
 192         <div id="accordionShell" style="width: 400px; height: 400px;"></div>
 193
 194 </body>
 195 </html>