PHPXRef 0.7 : Drupal 6 (gatewave) : /sites/all/modules/jquery_ui/jquery.ui/demos/slider/multiple-vertical.html source

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Slider - Multiple sliders</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          #eq span {

  13              height:120px; float:left; margin:15px
  14          }
  15      </style>
  16      <script type="text/javascript">
  17      $(function() {
  18          // change defaults for range, animate and orientation

  19          $.extend($.ui.slider.defaults, {
  20              range: "min",
  21              animate: true,
  22              orientation: "vertical"
  23          });
  24          // setup master volume

  25          $("#master").slider({
  26              value: 60,
  27              orientation: "horizontal"
  28          });
  29          // setup graphic EQ

  30          $("#eq > span").each(function() {
  31              // read initial values from markup and remove that

  32              var value = parseInt($(this).text());
  33              $(this).empty();
  34              $(this).slider({
  35                  value: value
  36              })
  37          });
  38      });
  39      </script>
  40  </head>
  41  <body class="ui-widget-content" style="border:0;">
  42  
  43  <div class="demo">
  44  
  45  <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  46  <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
  47  Master volume
  48  </p>
  49  
  50  <div id="master" style="width:260px; margin:15px;"></div>
  51  
  52  <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
  53  <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
  54  Graphic EQ
  55  </p>
  56  
  57  <div id="eq">
  58      <span>88</span>
  59      <span>77</span>
  60      <span>55</span>
  61      <span>33</span>
  62      <span>40</span>
  63      <span>45</span>
  64      <span>70</span>
  65  </div>
  66  
  67  </div><!-- End demo -->
  68  
  69  <div class="demo-description" style="clear:left;">
  70  
  71  <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
  72  
  73  </div><!-- End demo-description -->
  74  
  75  </body>
  76  </html>
PHP Cross Reference of Drupal 6 (gatewave)

/sites/all/modules/jquery_ui/jquery.ui/demos/slider/ -> multiple-vertical.html (source)
