library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

slightly reorganized/renamed demos to better reflect functionality

Browse Source
This commit is contained in:
Maggie Costello Wachs 2009-01-20 21:10:12 +00:00
parent 565808ceae
commit 88d8063be4
11 changed files with 26 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demos/slider/colorpicker.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Colorpicker Demo</title>
<title>jQuery UI Slider - Colorpicker</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -83,9 +83,7 @@ Simple Colorpicker
<div class="demo-description" style="clear:left;">
<p>
This example shows how easy it is to put together three sliders to make a simple RGB colorpicker.
</p>
<p>Combine three sliders to create a simple RGB colorpicker.</p>
</div><!-- End demo-description -->

6
demos/slider/default.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Default Demo</title>
<title>jQuery UI Slider - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -26,9 +26,7 @@
<div class="demo-description">
<p>
The default slider has a single handle and is horizontal. The handle can be moved with the mouse or by using the arrow keys.
</p>
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->

12
demos/slider/index.html
View File

@ -9,14 +9,14 @@
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default Slider</a></li>
<li><a href="steps.html">Snap to every 50 steps</a></li>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="steps.html">Snap to increments</a></li>
<li><a href="range.html">Range slider</a></li>
<li><a href="rangemin.html">Range with fixed min</a></li>
<li><a href="rangemax.html">Range with fixed max</a></li>
<li><a href="slider_vertical.html">Vertical single slider</a></li>
<li><a href="rangemin.html">Range with fixed minimum</a></li>
<li><a href="rangemax.html">Range with fixed maximum</a></li>
<li><a href="slider_vertical.html">Vertical slider</a></li>
<li><a href="range_vertical.html">Vertical range slider</a></li>
<li><a href="multiple_vertical.html">Multiple vertical sliders</a></li>
<li><a href="multiple_vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
<li><a href="side_scroll.html">Simple scrollbar</a></li>
</ul>

6
demos/slider/multiple_vertical.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Multiple Vertical Sliders Demo</title>
<title>jQuery UI Slider - Multiple sliders</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -82,9 +82,7 @@ Graphic EQ
<div class="demo-description" style="clear:left;">
<p>
This example shows how easy it is to add multiple sliders to a page, each with their own options, to make a UI for a music player.
</p>
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
</div><!-- End demo-description -->

10
demos/slider/range.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Range Demo</title>
<title>jQuery UI Slider - Range slider</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -40,13 +40,7 @@
<div class="demo-description">
<p>
Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected.
This is created by setting the range option:
</p>
<pre><code>range: true
</code></pre>
<p>Set the <strong>range</strong> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->

20
demos/slider/range_vertical.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Vertical Range Demo</title>
<title>jQuery UI Slider - Vertical range slider</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -39,23 +39,7 @@
<div class="demo-description">
<p>
This is an example of a vertical range slider created by setting the orientation to vertical:
</p>
<pre><code>orientation: "vertical",
range: true,
values: [17, 67]
</code></pre>
<p>
It's important to note that a vertical slider needs a height set.
You can do this via <code>.height()</code> or by setting the height through CSS.
</p>
<p>
This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
</p>
<p>Change the orientation of the range slider to vertical. Assign a height value via <strong>.height()</strong> or by setting the height through CSS, and set the <strong>orientation</strong> option to "vertical."</p>
</div><!-- End demo-description -->

15
demos/slider/rangemax.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Range Max Demo</title>
<title>jQuery UI Slider - Range with fixed maximum</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -39,18 +39,7 @@
<div class="demo-description">
<p>
An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider.
This makes it clear that selecting a value will also include all values above the selection.
This is a range option type:
</p>
<pre><code>range: "max"
</code></pre>
<p>
This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
</p>
<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <strong>range</strong> option to "max."</p>
</div><!-- End demo-description -->

15
demos/slider/rangemin.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<title>jQuery UI Slider - Range with fixed minimum</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -40,18 +40,7 @@
<div class="demo-description">
<p>
An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider.
This makes it clear that selecting a value will also include all values below the selection.
This is a range option type:
</p>
<pre><code>range: "min"
</code></pre>
<p>
This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
</p>
<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <strong>range</strong> option to "min."</p>
</div><!-- End demo-description -->

6
demos/slider/side_scroll.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Default Demo</title>
<title>jQuery UI Slider - Slider scrollbar</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -126,9 +126,7 @@
<div class="demo-description">
<p>
Example of how a slider can be used to manipulate the positioning of content on the page. In this case, it acts as a scrollbar.
</p>
<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
</div><!-- End demo-description -->

18
demos/slider/slider_vertical.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Vertical Single Slider Demo</title>
<title>jQuery UI Slider - Vertical slider</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -41,21 +41,7 @@
<div class="demo-description">
<p>
This is an example of a minimum range vertical slider created by setting the orientation to vertical:
</p>
<pre><code>orientation: "vertical"
</code></pre>
<p>
It's important to note that a vertical slider needs a height set.
You can do this via <code>.height()</code> or by setting the height through CSS.
</p>
<p>
This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
</p>
<p>Change the orientation of the slider to vertical. Assign a height value via <strong>.height()</strong> or by setting the height through CSS, and set the <strong>orientation</strong> option to "vertical."</p>
</div><!-- End demo-description -->

18
demos/slider/steps.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Steps Demo</title>
<title>jQuery UI Slider - Snap to increments</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@ -40,21 +40,7 @@
<div class="demo-description">
<p>
This slider has a step value set that will only allow for increments of 50 to be selected.
The default step increment is 1.
The drag handle will snap to drop points every 50 units.
This is set in an option called step:
</p>
<pre><code>min: 0,
max: 500,
step: 50
</code></pre>
<p>
This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
</p>
<p>Increment slider values with the <strong>step</strong> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p>
</div><!-- End demo-description -->