PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/jquery.ui/demos/sortable/connect-lists-through-tabs.html source

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Sortable - Connect lists with Tabs</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      <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
  10      <script type="text/javascript" src="../../ui/ui.tabs.js"></script>
  11      <link type="text/css" href="../demos.css" rel="stylesheet" />
  12      <style type="text/css">
  13      #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

  14      </style>
  15      <script type="text/javascript">
  16      $(function() {
  17          $("#sortable1, #sortable2").sortable().disableSelection();
  18  
  19          var $tabs = $("#tabs").tabs();
  20  
  21          var $tab_items = $("ul:first li",$tabs).droppable({
  22              accept: ".connectedSortable li",
  23              hoverClass: "ui-state-hover",
  24              drop: function(ev, ui) {
  25                  var $item = $(this);
  26                  var $list = $($item.find('a').attr('href')).find('.connectedSortable');
  27  
  28                  ui.draggable.hide('slow', function() {
  29                      $tabs.tabs('select', $tab_items.index($item));
  30                      $(this).appendTo($list).show('slow');
  31                  });
  32              }
  33          });
  34      });
  35      </script>
  36  </head>
  37  <body>
  38  <div class="demo">
  39  
  40  <div id="tabs">
  41      <ul>
  42          <li><a href="#tabs-1">Nunc tincidunt</a></li>
  43          <li><a href="#tabs-2">Proin dolor</a></li>
  44      </ul>
  45      <div id="tabs-1">
  46          <ul id="sortable1" class="connectedSortable ui-helper-reset">
  47              <li class="ui-state-default">Item 1</li>
  48              <li class="ui-state-default">Item 2</li>
  49              <li class="ui-state-default">Item 3</li>
  50              <li class="ui-state-default">Item 4</li>
  51              <li class="ui-state-default">Item 5</li>
  52          </ul>
  53      </div>
  54      <div id="tabs-2">
  55          <ul id="sortable2" class="connectedSortable ui-helper-reset">
  56              <li class="ui-state-highlight">Item 1</li>
  57              <li class="ui-state-highlight">Item 2</li>
  58              <li class="ui-state-highlight">Item 3</li>
  59              <li class="ui-state-highlight">Item 4</li>
  60              <li class="ui-state-highlight">Item 5</li>
  61          </ul>
  62      </div>
  63  </div>
  64  
  65  </div><!-- End demo -->
  66  
  67  <div class="demo-description">
  68  
  69  <p>
  70      Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.
  71  </p>
  72  
  73  </div><!-- End demo-description -->
  74  
  75  </body>
  76  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/jquery.ui/demos/sortable/ -> connect-lists-through-tabs.html (source)
