| New file |
|---|
| 0,0 → 1,77 |
|---|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>jQuery UI Slider - Multiple sliders</title> |
| <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
| <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
| <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
| <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
| <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> |
| <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> |
| <link type="text/css" href="../demos.css" rel="stylesheet" /> |
| <style type="text/css"> |
| #demo-frame > div.demo { padding: 10px !important; } |
| #eq span { |
| height:120px; float:left; margin:15px |
| } |
| </style> |
| <script type="text/javascript"> |
| $(function() { |
| // setup master volume |
| $("#master").slider({ |
| value: 60, |
| orientation: "horizontal", |
| range: "min", |
| animate: true |
| }); |
| // setup graphic EQ |
| $("#eq > span").each(function() { |
| // read initial values from markup and remove that |
| var value = parseInt($(this).text()); |
| $(this).empty().slider({ |
| value: value, |
| range: "min", |
| animate: true, |
| orientation: "vertical" |
| }); |
| }); |
| }); |
| </script> |
| </head> |
| <body class="ui-widget-content" style="border:0;"> |
| |
| <div class="demo"> |
| |
| <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> |
| <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> |
| Master volume |
| </p> |
| |
| <div id="master" style="width:260px; margin:15px;"></div> |
| |
| <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> |
| <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> |
| Graphic EQ |
| </p> |
| |
| <div id="eq"> |
| <span>88</span> |
| <span>77</span> |
| <span>55</span> |
| <span>33</span> |
| <span>40</span> |
| <span>45</span> |
| <span>70</span> |
| </div> |
| |
| </div><!-- End demo --> |
| |
| <div class="demo-description" style="clear:left;"> |
| |
| <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> |
| |
| </div><!-- End demo-description --> |
| |
| </body> |
| </html> |