🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 开关 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** ![](images/form%20element/switch.png) ## 刷新开关 Refreshing a flip switch 如果你想通过js手动控制开关,务必调用 refresh 方法刷新样式 ``` var myswitch = $("select#bar"); myswitch[0].selectedIndex = 1; myswitch .slider("refresh"); ```