jQuery Mobile Flipswitch Widget 主题选项

jQuery Mobile Flipswitch Widget 是一个移动设备风格的开关按钮控件，可用于激活或停用选项。

特点

• 简单易用的界面风格，与 jQuery Mobile 其他组件一致。
• 支持状态变化动画效果，使用户操作更为自然。
• 可设置默认初始状态，使控件更符合用户预期。
• 可设置标签和文本描述，提高控件的可读性和易用性。
• 支持回调事件处理函数，方便程序员在状态变化时对应进行操作。

用法

Flipswitch Widget 可以通过以下方式使用：

HTML 记法

<div data-role="flipswitch" data-theme="主题选项">
  <label for="flip-checkbox-1">选项描述：</label>
  <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
</div>

其中 data-theme 属性为必选项，对应的参数值为主题选项名称。如需设置默认状态和标签等属性，可以在 input 标签上添加 checked、data-on-text 和 data-off-text 属性。

JavaScript 记法

$(".flip-switch").flipswitch({
  theme: "主题选项",
  onText: "开启",
  offText: "关闭",
  defaultState: true,
  change: function(event, ui) {
    // ...
  }
});

其中 theme 属性为必选项，对应的参数值为主题选项名称。如需设置默认状态、标签等属性或绑定回调事件处理函数，可以设置 onText、offText、defaultState 和 change 等属性。

主题选项

Flipswitch Widget 支持以下主题选项：

• a：默认主题，灰底黑色按钮。
• a-b：蓝底白色按钮。
• a-c：绿底白色按钮。
• b：黄底黑色按钮。
• b-c：绿底黑色按钮。
• c：红底白色按钮。
• d：浅黑底白色按钮。

示例

以下为使用 a 主题选项的 Flipswitch Widget 示例：

<div data-role="flipswitch" data-theme="a">
  <label for="flip-checkbox-2">选项描述：</label>
  <input type="checkbox" data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2">
</div>

$(".flip-switch").flipswitch({
  theme: "a",
  onText: "开启",
  offText: "关闭",
  defaultState: true,
  change: function(event, ui) {
    console.log("状态变化为：" + $(this).prop("checked"));
  }
});

效果如下：

更多示例请参考官方文档：https://demos.jquerymobile.com/1.4.5/flipswitch/