开关 Flip toggle switches

开关在移动设备上是一个常用的ui元素,用来二元的切换开/关或者输入true/false类型的数据。你可以像滑动框一样拖动开关,或者点击开关任意一半进行操作

创建一个只有2个option的选择菜单就可以构造一个开关了。第一个option会被样式化为 开,第二个option会被样式化为 关,所以请注意代码书写顺序。注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性。

HTML 代码:

<div data-role="fieldcontain">
    <label for="slider">Select slider:</label>
    <select name="slider" id="slider" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

开?Flip toggle switches

刷新开关 Refreshing a flip switch

如果你想通过js手动控制开关,务必调用 refresh 方法刷新样式

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");