[ Index ]

PHP Cross Reference of Drupal 6 (gatewave)

title

Body

[close]

/sites/all/modules/jquery_ui/jquery.ui/demos/sortable/ -> display-grid.html (source)

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Sortable - Display as grid</title>
   5      <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
   6      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
   7      <script type="text/javascript" src="../../ui/ui.core.js"></script>
   8      <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
   9      <link type="text/css" href="../demos.css" rel="stylesheet" />
  10      <style type="text/css">
  11      #sortable { list-style-type: none; margin: 0; padding: 0; }

  12      #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }

  13      </style>
  14      <script type="text/javascript">
  15      $(function() {
  16          $("#sortable").sortable();
  17          $("#sortable").disableSelection();
  18      });
  19      </script>
  20  </head>
  21  <body>
  22  <div class="demo">
  23  
  24  <ul id="sortable">
  25      <li class="ui-state-default">1</li>
  26      <li class="ui-state-default">2</li>
  27      <li class="ui-state-default">3</li>
  28      <li class="ui-state-default">4</li>
  29      <li class="ui-state-default">5</li>
  30      <li class="ui-state-default">6</li>
  31      <li class="ui-state-default">7</li>
  32      <li class="ui-state-default">8</li>
  33      <li class="ui-state-default">9</li>
  34      <li class="ui-state-default">10</li>
  35      <li class="ui-state-default">11</li>
  36      <li class="ui-state-default">12</li>
  37  </ul>
  38  
  39  </div><!-- End demo -->
  40  
  41  <div class="demo-description">
  42  
  43  <p>
  44      To arrange sortable items as a grid, give them identical dimensions and
  45      float them using CSS.
  46  </p>
  47  
  48  </div><!-- End demo-description -->
  49  
  50  </body>
  51  </html>


Generated: Thu Mar 24 11:18:33 2011 Cross-referenced by PHPXref 0.7