JavaScript Tutorial/jQuery/UI Slider — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
- 1 30. jQuery UI Slider - Colorpicker
- 2 30. jQuery UI Slider - Default functionality
- 3 30. jQuery UI Slider - Multiple sliders
- 4 30. jQuery UI Slider - Range slider
- 5 30. jQuery UI Slider - Range with fixed maximum
- 6 30. jQuery UI Slider - Range with fixed minimum
- 7 30. jQuery UI Slider - Snap to increments
- 8 30. jQuery UI Slider - Vertical range slider
- 9 30. jQuery UI Slider - Vertical slider
- 10 30. Set step value for slider
- 11 30. Set the max value for slider
- 12 30. Slider events: change, slide, start, stop
- 13 30. Three sliders share one event handler
30. jQuery UI Slider - Colorpicker
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Colorpicker</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> function hexFromRGB (r, g, b) { var hex = [ r.toString(16), g.toString(16), b.toString(16) ]; $.each(hex, function (nr, val) { if (val.length == 1) { hex[nr] = "0" + val; } }); return hex.join("").toUpperCase(); } function refreshSwatch() { var red = $("#red").slider("value") ,green = $("#green").slider("value") ,blue = $("#blue").slider("value") ,hex = hexFromRGB(red, green, blue); $("#swatch").css("background-color", "#" + hex); } $(function() { $("#red, #green, #blue").slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $("#red").slider("value", 255); $("#green").slider("value", 140); $("#blue").slider("value", 60); }); </script>
</head> <body class="ui-widget-content" style="border:0;">
Simple Colorpicker
Combine three sliders to create a simple RGB colorpicker.
</body> </html></source>
30. jQuery UI Slider - Default functionality
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Default functionality</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider").slider(); }); </script>
</head> <body>
The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.
</body> </html></source>
30. jQuery UI Slider - Multiple sliders
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Multiple sliders</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/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() { // change defaults for range, animate and orientation $.extend($.ui.slider.defaults, { range: "min", animate: true, orientation: "vertical" }); // setup master volume $("#master").slider({ value: 60, orientation: "horizontal" }); // setup graphic EQ $("#eq > span").each(function() { // read initial values from markup and remove that var value = parseInt($(this).text()); $(this).empty(); $(this).slider({ value: value }) }); }); </script>
</head> <body class="ui-widget-content" style="border:0;">
Master volume
Graphic EQ
88 77 55 33 40 45 70
Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.
</body> </html></source>
30. jQuery UI Slider - Range slider
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Range slider</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider-range").slider({ range: true, min: 0, max: 500, values: [75, 300], slide: function(event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1)); }); </script>
</head> <body>
<label for="amount">Price range:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
Set the range
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.
</body> </html></source>
30. jQuery UI Slider - Range with fixed maximum
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Range with fixed maximum</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider-range-max").slider({ range: "max", min: 1, max: 10, value: 2, slide: function(event, ui) { $("#amount").val(ui.value); } }); $("#amount").val($("#slider-range-max").slider("value")); }); </script>
</head> <body>
<labe for="amount">Minimum number of bedrooms:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
Fix the maximum value of the range slider so that the user can only select a minimum. Set the range
option to "max."
</body> </html></source>
30. jQuery UI Slider - Range with fixed minimum
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Range with fixed minimum</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider-range-min").slider({ range: "min", value: 37, min: 1, max: 700, slide: function(event, ui) { $("#amount").val("$" + ui.value); } }); $("#amount").val("$" + $("#slider-range-min").slider("value")); }); </script>
</head> <body>
<label for="amount">Maximum price:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
Fix the minimum value of the range slider so that the user can only select a maximum. Set the range
option to "min."
</body> </html></source>
30. jQuery UI Slider - Snap to increments
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Snap to increments</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider").slider({ value:100, min: 0, max: 500, step: 50, slide: function(event, ui) { $("#amount").val("$" + ui.value); } }); $("#amount").val("$" + $("#slider").slider("value")); }); </script>
</head> <body>
<label for="amount">Donation amount ($50 increments):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
Increment slider values with the step
option set to an integer, commonly a dividend of the slider"s maximum value. The default increment is 1.
</body> </html></source>
30. jQuery UI Slider - Vertical range slider
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Vertical range slider</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider-range").slider({ orientation: "vertical", range: true, values: [17, 67], slide: function(event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1)); }); </script>
</head> <body>
<label for="amount">Target sales goal (Millions):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
Change the orientation of the range slider to vertical. Assign a height value via .height()
or by setting the height through CSS, and set the orientation
option to "vertical."
</body> </html></source>
30. jQuery UI Slider - Vertical slider
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Slider - Vertical slider</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> $(function() { $("#slider-vertical").slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, slide: function(event, ui) { $("#amount").val(ui.value); } }); $("#amount").val($("#slider-vertical").slider("value")); }); </script>
</head> <body>
<label for="amount">Volume:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
Change the orientation of the slider to vertical. Assign a height value via .height()
or by setting the height through CSS, and set the orientation
option to "vertical."
</body> </html></source>
30. Set step value for slider
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var sliderOpts = { steps: 10 }; $("#mySlider").slider(sliderOpts); }); </script>
</head> <body>
</body> </html></source>
30. Set the max value for slider
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var sliderOpts = { max: 255, steps: 255, slide: function(e, ui) { var val = $(this).slider("value"); var id = $(this).attr("id"); $("#output").text(val); } }; $("#rSlider").slider(sliderOpts); }); </script>
</head> <body>
</body> </html></source>
30. Slider events: change, slide, start, stop
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { //create config object var sliderOpts = { change: function() { $("#messageBox").text("The slider"s value has changed"); }, slide: function() { $("#messageBox").text("The slider is sliding"); }, start: function() { $("#messageBox").text("The slider has started"); }, stop: function() { $("#messageBox").text("The slider has stopped"); } }; $("#mySlider").slider(sliderOpts); }); </script>
</head> <body>
</body> </html></source>
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.slider.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var r = 0; var g = 0; var b = 0; var sliderOpts = { max: 255, steps: 255, slide: function(e, ui) { var val = $(this).slider("value"); var id = $(this).attr("id"); if (id == "rSlider") { r = val; } else if (id == "gSlider") { g = val; } else { b = val; } var rgbString = r + "/" + g + "/" + b; $("#output").text(rgbString); } }; $("#rSlider, #gSlider, #bSlider").slider(sliderOpts); }); </script>
</head> <body>
</body>
</html></source>