diff options
| author | Todd Parker <fg.todd@gmail.com> | 2008-12-29 21:51:34 +0000 |
|---|---|---|
| committer | Todd Parker <fg.todd@gmail.com> | 2008-12-29 21:51:34 +0000 |
| commit | b5759168f0308e586513825a1ee9a7b8194cc527 (patch) | |
| tree | a47103790358cb865461137e1e2c3120c7bed2c9 /demos/slider | |
| parent | 229bebf466e31a817b5681850afc36dd36ef896d (diff) | |
| download | jquery-ui-b5759168f0308e586513825a1ee9a7b8194cc527.tar.gz jquery-ui-b5759168f0308e586513825a1ee9a7b8194cc527.zip | |
Added 4 new slider demos, edited index page and existing demos
Diffstat (limited to 'demos/slider')
| -rw-r--r-- | demos/slider/index.html | 12 | ||||
| -rw-r--r-- | demos/slider/multiple_vertical.html | 70 | ||||
| -rw-r--r-- | demos/slider/range_vertical.html | 25 | ||||
| -rw-r--r-- | demos/slider/slider_vertical.html | 24 | ||||
| -rw-r--r-- | demos/slider/steps.html | 23 |
5 files changed, 150 insertions, 4 deletions
diff --git a/demos/slider/index.html b/demos/slider/index.html index 0a9dac4eb..c0fbbbfe1 100644 --- a/demos/slider/index.html +++ b/demos/slider/index.html @@ -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>
diff --git a/demos/slider/multiple_vertical.html b/demos/slider/multiple_vertical.html new file mode 100644 index 000000000..79544596a --- /dev/null +++ b/demos/slider/multiple_vertical.html @@ -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>
diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html new file mode 100644 index 000000000..f7c09c072 --- /dev/null +++ b/demos/slider/range_vertical.html @@ -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>
diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html new file mode 100644 index 000000000..67aa2667d --- /dev/null +++ b/demos/slider/slider_vertical.html @@ -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>
diff --git a/demos/slider/steps.html b/demos/slider/steps.html new file mode 100644 index 000000000..ed3601087 --- /dev/null +++ b/demos/slider/steps.html @@ -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>
|