| [ Index ] |
PHP Cross Reference of Drupal 6 (yi-drupal) |
[Summary view] [Print] [Text view]
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>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Mon Jul 9 18:01:44 2012 | Cross-referenced by PHPXref 0.7 |