jQuery Mobile 表单滑动条
jQuery Mobile 表单滑动条
jQuery Mobile 表单滑动条(Slider widget)是通过手势来操作一个滑块,用于选择一个范围值的一组表单元素。
基本用法
要创建一个基本的滑动条,需要使用 <input>
标签并将其类型设置为 range
。在这个标签中,需要使用一些自定义属性来配置滑动条的外观和行为。
<label for="slider-1">滑动条:</label>
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
min
:滑块可选的最小值。max
:滑块可选的最大值。value
:滑块的默认初始值。
带刻度的滑动条
要创建带刻度的滑动条,需要引入 jQuery.mobile.extensions.js
文件,然后使用一个 <div>
标签来包裹 <input>
标签,并添加一些自定义属性来配置滑动条的外观和行为。
<label for="slider-2">带刻度滑动条:</label>
<div data-role="rangeslider" data-mini="true">
<label for="slider-2-min">最小值:</label>
<input type="range" name="slider-2-min" id="slider-2-min" min="0" max="100" value="0">
<label for="slider-2-max">最大值:</label>
<input type="range" name="slider-2-max" id="slider-2-max" min="0" max="100" value="100">
</div>
data-role="rangeslider"
:表示这是一个带刻度的滑动条。data-mini="true"
:表示这是一个小尺寸的滑动条,适用于移动设备页面。<label>
:表示每个刻度的标签。<input type="range">
:表示每个刻度的滑块。
滑动条事件
当用户拖动滑动条时,可以捕获它的 change
事件和 input
事件。这些事件可用于实现与滑动条有关的其它功能。
$(document).on("change", "#slider-1", function () {
var value = $(this).val();
console.log("滑动条的值为:" + value);
});
$(document).on("input", "#slider-1", function () {
var value = $(this).val();
console.log("滑动条的值为:" + value);
});
插件选项
jQuery Mobile 表单滑动条提供了一些插件选项,以控制滑动条的行为和外观。
theme
:给滑动条添加主题,可以是任何 jQuery Mobile 主题。trackTheme
:给滑动条的轨道添加主题,可以是任何 jQuery Mobile 主题。disabled
:禁用滑动条,将其置为不可用状态。highlight
:当滑块处于激活状态时,高亮轨道和轨道末端。mini
:创建一个小尺寸的滑动条,适用于移动设备页面。popupEnabled
:当用户拖动滑块时,显示当前的值弹出窗口。
<label for="slider-3">主题滑动条:</label>
<input type="range" name="slider-3" id="slider-3" min="0" max="100" value="50" data-theme="b" data-track-theme="a" data-highlight="true" data-popup-enabled="true">
总结
jQuery Mobile 表单滑动条是一个非常有用的工具,用于选择一组表单元素中的一个范围值。通过使用自定义属性和插件选项,可以轻松地配置滑动条的外观和行为。同时,还可以通过捕获滑动条的事件来增强其功能。