git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_TooltipDialog.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>TooltipDialog Widget Tests</title>
   6
   7         <style type="text/css">
   8                 @import "../../dojo/resources/dojo.css";
   9                 @import "css/dijitTests.css";
  10
  11                 body { font-family : sans-serif; }
  12                 form { margin-bottom : 0; }
  13                 table { border: none; }
  14         </style>
  15
  16         <script type="text/javascript"
  17                 djConfig="parseOnLoad: true, isDebug: true"
  18                 src="../../dojo/dojo.js"></script>
  19         <script type="text/javascript" src="_testCommon.js"></script>
  20
  21         <script type="text/javascript">
  22                 dojo.require("dijit.Dialog");
  23                 dojo.require("dijit.form.Button");
  24                 dojo.require("dijit.form.TextBox");
  25                 dojo.require("dijit.form.DateTextBox");
  26                 dojo.require("dijit.form.TimeTextBox");
  27                 dojo.require("dijit.form.FilteringSelect");
  28                 dojo.require("dijit.layout.TabContainer");
  29                 dojo.require("dijit.Menu");
  30                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  31
  32                 // create a do nothing, only for test widget
  33                 dojo.declare("dijit.TestWidget",
  34                         [dijit._Widget, dijit._Templated], {
  35                         templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>"
  36                 });
  37
  38                 // make dojo.toJson() print dates correctly (this feels a bit dirty)
  39                 Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
  40         </script>
  41 </head>
  42 <body>
  43 <h1 class="testTitle">Dijit layout.TooltipDialog tests</h1>
  44
  45 <div dojoType="dijit.form.DropDownButton">
  46         <span>Show Tooltip Dialog</span>
  47         <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
  48                 execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
  49                 <table>
  50                         <tr>
  51                                 <td><label for="user">User:</label></td>
  52                                 <td><input dojoType=dijit.form.TextBox type="text" name="user" id="user"></td>
  53                         </tr>
  54                         <tr>
  55                                 <td><label for="pwd">Password:</label></td>
  56                                 <td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="pwd"></td>
  57                         </tr>
  58                         <tr>
  59                                 <td><label for="date2">Date:</label></td>
  60                                 <td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td>
  61                         </tr>
  62                         <tr>
  63                                 <td><label for="time2">Time:</label></td>
  64                                 <td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td>
  65                         </tr>
  66                         <tr>
  67                                 <td><label for="combo">Pizza:</label></td>
  68                                 <td>
  69                                         <select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true">
  70                                                 <option value="cheese">cheese</option>
  71                                                 <option value="pepperoni">pepperoni</option>
  72                                                 <option value="sausage">sausage</option>
  73                                         </select>
  74                                 </td>
  75                         </tr>
  76                         <tr>
  77                                 <td colspan="2" align="center">
  78                                         <button dojoType=dijit.form.Button type="submit" name="submit">Order</button>
  79                                 </td>
  80                         </tr>
  81                 </table>
  82                 <div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div>
  83         </div>
  84 </div> |
  85
  86 <div dojoType="dijit.form.DropDownButton">
  87         <span>Show Tooltip Dialog with TabContainer</span>
  88         <div dojoType="dijit.TooltipDialog" id="tabTooltip" title="Tab Container Tooltip">
  89                 <div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 300px;">
  90                         <div dojoType="dijit.layout.ContentPane" title="First tab">
  91                                 <p>
  92                                         This is the first tab.
  93                                 </p>
  94                                 <p>
  95                                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
  96                                 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
  97                                 porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
  98                                 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
  99                                 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
 100                                 risus.
 101                                 </p>
 102                         </div>
 103                         <div dojoType="dijit.layout.ContentPane" title="Second tab">
 104                                 <p>
 105                                         This is the second tab.
 106                                 </p>
 107                                 <p>
 108                                 <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean
 109                                 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
 110                                 porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
 111                                 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
 112                                 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
 113                                 risus.
 114                                 </p>
 115                         </div>
 116                 </div>
 117         </div>
 118 </div> |
 119
 120 <div dojoType="dijit.form.DropDownButton">
 121         <span>Test slowloading HREF Tooltip Dialog</span>
 122         <div dojoType="dijit.TooltipDialog" id="slowLoad" href="layout/getResponse.php?delay=500&messId=2"
 123                 title="tooltip dialog with no focusable items"></div>
 124 </div> |
 125
 126 <p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
 127
 128 <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 129 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
 130 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 131 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 132 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 133 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 134 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 135 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 136 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 137 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 138 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 139 tortor pharetra congue. Suspendisse pulvinar.
 140 </p>
 141 <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
 142 ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
 143 nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
 144 lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
 145 est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
 146 dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
 147 nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
 148 pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
 149 sociosqu ad litora torquent per conubia nostra, per inceptos
 150 hymenaeos.
 151 </p>
 152 <form>
 153         <center>
 154                 <select>
 155                         <option>1</option>
 156                         <option>2</option>
 157                 </select>
 158         </center>
 159 </form>
 160 <p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
 161 et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
 162 ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
 163 vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
 164 conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
 165 luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
 166 vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
 167 egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
 168 felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
 169 risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
 170 tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
 171 turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
 172 consectetuer dapibus eros. Aliquam nisl.
 173 </p>
 174 <div style="float:right;clear:right;" dojoType="dijit.form.DropDownButton">
 175         <span>dropdown at right</span>
 176 <div dojoType="dijit.TooltipDialog" id="dialogright">
 177                 <div style="white-space:nowrap;">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</div>
 178 </div>
 179 </div>
 180 <p>
 181 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
 182 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
 183 porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
 184 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
 185 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
 186 risus.
 187 </p>
 188 <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 189 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
 190 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 191 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 192 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 193 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 194 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 195 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 196 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 197 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 198 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 199 tortor pharetra congue. Suspendisse pulvinar.
 200 </p>
 201
 202 <div dojoType="dijit.form.DropDownButton" title="Enter Login information2">
 203         <span>Show Tooltip Dialog pointing upwards, with links</span>
 204         <div dojoType="dijit.TooltipDialog" title="General Information Dialog">
 205                 <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
 206                 ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
 207                 nonummy mollis. <a href="http://www.lipsum.com/">Vestibulum</a> vel purus ac pede semper accumsan. Vivamus
 208                 lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
 209                 est quam sed urna. Phasellus adipiscing justo in <a href="http://www.lipsum.com/">ipsum</a>. Duis sagittis
 210                 dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
 211                 nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
 212                 pretium sollicitudin sapien. <a href="http://www.lipsum.com/">Suspendisse imperdiet</a>. Class aptent taciti
 213                 sociosqu ad litora torquent per conubia nostra, per inceptos
 214                 hymenaeos.
 215                 </p>
 216         </div>
 217 </div>
 218 (will go up if there isn't enough space on the bottom of the screen)
 219
 220 <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
 221 ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
 222 nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
 223 lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
 224 est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
 225 dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
 226 nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
 227 pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
 228 sociosqu ad litora torquent per conubia nostra, per inceptos
 229 hymenaeos.
 230 </p>
 231 <form>
 232         <center>
 233                 <select>
 234                         <option>1</option>
 235                         <option>2</option>
 236                 </select>
 237         </center>
 238 </form>
 239 <p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
 240 et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
 241 ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
 242 vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
 243 conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
 244 luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
 245 vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
 246 egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
 247 felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
 248 risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
 249 tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
 250 turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
 251 consectetuer dapibus eros. Aliquam nisl.
 252 </p>
 253 <p>
 254 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
 255 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
 256 porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
 257 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
 258 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
 259 risus.
 260 </p>
 261 <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 262 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
 263 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 264 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 265 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 266 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 267 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 268 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 269 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 270 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 271 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 272 tortor pharetra congue. Suspendisse pulvinar.
 273 </p>
 274 <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
 275 ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
 276 nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
 277 lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
 278 est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
 279 dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
 280 nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
 281 pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
 282 sociosqu ad litora torquent per conubia nostra, per inceptos
 283 hymenaeos.
 284 </p>
 285 <p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
 286 et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
 287 ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
 288 vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
 289 conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
 290 luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
 291 vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
 292 egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
 293 felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
 294 risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
 295 tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
 296 turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
 297 consectetuer dapibus eros. Aliquam nisl.
 298 </p>
 299
 300 <p>
 301 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
 302 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
 303 porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
 304 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
 305 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
 306 risus.
 307 </p>
 308 <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 309 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
 310 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 311 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 312 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 313 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 314 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 315 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 316 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 317 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 318 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 319 tortor pharetra congue. Suspendisse pulvinar.
 320 </p>
 321 <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
 322 ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
 323 nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
 324 lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
 325 est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
 326 dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
 327 nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
 328 pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
 329 sociosqu ad litora torquent per conubia nostra, per inceptos
 330 hymenaeos.
 331 </p>
 332 <p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
 333 et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
 334 ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
 335 vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
 336 conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
 337 luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
 338 vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
 339 egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
 340 felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
 341 risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
 342 tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
 343 turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
 344 consectetuer dapibus eros. Aliquam nisl.
 345 </p>
 346
 347 </body>
 348 </html>
 349