PHPXRef 0.7 : Drupal 6 (gatewave) : /sites/all/modules/jquery_ui/jquery.ui.old/demos/real-world/range-interface/index.html source

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4  <meta http-equiv="Content-Language" content="en" />
   5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6  <title>Slider Test Page</title>
   7  <script src="../../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
   8  <link rel="stylesheet" href="../../../themes/default/ui.all.css" type="text/css" charset="utf-8" />
   9  <script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
  10  <script src="../../../ui/ui.slider.js" type="text/javascript" charset="utf-8"></script>
  11  <script src="../../../ui/effects.core.js" type="text/javascript" charset="utf-8"></script>
  12  <script src="../../../ui/effects.blind.js" type="text/javascript" charset="utf-8"></script>
  13  <script src="../../../ui/effects.bounce.js" type="text/javascript" charset="utf-8"></script>
  14  <script src="../../../ui/effects.clip.js" type="text/javascript" charset="utf-8"></script>
  15  <script src="../../../ui/effects.drop.js" type="text/javascript" charset="utf-8"></script>
  16  <script src="../../../ui/effects.explode.js" type="text/javascript" charset="utf-8"></script>
  17  <script src="../../../ui/effects.fold.js" type="text/javascript" charset="utf-8"></script>
  18  <script src="../../../ui/effects.highlight.js" type="text/javascript" charset="utf-8"></script>
  19  <script src="../../../ui/effects.pulsate.js" type="text/javascript" charset="utf-8"></script>
  20  <script src="../../../ui/effects.scale.js" type="text/javascript" charset="utf-8"></script>
  21  <script src="../../../ui/effects.shake.js" type="text/javascript" charset="utf-8"></script>
  22  <script src="../../../ui/effects.slide.js" type="text/javascript" charset="utf-8"></script>
  23  <script src="../../../ui/effects.transfer.js" type="text/javascript" charset="utf-8"></script>
  24  
  25  <style type="text/css" media="all">
  26  #wrap {

  27      width: 900px;
  28      margin: 0 auto;
  29  }
  30  #col-1 {

  31      width: 220px;
  32      border: 1px solid #ccc;
  33      padding: 20px;
  34      float: left;
  35  }
  36  #col-2 {

  37      width: 500px;
  38      float: left;
  39  }
  40  #col-2 div {

  41      width: 100px;
  42      height: 100px;
  43      background: #ccc;
  44      border: 1px solid #000;
  45      margin: 20px;
  46      float: left;
  47      text-align: center;
  48      font-size: 150%;
  49  }
  50  .label-1 { position: absolute; left: 0; top: -1.1em; }
  51  .label-2 { position: absolute; right: 0; top: -1.1em; }
  52  </style>
  53  </head>
  54  <body>
  55  <div id="wrap">
  56      <h1>Slider Interface Example</h1>
  57      <div id="col-1">
  58          <div id="slider1" class="ui-slider-2">
  59              <div class="ui-slider-handle"></div>
  60              <div class="ui-slider-handle"></div>
  61              <span class="label-1">0</span>
  62              <span class="label-2">100</span>
  63          </div>
  64          <br />
  65          <select id="effects">
  66              <option>fade</option>
  67              <option>drop</option>
  68              <option>fold</option>
  69              <option>highlight</option>
  70              <option>explode</option>
  71              <option>slide</option>
  72              <option>clip</option>
  73              <option>shake</option>
  74              <option>scale</option>
  75              <option>pulsate</option>
  76              <option>bounce</option>
  77          </select>
  78      </div>
  79  
  80      <div id="col-2">
  81          <div>0</div>
  82          <div>10</div>
  83          <div>20</div>
  84          <div>30</div>
  85          <div>40</div>
  86          <div>50</div>
  87          <div>60</div>
  88          <div>70</div>
  89          <div>80</div>
  90          <div>90</div>
  91          <div>100</div>
  92      </div>
  93  </div>
  94  <script type="text/javascript">
  95  $(function(){
  96      $('#slider1').slider({
  97          stepping: 10,
  98          min: 0, 
  99          max: 100,
 100          range: true,
 101          change: function(event, ui) {
 102              var minValue = $('#slider1').slider('value', 0); 
 103              var maxValue = $('#slider1').slider('value', 1);
 104              $('#col-2 div').each(function(){
 105                  var value = parseInt($(this).html(), 10);
 106                  if (value < minValue || value > maxValue) {
 107                      var effect = $('#effects').val();
 108                      switch (effect) {
 109                          case 'fade' :
 110                              $(this).fadeOut();
 111                          break;
 112                          case 'drop' :
 113                              $(this).hide('drop', { direction: 'down' });
 114                          break;
 115                          default :
 116                              $(this).hide(effect);
 117                      }
 118                  } else
 119                      $(this).fadeIn();
 120              });
 121          },
 122          handles: [
 123              {start: 0, min: 0, max: 100},
 124              {start: 100, min: 0, max: 100}
 125          ]
 126      });
 127  });
 128  </script>
 129  </body>
 130  </html>
PHP Cross Reference of Drupal 6 (gatewave)

/sites/all/modules/jquery_ui/jquery.ui.old/demos/real-world/range-interface/ -> index.html (source)
