JavaScript Tutorial/jQuery/UI Slider
Содержание
- 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>