git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/tests/dnd/test_selector.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4         <title>Dojo DnD selector test</title>
   5         <style type="text/css">
   6                 @import "../../resources/dojo.css";
   7                 @import "dndDefault.css";
   8
   9                 body { padding: 20px; }
  10         </style>
  11         <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script>
  12         <script type="text/javascript" src="../../dnd/common.js"></script>
  13         <script type="text/javascript" src="../../dnd/Container.js"></script>
  14         <script type="text/javascript" src="../../dnd/Selector.js"></script>
  15         <script type="text/javascript">
  16                 //dojo.require("dojo.dnd.Selector");
  17                 var c1, c2, c3, c4, c5;
  18                 var init = function(){
  19                         c1 = new dojo.dnd.Selector(dojo.byId("container1"), {singular: true});
  20                         c2 = new dojo.dnd.Selector(dojo.byId("container2"));
  21                         c3 = new dojo.dnd.Selector(dojo.byId("container3"));
  22                         c4 = new dojo.dnd.Selector(dojo.byId("container4"));
  23                         c5 = new dojo.dnd.Selector(dojo.byId("container5"));
  24                 };
  25                 dojo.addOnLoad(init);
  26         </script>
  27 </head>
  28 <body>
  29         <h1>Dojo DnD selector test</h1>
  30         <p>Containers have a notion of a "current container", and one element can be "current". All containers on this page are selectors that allow to select elements.</p>
  31         <p>Following selection modes are supported by default:</p>
  32         <ul>
  33                 <li>Simple click &mdash; selects a single element, all other elements will be unselected.</li>
  34                 <li>Ctrl+click &mdash; toggles a selection state of an element (use Meta key on Mac).</li>
  35                 <li>Shift+click &mdash; selects a range of elements from the previous anchor to the current element.</li>
  36                 <li>Ctrl+Shift+click &mdash; adds a range of elements from the previous anchor to the current element (use Meta key on Mac).</li>
  37         </ul>
  38         <h2>DIV selector</h2>
  39         <p>This selector can select just one element a time. It was specified during the creation time.</p>
  40         <div id="container1" class="container">
  41                 <div class="dojoDndItem">Item 1</div>
  42                 <div class="dojoDndItem">Item 2</div>
  43                 <div class="dojoDndItem">Item 3</div>
  44         </div>
  45         <h2>UL selector</h2>
  46         <ul id="container2" class="container">
  47                 <li class="dojoDndItem">Item 1</li>
  48                 <li class="dojoDndItem">Item 2</li>
  49                 <li class="dojoDndItem">Item 3</li>
  50         </ul>
  51         <h2>OL selector</h2>
  52         <ol id="container3" class="container">
  53                 <li class="dojoDndItem">Item 1</li>
  54                 <li class="dojoDndItem">Item 2</li>
  55                 <li class="dojoDndItem">Item 3</li>
  56         </ol>
  57         <h2>TABLE selector</h2>
  58         <table id="container4" class="container" border="1px solid black">
  59                 <tr class="dojoDndItem">
  60                         <td>A</td>
  61                         <td>row 1</td>
  62                 </tr>
  63                 <tr class="dojoDndItem">
  64                         <td>B</td>
  65                         <td>row 2</td>
  66                 </tr>
  67                 <tr class="dojoDndItem">
  68                         <td>C</td>
  69                         <td>row 3</td>
  70                 </tr>
  71         </table>
  72         <h2>P selector with SPAN elements</h2>
  73         <p>Elements of this container are layed out horizontally.</p>
  74         <p id="container5" class="container">
  75                 <span class="dojoDndItem">&nbsp;Item 1&nbsp;</span>
  76                 <span class="dojoDndItem">&nbsp;Item 2&nbsp;</span>
  77                 <span class="dojoDndItem">&nbsp;Item 3&nbsp;</span>
  78         </p>
  79 </body>
  80 </html>