[ Index ]

PHP Cross Reference of Drupal 6 (yi-drupal)

title

Body

[close]

/sites/all/libraries/jquery.ui/demos/slider/ -> slider-vertical.html (source)

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Slider - Vertical slider</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.slider.js"></script>
   9      <link type="text/css" href="../demos.css" rel="stylesheet" />
  10      <style type="text/css">
  11          #demo-frame > div.demo { padding: 10px !important; };

  12      </style>
  13      <script type="text/javascript">
  14      $(function() {
  15          $("#slider-vertical").slider({
  16              orientation: "vertical",
  17              range: "min",
  18              min: 0,
  19              max: 100,
  20              value: 60,
  21              slide: function(event, ui) {
  22                  $("#amount").val(ui.value);
  23              }
  24          });
  25          $("#amount").val($("#slider-vertical").slider("value"));
  26      });
  27      </script>
  28  </head>
  29  <body>
  30  
  31  <div class="demo">
  32  
  33  <p>
  34  <label for="amount">Volume:</label>
  35  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  36  </p>
  37  
  38  <div id="slider-vertical" style="height:200px;"></div>
  39  
  40  </div><!-- End demo -->
  41  
  42  <div class="demo-description">
  43  
  44  <p>Change the orientation of the slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
  45  
  46  </div><!-- End demo-description -->
  47  
  48  </body>
  49  </html>


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