jQuery Mobile Flipswitch Widget 角选项

Flipswitch Widget 是 jQuery Mobile 中的一种输入小部件，它可以将开关按钮的状态翻转。

如何使用

在 HTML 中使用 Flipswitch Widget，您需要将 input 元素的类型设置为“flipswitch”。然后，您可以使用 data 属性配置 Flipswitch 的一些选项，例如 data-on-text 和 data-off-text 选项。以下是一个例子：

<label for="switch">Flipswitch:</label>
<input type="flipswitch" name="switch" id="switch" data-wrapper-class="custom-size-flipswitch" data-on-text="ON" data-off-text="OFF">

角选项

Flipswitch Widget 还具有角选项的功能。角选项是在 Flipswitch 控件的两端显示的图标或文本。要使用角选项，您需要添加两个自定义数据属性：data-角-1-text 和 data-角-2-text。例如：

<label for="flip-select-custom">Custom width of select:</label>
<select name="flip-select-custom" id="flip-select-custom" data-role="flipswitch" data-mini="true" data-on-text="角 1" data-off-text="角 2" data-角-1-text="角 1" data-角-2-text="角 2">
</select>

自定义样式

Flipswitch Widget 允许您使用 data-wrapper-class 属性自定义样式。例如，您可以为 Flipswitch Widget 添加一个自定义类，并在 CSS 文件中进行定义。以下是一个例子：

<label for="flip-custom-1">Custom theme:</label>
<input type="flipswitch" name="flip-custom-1" id="flip-custom-1" data-wrapper-class="custom-size-flipswitch">

.custom-size-flipswitch .ui-flipswitch-on {
    width: 100px;
    height: 40px;
}
.custom-size-flipswitch .ui-flipswitch-off {
    width: 100px;
    height: 40px;
}

总结

Flipswitch Widget 是 jQuery Mobile 中的一种输入小部件，可用于实现开关按钮的功能。Flipswitch Widget 还具有角选项的功能，可将图标或文本添加到 Flipswitch 控件的两端。您可以使用 data-wrapper-class 属性自定义 Flipswitch Widget 的样式。