📌  相关文章
📜  jQuery UI Slider 小部件方法(1)

📅  最后修改于: 2023-12-03 15:16:44.990000             🧑  作者: Mango

jQuery UI Slider 小部件方法

jQuery UI Slider 是一个强大的 JavaScript 库，提供了丰富的方法和选项来创建可拖动的滑块控件。

如何使用

要使用 jQuery UI Slider，需要在 HTML 文件中导入 jQuery 库和 jQuery UI 库。

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

然后，在 JavaScript 文件中创建一个 jQuery UI Slider。

$(function() {
    $("#slider").slider();
});

这样就可以创建一个默认的 jQuery UI Slider。

设置选项

可以使用选项来定制 jQuery UI Slider 的外观和行为。

$(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        value: 50,
        step: 1,
        orientation: "horizontal",
        range: "min",
        disabled: false,
        animate: true,
        slide: function(event, ui) {
            console.log(ui.value);
        },
        stop: function(event, ui) {
            console.log(ui.value);
        }
    });
});
方法
destroy()

销毁 jQuery UI Slider。

$("#slider").slider("destroy");
disable()

禁用 jQuery UI Slider。

$("#slider").slider("disable");
enable()

启用 jQuery UI Slider。

$("#slider").slider("enable");
value()

获取或设置 jQuery UI Slider 的值。

$("#slider").slider("value");  // 获取值
$("#slider").slider("value", 30); // 设置值
option()

获取或设置 jQuery UI Slider 的选项。

$("#slider").slider("option", "min");  // 获取 min 选项
$("#slider").slider("option", "min", 0); // 设置 min 选项