http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FUI_Slider
JavaScript Tutorial/jQuery/UI Slider - История изменений
2026-04-04T11:49:55Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Slider&diff=9775&oldid=prev
Admin: 1 версия
2010-05-26T08:25:24Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Slider&diff=9774&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:57Z
<p></p>
<p><b>Новая страница</b></p><div>==30. jQuery UI Slider - Colorpicker==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Colorpicker</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#red, #green, #blue {<br />
float: left;<br />
clear: left;<br />
width: 300px;<br />
margin: 15px;<br />
}<br />
#swatch {<br />
width: 120px;<br />
height: 100px;<br />
margin-top: 18px;<br />
margin-left: 350px;<br />
background-image: none;<br />
}<br />
#red .ui-slider-range { background: #ef2929; }<br />
#red .ui-slider-handle { border-color: #ef2929; }<br />
#green .ui-slider-range { background: #8ae234; }<br />
#green .ui-slider-handle { border-color: #8ae234; }<br />
#blue .ui-slider-range { background: #729fcf; }<br />
#blue .ui-slider-handle { border-color: #729fcf; }<br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
function hexFromRGB (r, g, b) {<br />
var hex = [<br />
r.toString(16),<br />
g.toString(16),<br />
b.toString(16)<br />
];<br />
$.each(hex, function (nr, val) {<br />
if (val.length == 1) {<br />
hex[nr] = "0" + val;<br />
}<br />
});<br />
return hex.join("").toUpperCase();<br />
}<br />
function refreshSwatch() {<br />
var red = $("#red").slider("value")<br />
,green = $("#green").slider("value")<br />
,blue = $("#blue").slider("value")<br />
,hex = hexFromRGB(red, green, blue);<br />
$("#swatch").css("background-color", "#" + hex);<br />
}<br />
$(function() {<br />
$("#red, #green, #blue").slider({<br />
orientation: "horizontal",<br />
range: "min",<br />
max: 255,<br />
value: 127,<br />
slide: refreshSwatch,<br />
change: refreshSwatch<br />
});<br />
$("#red").slider("value", 255);<br />
$("#green").slider("value", 140);<br />
$("#blue").slider("value", 60);<br />
});<br />
</script><br />
</head><br />
<body class="ui-widget-content" style="border:0;"><br />
<div class="demo"><br />
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"><br />
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span><br />
Simple Colorpicker<br />
</p><br />
<div id="red"></div><br />
<div id="green"></div><br />
<div id="blue"></div><br />
<div id="swatch" class="ui-widget-content ui-corner-all"></div><br />
</div><!-- End demo --><br />
<div class="demo-description" style="clear:left;"><br />
<p>Combine three sliders to create a simple RGB colorpicker.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Default functionality==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Default functionality</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider").slider();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<div id="slider"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<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><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Multiple sliders==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Multiple sliders</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; }<br />
#eq span {<br />
height:120px; float:left; margin:15px<br />
}<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
// change defaults for range, animate and orientation<br />
$.extend($.ui.slider.defaults, {<br />
range: "min",<br />
animate: true,<br />
orientation: "vertical"<br />
});<br />
// setup master volume<br />
$("#master").slider({<br />
value: 60,<br />
orientation: "horizontal"<br />
});<br />
// setup graphic EQ<br />
$("#eq > span").each(function() {<br />
// read initial values from markup and remove that<br />
var value = parseInt($(this).text());<br />
$(this).empty();<br />
$(this).slider({<br />
value: value<br />
})<br />
});<br />
});<br />
</script><br />
</head><br />
<body class="ui-widget-content" style="border:0;"><br />
<div class="demo"><br />
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"><br />
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span><br />
Master volume<br />
</p><br />
<div id="master" style="width:260px; margin:15px;"></div><br />
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"><br />
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span><br />
Graphic EQ<br />
</p><br />
<div id="eq"><br />
<span>88</span><br />
<span>77</span><br />
<span>55</span><br />
<span>33</span><br />
<span>40</span><br />
<span>45</span><br />
<span>70</span><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description" style="clear:left;"><br />
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Range slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Range slider</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider-range").slider({<br />
range: true,<br />
min: 0,<br />
max: 500,<br />
values: [75, 300],<br />
slide: function(event, ui) {<br />
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);<br />
}<br />
});<br />
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p><br />
<label for="amount">Price range:</label><br />
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br />
</p><br />
<div id="slider-range"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Set the <code>range</code> 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><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Range with fixed maximum==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Range with fixed maximum</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider-range-max").slider({<br />
range: "max",<br />
min: 1,<br />
max: 10,<br />
value: 2,<br />
slide: function(event, ui) {<br />
$("#amount").val(ui.value);<br />
}<br />
});<br />
$("#amount").val($("#slider-range-max").slider("value"));<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p><br />
<labe for="amount">Minimum number of bedrooms:</label><br />
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br />
</p><br />
<div id="slider-range-max"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Range with fixed minimum==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Range with fixed minimum</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider-range-min").slider({<br />
range: "min",<br />
value: 37,<br />
min: 1,<br />
max: 700,<br />
slide: function(event, ui) {<br />
$("#amount").val("$" + ui.value);<br />
}<br />
});<br />
$("#amount").val("$" + $("#slider-range-min").slider("value"));<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p><br />
<label for="amount">Maximum price:</label><br />
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br />
</p><br />
<div id="slider-range-min"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Snap to increments==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Snap to increments</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider").slider({<br />
value:100,<br />
min: 0,<br />
max: 500,<br />
step: 50,<br />
slide: function(event, ui) {<br />
$("#amount").val("$" + ui.value);<br />
}<br />
});<br />
$("#amount").val("$" + $("#slider").slider("value"));<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p><br />
<label for="amount">Donation amount ($50 increments):</label><br />
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br />
</p><br />
<div id="slider"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider"s maximum value. The default increment is 1.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Vertical range slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Vertical range slider</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider-range").slider({<br />
orientation: "vertical",<br />
range: true,<br />
values: [17, 67],<br />
slide: function(event, ui) {<br />
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);<br />
}<br />
});<br />
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p><br />
<label for="amount">Target sales goal (Millions):</label><br />
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br />
</p><br />
<div id="slider-range" style="height:250px;"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Slider - Vertical slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Slider - Vertical slider</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#demo-frame > div.demo { padding: 10px !important; };<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#slider-vertical").slider({<br />
orientation: "vertical",<br />
range: "min",<br />
min: 0,<br />
max: 100,<br />
value: 60,<br />
slide: function(event, ui) {<br />
$("#amount").val(ui.value);<br />
}<br />
});<br />
$("#amount").val($("#slider-vertical").slider("value"));<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p><br />
<label for="amount">Volume:</label><br />
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br />
</p><br />
<div id="slider-vertical" style="height:200px;"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Set step value for slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var sliderOpts = {<br />
steps: 10<br />
};<br />
<br />
$("#mySlider").slider(sliderOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="mySlider"></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Set the max value for slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var sliderOpts = {<br />
max: 255,<br />
steps: 255,<br />
slide: function(e, ui) {<br />
var val = $(this).slider("value");<br />
var id = $(this).attr("id");<br />
$("#output").text(val);<br />
} <br />
};<br />
$("#rSlider").slider(sliderOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="rSlider"></div><br><br />
<div id="output"><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Slider events: change, slide, start, stop==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
//create config object<br />
var sliderOpts = {<br />
change: function() {<br />
$("#messageBox").text("The slider"s value has changed");<br />
},<br />
slide: function() {<br />
$("#messageBox").text("The slider is sliding");<br />
},<br />
start: function() {<br />
$("#messageBox").text("The slider has started");<br />
},<br />
stop: function() {<br />
$("#messageBox").text("The slider has stopped");<br />
} <br />
};<br />
$("#mySlider").slider(sliderOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="mySlider"></div><br />
<div id="messageBox"></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Three sliders share one event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.slider.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var r = 0;<br />
var g = 0;<br />
var b = 0;<br />
var sliderOpts = {<br />
max: 255,<br />
steps: 255,<br />
slide: function(e, ui) {<br />
var val = $(this).slider("value");<br />
var id = $(this).attr("id");<br />
<br />
if (id == "rSlider") {<br />
r = val;<br />
} else if (id == "gSlider") {<br />
g = val;<br />
} else {<br />
b = val;<br />
}<br />
var rgbString = r + "/" + g + "/" + b;<br />
$("#output").text(rgbString);<br />
} <br />
};<br />
$("#rSlider, #gSlider, #bSlider").slider(sliderOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="rSlider"></div><br><br />
<div id="gSlider"></div><br><br />
<div id="bSlider"></div><br />
<div id="output"><br />
</div><br />
</body><br />
</html></source></div>