极客教程jQuery UI Spinner option()方法
jQuery UI由GUI部件、视觉效果和使用jQuery、CSS和HTML实现的主题组成。jQuery UI对于构建网页的UI界面非常有用。jQuery UI spinner部件帮助我们使用上下箭头来增加和减少输入元素的值。在这篇文章中，我们将看到如何在jQuery UI滑块中使用option()方法。option()方法是用来获取jQuery UI spinner中特定的当前滑块选项的一个对象。
语法:
var a = $(".selector").spinner("option");
var a = $(".selector").spinner("optionName","value");
var a = $(".selector").spinner("options");
步骤:
- 首先，添加你的项目所需的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：下面的代码演示了.spinner(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>
<style type = "text/css">
#gfg input {width: 100px}
</style>
<script>
(function() {
("#gfg").spinner();
('button').button();
var a =("#gfg").spinner("option");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner option method</h2>
<input id = "gfg" />
</body>
</html>
输出:
Console 输出:
示例2：下面的代码演示了.spinner(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>
<style type = "text/css">
#gfg input {width: 100px}
</style>
<script>
(function() {
("#gfg").spinner();
('button').button();
var a =("#gfg").spinner("option","disabled",true);
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner option method</h2>
<input id = "gfg" />
</body>
</html>
输出:
- 当disabled选项为false时，它的输出结果如下。
- 当disabled选项为true时，它的输出结果如下。
示例3：下面的代码演示了.spinner(options)方法。下面的代码有2个选项，如{ disabled: false,step: 2 }.
<!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>
<style type = "text/css">
#gfg input {width: 100px}
</style>
<script>
(function() {
("#gfg").spinner();
('button').button();
var a =("#gfg").spinner( "option", { disabled: false,step: 2 } );
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner option method</h2>
<input id = "gfg" />
</body>
</html>
输出:
