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>

输出:

jQuery UI Slider option()方法

示例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>

输出:

jQuery UI Slider option()方法

例子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>

输出:

jQuery UI Slider option()方法

例子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>

输出:

jQuery UI Slider option()方法