mochikit_v14/examples/dnd_sortable/sortable_tree_test.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4   <head>
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   6     <title>Sortable tree test</title>
   7         <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
   8         <script type="text/javascript" src="../../MochiKit/Position.js"></script>
   9         <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
  10         <script type="text/javascript" src="../../MochiKit/Signal.js"></script>
  11         <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
  12         <script type="text/javascript" src="../../MochiKit/Sortable.js"></script>
  13     <style type="text/css">
  14       ul  {padding-top:4px; padding-bottom: 2px; border: 1px solid #ccf;}
  15       li  {border: 1px solid #fcc;}
  16     </style>
  17   </head>
  18
  19   <body>
  20     <a href="#" onclick="alert(MochiKit.Sortable.Sortable.serialize('menu'));return false">serialize 1</a>
  21
  22     <ul id="menu" style="padding-top: 6px; padding-bottom: 6px;">
  23         <li class="edit_link level0" id="t1_7">
  24           System
  25           <ul class="edit_list">
  26           <li class="edit_link level1" id="t1_8">
  27             Page Not Found
  28             <ul class="edit_list"></ul>
  29           </li>
  30           <li class="edit_link level1" id="t1_9">
  31             Translation Not Available
  32             <ul class="edit_list"></ul>
  33           </li>
  34         </ul>
  35       </li>
  36         <li class="edit_link level0" id="t1_10">
  37         Main Menu
  38           <ul class="edit_list">
  39           <li class="edit_link level1" id="t1_1">
  40             Welcome
  41                <ul class="edit_list"></ul>
  42           </li>
  43           <li class="edit_link level1" id="t1_2">
  44             Software
  45             <ul class="edit_list">
  46               <li class="edit_link level2" id="t1_4">
  47                 Serial Console
  48                 <ul class="edit_list">
  49                   <li class="edit_link level3" id="t1_6">
  50                     Features
  51                     <ul class="edit_list"></ul>
  52                   </li>
  53                 </ul>
  54               </li>
  55               <li class="edit_link level2" id="t1_5">
  56                 Property Manager
  57                 <ul class="edit_list"></ul>
  58               </li>
  59               <li class="edit_link level2" id="t1_11">
  60                 Geomap
  61                 <ul class="edit_list"></ul>
  62               </li>
  63             </ul>
  64           </li>
  65           <li class="edit_link level1" id="t1_12">
  66             Services
  67             <ul class="edit_list"></ul>
  68           </li>
  69           <li class="edit_link level1" id="t1_13">
  70             Software
  71             <ul class="edit_list">
  72               <li class="edit_link level2" id="t1_14">
  73                 Serial Console
  74                 <ul class="edit_list">
  75                   <li class="edit_link level3" id="t1_15">
  76                     Features
  77                     <ul class="edit_list"></ul>
  78                   </li>
  79                 </ul>
  80               </li>
  81               <li class="edit_link level2" id="t1_16">
  82                 Property Manager
  83                 <ul class="edit_list"></ul>
  84               </li>
  85               <li class="edit_link level2" id="t1_17">
  86                 Geomap
  87                 <ul class="edit_list"></ul>
  88               </li>
  89             </ul>
  90           </li>
  91           <li class="edit_link level1" id="t1_18">
  92             Services
  93             <ul class="edit_list"></ul>
  94           </li>
  95         </ul>
  96       </li>
  97     </ul>
  98
  99     <script type="text/javascript">
 100     //<![CDATA[
 101     MochiKit.Sortable.Sortable.create('menu', {tree:true,scroll:window});
 102     //]]>
 103     </script>
 104
 105     <ul id="menu2" style="padding-top: 6px; padding-bottom: 6px;">
 106         <li class="edit_link level0" id="t2_7">
 107           System
 108           <ul class="edit_list">
 109           <li class="edit_link level1" id="t2_8">
 110             Page Not Found
 111             <ul class="edit_list"></ul>
 112           </li>
 113           <li class="edit_link level1" id="t2_9">
 114             Translation Not Available
 115             <ul class="edit_list"></ul>
 116           </li>
 117         </ul>
 118       </li>
 119         <li class="edit_link level0" id="t2_10">
 120         Main Menu
 121           <ul class="edit_list">
 122           <li class="edit_link level1" id="t2_1">
 123             Welcome
 124                <ul class="edit_list"></ul>
 125           </li>
 126           <li class="edit_link level1" id="t2_2">
 127             Software
 128             <ul class="edit_list">
 129               <li class="edit_link level2" id="t2_4">
 130                 Serial Console
 131                 <ul class="edit_list">
 132                   <li class="edit_link level3" id="t2_6">
 133                     Features
 134                     <ul class="edit_list"></ul>
 135                   </li>
 136                 </ul>
 137               </li>
 138               <li class="edit_link level2" id="t2_5">
 139                 Property Manager
 140                 <ul class="edit_list"></ul>
 141               </li>
 142               <li class="edit_link level2" id="t2_11">
 143                 Geomap
 144                 <ul class="edit_list"></ul>
 145               </li>
 146             </ul>
 147           </li>
 148           <li class="edit_link level1" id="t2_12">
 149             Services
 150             <ul class="edit_list"></ul>
 151           </li>
 152           <li class="edit_link level1" id="t2_13">
 153             Software
 154             <ul class="edit_list">
 155               <li class="edit_link level2" id="t2_14">
 156                 Serial Console
 157                 <ul class="edit_list">
 158                   <li class="edit_link level3" id="t2_15">
 159                     Features
 160                     <ul class="edit_list"></ul>
 161                   </li>
 162                 </ul>
 163               </li>
 164               <li class="edit_link level2" id="t2_16">
 165                 Property Manager
 166                 <ul class="edit_list"></ul>
 167               </li>
 168               <li class="edit_link level2" id="t2_17">
 169                 Geomap
 170                 <ul class="edit_list"></ul>
 171               </li>
 172             </ul>
 173           </li>
 174           <li class="edit_link level1" id="t2_18">
 175             Services
 176             <ul class="edit_list"></ul>
 177           </li>
 178         </ul>
 179       </li>
 180     </ul>
 181
 182     <script type="text/javascript">
 183     //<![CDATA[
 184     MochiKit.Sortable.Sortable.create('menu2', {tree:true,scroll:window});
 185     //]]>
 186     </script>
 187
 188   </body>
 189 </html>