library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added 4 new slider demos, edited index page and existing demos

Browse Source
This commit is contained in:
Todd Parker 2008-12-29 21:51:34 +00:00
parent 229bebf466
commit b5759168f0
5 changed files with 150 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
demos/slider/index.html
View File

@ -8,10 +8,14 @@
<dl class="nav">
<dt>Slider</dt>
<dd><a href="default.html">Default</a></dd>
<dd><a href="range.html">Range</a></dd>
<dd><a href="rangemin.html">Range Min</a></dd>
<dd><a href="rangemax.html">Range Max</a></dd>
<dd><a href="default.html">Default single slider</a></dd>
<dd><a href="steps.html">Snap to every 50 steps</a></dd>
<dd><a href="range.html">Range slider</a></dd>
<dd><a href="rangemin.html">Range with fixed min</a></dd>
<dd><a href="rangemax.html">Range with fixed max</a></dd>
<dd><a href="slider_vertical.html">Vertical single slider</a></dd>
<dd><a href="range_vertical.html">Vertical range slider</a></dd>
<dd><a href="multiple_vertical.html">Multiple vertical sliders</a></dd>
</dl>
</body>

70
demos/slider/multiple_vertical.html Normal file
View File

@ -0,0 +1,70 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$("#slider0").slider({
range: "min",
value: 60
});
$("#slider1").slider({
orientation: "vertical",
range: "min",
value: 88
});
$("#slider2").slider({
orientation: "vertical",
range: "min",
value: 77
});
$("#slider3").slider({
orientation: "vertical",
range: "min",
value: 55
});
$("#slider4").slider({
orientation: "vertical",
range: "min",
value: 33
});
$("#slider5").slider({
orientation: "vertical",
range: "min",
value: 40
});
$("#slider6").slider({
orientation: "vertical",
range: "min",
value: 45
});
$("#slider7").slider({
orientation: "vertical",
range: "min",
value: 70
});
});
</script>
</head>
<body>
Master volume:
<div id="slider0" style="width:260px; margin:15px; clear:both;"></div>
<br/><br/>
Graphic EQ:
<div id="slider1" style="height:120px; float:left; margin:15px"></div>
<div id="slider2" style="height:120px; float:left; margin:15px"></div>
<div id="slider3" style="height:120px; float:left; margin:15px"></div>
<div id="slider4" style="height:120px; float:left; margin:15px"></div>
<div id="slider5" style="height:120px; float:left; margin:15px"></div>
<div id="slider6" style="height:120px; float:left; margin:15px"></div>
<div id="slider7" style="height:120px; float:left; margin:15px"></div>
</body>
</html>

25
demos/slider/range_vertical.html Normal file
View File

@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$("#slider-range").slider({
orientation: "vertical",
range: true,
values: [17, 67]
});
});
</script>
</head>
<body>
<div id="slider-range" style="height:300px;"></div>
</body>
</html>

24
demos/slider/slider_vertical.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$("#slider-vertical").slider({
orientation: "vertical",
min: 0, max: 500, value: 140
});
});
</script>
</head>
<body>
<div id="slider-vertical" style="height:300px;"></div>
</body>
</html>

23
demos/slider/steps.html Normal file
View File

@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider({
min: 0, max: 500, step: 50
});
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>