jQuery UI Slider enable() 方法(1)

📌 相关文章

📜 jQuery UI Slider enable() 方法(1)

📅 最后修改于: 2023-12-03 14:43:12.247000 🧑 作者: Mango

jQuery UI Slider enable() 方法

enable() 方法是 jQuery UI Slider 插件的一种方法，该方法用于启用（或禁用）滑块。

语法

$( ".selector" ).slider("enable");

描述

enable() 方法用于启用已经被禁用的 jQuery UI Slider。当调用该方法时，被选元素将变为可用状态。如果被选元素原本就处于可用状态，则不会发生任何事情。如果你想禁用一个元素，请使用 disable() 方法。

返回值

该方法没有返回值。

示例

以下示例演示了如何使用 enable() 方法启用已经被禁用的 jQuery UI Slider。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider enable() 方法示例</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #slider {
            width: 200px;
            margin-top: 50px;
        }
    </style>
    <script>
        $(function() {
            // 初始化滑块
            $( "#slider" ).slider({
                range: "min",
                value: 20,
                min: 0,
                max: 100,
                step: 5
            });

            // 禁用滑块
            $( "#disable" ).click(function() {
                $( "#slider" ).slider( "disable" );
            });

            // 启用滑块
            $( "#enable" ).click(function() {
                $( "#slider" ).slider( "enable" );
            });
        });
    </script>
</head>
<body>
    <div id="slider"></div>

    <button id="disable">禁用滑块</button>
    <button id="enable">启用滑块</button>
</body>
</html>

在上面的示例中，生成了一个 jQuery UI Slider，并添加了两个按钮，点击这些按钮将启用或禁用滑块。默认情况下，滑块是启用的。