jQuery Mobile 滑块创建事件(1)

📌 相关文章

📜 jQuery Mobile 滑块创建事件(1)

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

jQuery Mobile 滑块创建事件

jQuery Mobile提供了创建滑块的功能，这个功能可以用来创建一个类似音量控制的滑动条，可以用来控制某个值的大小。

创建滑块

创建一个滑块的方法很简单，只需要在html中添加一个input标签，type属性为range即可：

<label for="slider-1">滑块示例:</label>
<input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" data-highlight="true">

这里介绍下input标签的常见属性：

type: 表示输入类型，这里我们选择range类型。
name: 表示该输入框的名称。
id: 表示该输入框的唯一标识符。
value: 表示该输入框的初始值。
min: 表示该输入框的最小值。
max: 表示该输入框的最大值。
data-highlight: 表示是否加亮滑块的背景颜色。

滑块事件

创建了一个滑块之后，我们可以通过添加事件来对用户的行为进行响应，这里介绍两种常见的事件：

滑块拖动事件

当用户拖动滑块的时候，我们可以通过change事件来响应：

$('#slider-1').on('change', function(event) {
    console.log($(this).val());
});

这里介绍下change事件：

change: 表示元素的值改变时触发的事件。

滑块拖动停止事件

当用户停止拖动滑块的时候，我们可以通过slidestop事件来响应：

$('#slider-1').on('slidestop', function(event) {
    console.log($(this).val());
});

这里介绍下slidestop事件：

slidestop: 表示用户停止拖动滑块时触发的事件。

完整示例

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 滑块创建事件</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile 滑块创建事件</h1>
        </div>
        <div data-role="content">
            <label for="slider-1">滑块示例:</label>
            <input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" data-highlight="true">
        </div>
    </div>
    <script type="text/javascript">
        $('#slider-1').on('change', function(event) {
            console.log($(this).val());
        });
        $('#slider-1').on('slidestop', function(event) {
            console.log($(this).val());
        });
    </script>
</body>
</html>

这里使用了jQuery Mobile的样式和脚本文件，如果没有必要可以去掉。