jQuery UI Slider Widget 完整参考

jQuery UI Slider Widget 是一个基于 jQuery UI 的插件，用于创建滑动选择器。开发者可以根据自己的需求，定制各种风格的滑动选择器，并且支持对滑动选择器进行事件绑定和回调函数的调用。

安装

jQuery UI Slider Widget 是 jQuery UI 的一部分，因此需要引入 jQuery 和 jQuery UI 的库文件。可以通过以下方式安装：

使用CDN

<!-- 库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

下载文件

可以从 jQuery UI 的官网下载最新版本的库文件。

<!-- 库文件 -->
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css" />

基本使用

可以通过以下代码创建一个基本的滑动选择器：

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider();
    } );
</script>

选项

可以通过设置选项来定制滑动选择器的各种属性。以下是滑动选择器的一些常用选项：

range

选择器的类型，有两种取值："min" 或者 "max"。默认值是 "min"。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            range: "max"
        });
    } );
</script>

disabled

是否禁用滑动选择器。默认值为 false。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            disabled: true
        });
    } );
</script>

min 和 max

选择器的最小值和最大值。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            min: 0,
            max: 100
        });
    } );
</script>

step

每次移动的步长。默认值为 1.

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            step: 10
        });
    } );
</script>

value

选择器的初始值。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            value: 50
        });
    } );
</script>

orientation

选择器的方向。有两种取值："horizontal" 或 "vertical"。默认值为 "horizontal"。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            orientation: "vertical"
        });
    } );
</script>

事件

当滑动选择器发生变化时，可以触发一些事件。以下是一些常见的事件：

slide

当滑动选择器的值发生变化时，触发 slide 事件。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            slide: function( event, ui ) {
                console.log( "当前值为：" + ui.value );
            }
        });
    } );
</script>

change

当滑动选择器的值发生变化并且结束移动时，触发 change 事件。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            change: function( event, ui ) {
                console.log( "当前值为：" + ui.value );
            }
        });
    } );
</script>

start

当开始移动滑动选择器时，触发 start 事件。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            start: function( event, ui ) {
                console.log( "开始移动" );
            }
        });
    } );
</script>

stop

当停止移动滑动选择器时，触发 stop 事件。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider({
            stop: function( event, ui ) {
                console.log( "停止移动" );
            }
        });
    } );
</script>

方法

可以使用一些方法对滑动选择器进行控制。

destroy

销毁滑动选择器。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider();

        setTimeout( function() {
            $( "#slider" ).slider( "destroy" );
        }, 5000 );
    } );
</script>

disable 和 enable

禁用和启用滑动选择器。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider();

        setTimeout( function() {
            $( "#slider" ).slider( "disable" );
        }, 5000 );

        setTimeout( function() {
            $( "#slider" ).slider( "enable" );
        }, 10000 );
    } );
</script>

value

获取或设置滑动选择器的值。

<div id="slider"></div>

<script>
    $( function() {
        $( "#slider" ).slider();

        setTimeout( function() {
            var value = $( "#slider" ).slider( "value" );
            console.log( "当前值为：" + value );
        }, 5000 );

        setTimeout( function() {
            $( "#slider" ).slider( "value", 75 );
        }, 10000 );
    } );
</script>

总结

通过本文的介绍，你已经了解了 jQuery UI Slider Widget 的基本使用、选项、事件和方法。祝你使用愉快！