极客教程jQuery UI滑块
Jquery UI中的滑块功能可以用来选择数字数据作为用户的输入。滑块在网页上有很多应用，比如用它来控制音量，颜色选择器，控制各种图片的大小和分辨率等等。我们将在代码中使用CDN链接来添加不同的库和样式。为了像其他jQuery UI小部件一样显示这个滑块，我们必须链接到jQuery和jQuery UI。在你的HTML文件中复制这段代码，通过CDN（内容传递网络）将文件链接到jquery和jquery UI。这里我们使用了谷歌的CDN，但你也可以使用jquery或微软的CDN。
<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’rel=’stylesheet’>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
连接到jQuery UI后，我们现在可以在我们的网页上使用滑块功能。就像其他的jQuery代码一样，滑块功能也是写在HTML文档的脚本标签里面。
下面的例子将说明jQuery UI滑块的情况
示例:
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI| Slider</title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuery UI slide</h4>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
(document).ready(function() {
(function() {
("#my_slider").slider({
slide: function(event, ui) {
("#my_display").html(ui.value);
}
});
});
})
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</center>
</body>
</html>
输出:
管理滑块的不同属性：我们可以控制滑块的不同属性，如步长、方向、最小值、最大值。下面是一个例子，我们对这些属性进行了赋值。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
(document).ready(function() {
(function() {
("#my_slider").slider({
min: 0,
max: 100,
step: 2,
orientation: "vertical",
slide: function(event, ui) {
("#my_display").html(ui.value);
}
});
});
})
</script>
</center>
</body>
</html>
输出:
处理滑块的事件：这里有一个滑块的三个事件的例子，一个是滑块开始的时候，第二个是滑块移动的时候，第三个是滑块停止的时候。我们可以在我们的应用程序中的这些事件（函数）中使用我们需要的代码。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Handling events of Slider</title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<div id=my_display_event></div>
<br>
<br>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
(document).ready(function() {
(function() {
("#my_slider").slider({
slide: function(event, ui) {
("#my_display").html(ui.value);
("#my_display_event").html('Slider on move...');
},
start: function(event, ui) {
("#my_display_event").html('Slider Started...');
},
stop: function(event, ui) {
$("#my_display_event").html('Slider Stopped...');
}
});
});
})
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</center>
</body>
</html>
输出:
使用滑块选择一组数字：我们也可以通过使用滑块的起始值和使用另一个滑块的停止值选择一组数字。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Handling events of Slider</title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<div id=my_display_event></div>
<br>
<br>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
(document).ready(function() {
(function() {
("#my_slider").slider({
min: 0,
max: 100,
values: [10, 30],
range: true,
slide: function(event, ui) {
("#my_display_start").html("Start value:" + ui.values[0]),
$("#my_display_end").html("End value:" + ui.values[1]);
}
});
});
})
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</center>
</body>
</html>
输出:
启用/禁用滑块：我们可以通过在输入法中指定它来启用或禁用滑块。在下面的例子中，我们使用一对单选按钮来启用/禁用滑块。当点击各自的单选按钮时，值被收集起来（变量名称为my_val），相应地，滑块的状态被设置。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Enabling/Disabling a Slider</title>
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<input type=radio name=radio_1 value=enable checked>Enable
<input type=radio name=radio_1 value=disable>Disable
<br>
<div id="my_slider"></div>
<div id=my_display></div>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
(document).ready(function() {
(function() {
("#my_slider").slider({
slide: function(event, ui) {
("#my_display").html(ui.value);
}
});
});
///Reading radio button values using change event//
("input[type='radio']").change(function() {
my_val =("input[name=radio_1]:checked").val()
$("#my_slider").slider(my_val);
})
})
</script>
</center>
</body>
</html>
输出
