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> |