📅 最后修改于: 2023-12-03 15:16:42.728000 🧑 作者: Mango
jQuery Mobile Rangeslider 类选项是一个基于 jQuery Mobile 框架的可扩展小部件，可用于在移动设备上创建具有拖动选项的滑块。该小部件可以用于选择范围比较大的值，例如价格范围、温度范围、分数范围等。
要使用 jQuery Mobile Rangeslider 小部件，请遵循以下步骤：
1.在你的 HTML 页面中导入jQuery、jQuery Mobile 和 Rangeslider.css 和 Rangeslider.js 文件。
<head>
<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" />
<link rel="stylesheet" href="rangeslider.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="rangeslider.js"></script>
</head>
2.创建一个 <div> 元素，用于包装 Rangeslider。
<div data-role="rangeslider">
<label for="price-min">Price Range:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000" data-popup-enabled="true" />
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000" data-popup-enabled="true" />
</div>
3.对 Rangeslider 进行一些配置。
<script>
$(document).on("pagecreate", function () {
$("input[type='range']").rangeslider({
polyfill: false,
rangeClass: "rangeslider",
disabledClass: "rangeslider-disabled",
horizontalClass: "rangeslider-horizontal",
verticalClass: "rangeslider-vertical",
fillClass: "rangeslider-fill",
handleClass: "rangeslider-handle",
onInit: function () {
console.log("Rangeslider is initialised.");
},
onSlide: function (position, value) {
console.log("Rangeslider is sliding.");
},
onSlideEnd: function (position, value) {
console.log("Rangeslider has finished sliding.");
}
});
});
</script>
以下是可用的 Rangeslider 类选项：
polyfill - 布尔值，默认为 true，指定是否使用内置的轨道和句柄样式。如果设置为 false，则需要自己编写 CSS 样式。rangeClass - 字符串，默认为 rangeslider，指定范围滑块的 CSS 类名。disabledClass - 字符串，默认为 rangeslider-disabled，指定被禁用的范围滑块的 CSS 类名。horizontalClass - 字符串，默认为 rangeslider-horizontal，指定水平范围滑块的 CSS 类名。verticalClass - 字符串，默认为 rangeslider-vertical，指定垂直范围滑块的 CSS 类名。fillClass - 字符串，默认为 rangeslider-fill，指定选择区域的 CSS 类名。handleClass - 字符串，默认为 rangeslider-handle，指定滑块的 CSS 类名。onInit - 函数，默认为 null，指定在 Rangeslider 初始化时要调用的回调函数。onSlide - 函数，默认为 null，指定在滑动 Rangeslider 时要调用的回调函数。onSlideEnd - 函数，默认为 null，指定在 Rangeslider 滑动结束时要调用的回调函数。使用 jQuery Mobile Rangeslider 类选项，可以轻松地创建具有拖动选项的滑块，并对其进行样式和行为上的调整。有了这个小部件，可以大大简化移动设备上的数据选择和交互操作。