jQuery Mobile Flipswitch Widget 默认选项

jQuery Mobile 是一个流行的 HTML5 移动应用程序框架，其中包含 Flipswitch Widget，这是一个开关按钮控件，可以在 HTML5 移动应用程序中使用。

使用 Flipswitch Widget

Flipswitch Widget 可以很容易地添加到你的网页中。

HTML 标记

你可以使用以下 HTML 标记来创建一个 Flipswitch Widget：

<label for="flip-switch">Switch:</label>
<select id="flip-switch" name="flip-switch" data-role="flipswitch">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

在上面的示例中，label 标记与 select 标记相对应，并使用 for 属性将它们连接。select 标记使用 data-role="flipswitch" 属性来将其声明为一个 Flipswitch Widget。

JavaScript 初始化

你还需要在 jQuery Mobile pageinit 事件中添加以下 JavaScript 代码来初始化 Flipswitch Widget：

$(document).on('pageinit', function () {
    $('[data-role=flipswitch]').flipswitch();
});

在上面的代码中，我们将 Flipswitch Widget 的 data-role 属性与 flipswitch() 函数相匹配。

自定义 Flipswitch Widget

你还可以通过添加一些 data-* 属性来自定义 Flipswitch Widget。以下是可用的属性：

• data-on-text: 指定开启状态下的文本。
• data-off-text: 指定关闭状态下的文本。
• data-wrapper-class: 自定义 Flipswitch 的样式类。

以下是一个示例，其中自定义了 Flipswitch Widget：

<label for="custom-switch">Switch:</label>
<select id="custom-switch" name="custom-switch" data-role="flipswitch" 
        data-on-text="YES" data-off-text="NO" data-wrapper-class="custom">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

在上面的示例中，我们添加了三个 data-* 属性来自定义 Flipswitch Widget。data-on-text 和 data-off-text 属性用于指定开启和关闭状态下的文本。data-wrapper-class 属性用于指定 Flipswitch Widget 的自定义样式类。在此示例中，我们使用了名为 custom 的样式类。

结论

Flipswitch Widget 是 jQuery Mobile 中一个很有用的可定制控件，可以很容易地将其添加到你的 HTML5 移动应用程序中。

以上就是关于 jQuery Mobile Flipswitch Widget 默认选项的介绍，希望对你有所帮助。