git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_TitlePane.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>TitlePane Test</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="parseOnLoad: true, isDebug: true"></script>
  14         <script type="text/javascript" src="_testCommon.js"></script>
  15
  16         <script language="JavaScript" type="text/javascript">
  17                 dojo.require("dijit.TitlePane");
  18                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  19
  20                 // widgets used inside subpage loaded via href=
  21                 dojo.require("dijit.form.Button");
  22                 dojo.require("dijit.form.ComboBox");
  23
  24                 function randomMessageId(){
  25                         return Math.floor(Math.random() * 3) + 3;
  26                 }
  27
  28                 dojo.declare("dijit.TestTitlePane", dijit.TitlePane, {
  29                         templateString: '<div class="dijitTitlePane">' +
  30                                                         '    <div class="dijitTitlePaneTitle" dojoAttachPoint="titleBarNode" style="cursor: default;">' +
  31                                                         '        <div dojoAttachEvent="onclick:toggle,onkeypress: _onTitleKey,onfocus:_handleFocus,onblur:_handleFocus" tabindex="0"' +
  32                                                         '                waiRole="button" dojoAttachPoint="focusNode,arrowNode" class="dijitInline dijitArrowNode" style="cursor: pointer;"><span dojoAttachPoint="arrowNodeInner" class="dijitArrowNodeInner"></span></div>' +
  33                                                         '        <div dojoAttachPoint="titleNode" class="dijitTitlePaneTextNode"></div>' +
  34                                                         '    </div>' +
  35                                                         '    <div class="dijitTitlePaneContentOuter" dojoAttachPoint="hideNode">' +
  36                                                         '        <div class="dijitReset" dojoAttachPoint="wipeNode">' +
  37                                                         '            <div class="dijitTitlePaneContentInner" dojoAttachPoint="containerNode" waiRole="region" tabindex="-1">' +
  38                                                         '            </div>' +
  39                                                         '        </div>' +
  40                                                         '    </div>' +
  41                                                         '</div>'
  42                 });
  43         </script>
  44 </head>
  45 <body>
  46         <h1 class="testTitle">Dijit TitlePane Test</h1>
  47
  48         <h1>Test #1: plain title pane, width=300px</h1>
  49         <div dojoType="dijit.TitlePane" title="Title Pane #1" style="width: 300px;">
  50                 Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
  51                 iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
  52                 orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
  53                 pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
  54                 Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
  55                 nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
  56                 consectetuer adipiscing elit.
  57         </div>
  58
  59         <h1>Test #2: title pane with form, width=300px</h1>
  60
  61         <div dojoType="dijit.TitlePane" title="Title Pane #2" id="pane_2" style="width: 300px;">
  62                 <form>
  63                         Age: <input><br>
  64                         Discount card <input type=checkbox><br>
  65                         <button>Submit</button><br>
  66                 </form>
  67         </div>
  68         <br>
  69
  70         <h1>Test #3: initially closed pane</h1>
  71         <div id="closed" dojoType="dijit.TitlePane" title="Initially closed pane" open="false" width="200">
  72                 <form>
  73                         <title for="age">Age: </title><input id="age"><br>
  74                         <title for="discount">Discount card </title><input type=checkbox id="discount"><br>
  75                         <button>Submit</button><br>
  76                 </form>
  77         </div>
  78         <button onclick="dijit.byId('closed').setContent('hello world! (' + new Date() + ')');">reset content</button>
  79
  80         <h1>Test #4: title pane with href (initially closed)</h1>
  81         <p>The pane should open to "Loading..." message and then 2 seconds later it should slide open more to show loaded data.</p>
  82         <div dojoType="dijit.TitlePane" duration=1000 title="Pane from href" href="layout/getResponse.php?delay=3000&messId=3" open="false">
  83                 Loading...
  84         </div>
  85
  86         <h1>Test #5: title pane with href (initially closed)</h1>
  87         <p>The pane should start to open to "Loading..." but halfway through href data will be loaded, and it should expand correctly.</p>
  88         <div dojoType="dijit.TitlePane" duration=1000 title="Pane from href" href="layout/getResponse.php?delay=500&messId=3" open="false">
  89                 Loading...
  90         </div>
  91
  92         <h1>Test #6: nested title pane</h1>
  93         <div dojoType="dijit.TitlePane" title="Outer pane" width="300">
  94                 <p>This is a title pane, containing another title pane ...
  95                 <p>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.
  96 More Ipsum...
  97
  98                 <div dojoType="dijit.TitlePane" title="Inner pane" width="250">
  99                         <p>And this is the inner title pane...
 100                         <p>Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 101                 </div>
 102
 103                 <p>And this is the closing line for the outer title pane.
 104         </div>
 105
 106         <h1>Test #7: subclassed title pane (only arrow is selectable and focusable)</h1>
 107         <div dojoType="dijit.TestTitlePane" title="Title Pane #7" style="width: 300px;">
 108                 Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
 109                 iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
 110                 orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
 111                 pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
 112                 Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
 113                 nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
 114                 consectetuer adipiscing elit.
 115         </div>
 116
 117         <table style="border: solid blue 2px; margin-top: 1em;">
 118                 <tr>
 119                         <td>
 120                                 Here's some text below the title panes (to make sure that closing a title pane releases the space that the content was taking up)
 121                         </td>
 122                 </tr>
 123         </table>
 124
 125 </body>
 126 </html>