jQuery Mobile Flipswitch wrapperClass选项

jQuery Mobile是一个用于构建移动Web应用的框架。Flipswitch是其提供的一种开关按钮组件。在创建Flipswitch组件时，可以指定wrapperClass选项。

wrapperClass选项用于定义Flipswitch的包装容器的CSS类名，这个容器包含了显示Flipswitch状态的标签，以及隐藏的input元素。

下面是wrapperClass选项的详细攻略：

语法

wrapperClass: string

参数

• string：指定包装容器的CSS类名。

示例1

<div data-role="fieldcontain">
    <label for="flip-checkbox">Flip checkbox:</label>
    <select name="flip-checkbox" id="flip-checkbox" data-role="flipswitch" data-wrapper-class="custom-wrapper">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

这个示例创建了一个Flipswitch组件，包装容器的CSS类名为"custom-wrapper"。在调用Flipswitch时，使用data-wrapper-class属性设置wrapperClass选项。

示例2

.ui-flipswitch-custom1 .ui-btn.ui-flipswitch-on {
    background-color: green;
}

.ui-flipswitch-custom2 .ui-btn.ui-flipswitch-on {
    background-color: red;
}

.ui-flipswitch-custom3 .ui-btn.ui-flipswitch-on {
    background-color: blue;
}

这个示例定义了三个CSS类，用于设置Flipswitch组件的外观。在这里，wrapperClass选项并未在Flipswitch调用中指定，而是使用了CSS类名的方式指定。

以上就是wrapperClass选项的完整攻略，希望能对你有所帮助。