[ Index ]

PHP Cross Reference of Drupal 6 (yi-drupal)

title

Body

[close]

/sites/all/libraries/jquery.ui/demos/selectable/ -> serialize.html (source)

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Selectable - Serialize</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.selectable.js"></script>
   9      <link type="text/css" href="../demos.css" rel="stylesheet" />
  10      
  11      <style type="text/css">
  12      #feedback { font-size: 1.4em; }

  13      #selectable .ui-selecting { background: #FECA40; }

  14      #selectable .ui-selected { background: #F39814; color: white; }

  15      #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

  16      #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

  17      </style>
  18      <script type="text/javascript">
  19      $(function() {
  20          $("#selectable").selectable({
  21              stop: function(){
  22                  var result = $("#select-result").empty();
  23                  $(".ui-selected", this).each(function(){
  24                      var index = $("#selectable li").index(this);
  25                      result.append(" #" + (index + 1));
  26                  });
  27              }
  28          });
  29      });
  30      </script>
  31  </head>
  32  <body>
  33  <div class="demo">
  34  
  35  <p id="feedback">
  36  You've selected: <span id="select-result">none</span>.
  37  </p>
  38  
  39  <ol id="selectable">
  40      <li class="ui-widget-content">Item 1</li>
  41      <li class="ui-widget-content">Item 2</li>
  42      <li class="ui-widget-content">Item 3</li>
  43      <li class="ui-widget-content">Item 4</li>
  44      <li class="ui-widget-content">Item 5</li>
  45      <li class="ui-widget-content">Item 6</li>
  46  </ol>
  47  
  48  </div><!-- End demo -->
  49  
  50  <div class="demo-description">
  51  
  52  <p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items.  Present values as feedback, or pass as a data string.</p>
  53  
  54  </div><!-- End demo-description -->
  55  </body>
  56  </html>


Generated: Mon Jul 9 18:01:44 2012 Cross-referenced by PHPXref 0.7