极客教程jQuery UI Slider option()方法
jQuery UI由GUI部件、视觉效果和主题组成，使用HTML、CSS和jQuery实现。它通过滑块小部件为我们提供了一个滑块控制。滑块可以帮助我们使用一个给定的范围来获得一个特定的值。在这篇文章中，我们将看到如何在jQuery UI滑块中使用option()方法。option()方法是用来获取一个特定的当前滑块选项的对象。
语法:
option(optionName) 方法
$( ".selector" ).slider( "option", "disabled" );
或者
option() 方法
$( ".selector" ).slider("option");
或者
option(optionName, value) 方法
$( ".selector" ).slider( "option", "disabled", true );
或者
option(options) 方法
$( ".selector" ).slider( "option", { disabled: true } );
方法：首先，添加你的项目所需的jQuery UI脚本。
<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
例子1：这个例子描述了option()方法的实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
(function() {
("#gfg").slider();
var a = $("#gfg").slider("option");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option() method</h2>
<div id="gfg"></div>
</body>
</html>
输出:
示例2：本示例描述了option(optionName, value)方法的实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
(function() {
("#gfg").slider();
$("#gfg").slider("option", "disabled", true);
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(optionName, value) Method</h2>
<div id="gfg"></div>
</body>
</html>
输出:
例子3：这个例子描述了option(选项)方法的实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
(function() {
("#gfg").slider();
$("#gfg").slider("option", {
disabled: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(options) Method</h2>
<div id="gfg"></div>
</body>
</html>
输出:
例子4：这个例子描述了option(optionName)方法的实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
(function() {
("#gfg").slider();
var a = $("#gfg").slider("option", "disabled");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(optionName) Method</h2>
<div id="gfg"></div>
</body>
</html>
输出:
