jQuery Mobile Slider Widget 完整参考

简介

jQuery Mobile Slider Widget 是一个基于 jQuery 和 jQuery Mobile 的滑块选取组件。它可以让用户方便地通过滑块选择一个数值或进度。除了基本的选取功能，它还支持伸缩、垂直和水平模式、内嵌图像等多种功能。

API 参考

属性

jQuery Mobile Slider Widget 支持以下属性：

| 属性 | 类型 | 默认值 | 描述 | |:------------|:--------|:-------|:-----------------| | disabled | 布尔型 | false| 是否禁用组件 | | highlight | 布尔型 | true | 是否高亮滑块 | | mini | 布尔型 | false| 是否显示迷你版 | | orientation | 字符串 | horizontal | 组件方向，可选值为 horizontal 和 vertical | | popupEnabled | 布尔型 | false| 是否显示弹出面板 | | theme | 字符串 | 'a' | 组件主题 | | trackTheme| 字符串 | 'a' | 轨道的主题 | | value | 数值 | 0 | 初始值 |

以上属性可以使用 jQuery Mobile 提供的 option 方法进行获取或设置。

事件

jQuery Mobile Slider Widget 支持以下事件：

| 事件 | 描述 | |:--------------------|:------------------------------------| | slidestart | 滑块开始滑动时触发 | | slide | 滑块滑动过程中持续触发 | | slidechange | 滑块值发生改变时触发 | | slidestop | 滑块停止滑动时触发 |

以上事件可以使用 jQuery 的 on 方法进行监听。例如：

$(document).on('slidestop', '#slider', function() {
  console.log('滑动停止');
});

方法

jQuery Mobile Slider Widget 支持以下方法：

| 方法 | 描述 | |:---------------|:-----------------------------------------| | disable | 禁用滑块 | | enable | 启用滑块 | | refresh | 刷新滑块，使其适应父元素大小变化 | | option | 获取或设置滑块属性 | | value | 获取或设置滑块的值 |

以上方法可以使用 jQuery Mobile 提供的 method 方法进行调用。

示例代码

基本用法

以下示例演示了如何创建一个简单的滑块，并支持滑块滑动事件和值改变事件。滑块的取值范围为 0 到 100。

<div data-role="fieldcontain">
  <label for="slider">滑块：</label>
  <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

<script>
$('#slider').on('slide slidestop', function(event) {
  console.log('滑块值：' + $(this).val());
});
</script>

自定义主题和颜色

以下示例演示了如何在滑块上应用自定义主题和颜色。这里采用了红色主题和黄色轨道。

<div data-role="fieldcontain">
  <label for="slider2">滑块：</label>
  <input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-theme="b" data-track-theme="e" />
</div>

<style>
.ui-slider-track,
.ui-slider-handle {
  background: yellow !important;
}
.ui-slider-theme-b .ui-slider-handle {
  border-color: red !important;
}
</style>

垂直模式和弹出面板

以下示例演示了如何使用垂直模式和弹出面板。当用户点击滑块时，会弹出一个面板并显示当前的取值。

<div data-role="fieldcontain">
  <label for="slider3">滑块：</label>
  <input type="range" name="slider3" id="slider3" value="0" min="0" max="100" data-theme="c" data-track-theme="f" data-popup-enabled="true" data-mini="true" data-orientation="vertical" />
</div>

<script>
$('#slider3').on('popupafteropen', function(event, ui) {
  var value = $(this).val();
  $(this).parent().find('.ui-slider-popup-text').text('当前值：' + value);
});
</script>

内嵌图像

以下示例演示了如何在滑块上内嵌一个图像。当用户拖动滑块时，图像的大小也跟着改变。

<div data-role="fieldcontain">
  <label for="slider4">滑块：</label>
  <input type="range" name="slider4" id="slider4" value="50" min="0" max="100" data-theme="d" data-track-theme="g" />
  <div id="slider4-img"></div>
</div>

<style>
#slider4-img {
  width: 50%;
  height: 50%;
  background: url('https://www.w3schools.com/html/pic_trulli.jpg') no-repeat center center;
  background-size: 50%;
}
</style>

<script>
$('#slider4').on('slidechange', function(event, ui) {
  var value = $(this).val() / 100;
  $('#slider4-img').css('background-size', value * 100 + '%');
});
</script>

组件选项

以下是 jQuery Mobile Slider Widget 支持的全部选项。

| 属性        | 类型    | 默认值 | 描述             |
|:------------|:--------|:-------|:-----------------|
| `disabled`  | 布尔型  | `false`| 是否禁用组件     |
| `highlight` | 布尔型  | `true` | 是否高亮滑块     |
| `mini`      | 布尔型  | `false`| 是否显示迷你版   |
| `orientation` | 字符串 | `horizontal` | 组件方向，可选值为 `horizontal` 和 `vertical` |
| `popupEnabled` | 布尔型 | `false`| 是否显示弹出面板 |
| `theme`     | 字符串 | `'a'`  | 组件主题         |
| `trackTheme`| 字符串 | `'a'`  | 轨道的主题       |
| `value`     | 数值    | `0`    | 初始值           |