翻转开关是复选框或两个选项选择菜单的替代外观。可以通过单击或滑动来切换。

要创建翻转开关，请将属性 data-role="flipswitch" 添加到复选框 input 或具有两个 option 值的 select 。

Flipswitch 小部件使用 jQuery Mobile CSS framework 来设计其外观和感觉。如果需要 Flipswitch 特定样式，可以使用以下 CSS 类名称进行覆盖或作为 classes option 的键：

使用以下标记创建基于复选框 input 的翻转开关：

您还可以基于 select 元件创建翻转开关：

您可以使用 onText 和 offText 选项自定义 Flipswitch 小部件显示的标签（如果小部件基于复选框），或者使用前两个 option 元素内的文本（如果小部件基于 select ）。

两个标签内文本的位置是在 Flipswitch 小部件的结构 CSS 中手动指定的。因此，如果您使用比 "On" 和 "Off" 长的标签，则可能必须使用以下自定义 CSS 覆盖默认文本位置：

根据您选择的标签，您可能还需要提供自定义 CSS 来覆盖翻转开关的默认宽度：

您可以通过提供 Flipswitch 小部件通常在其初始化期间创建的标记来缩短页面的加载时间。

通过您自己提供此标记，并通过设置属性 data-enhanced="true" 来指示您已完成此操作，您可以指示 Flipswitch 小部件在实例化期间跳过这些 DOM 操作，并假设所需的 DOM 结构已经存在。

当您提供此类预渲染标记时，您还必须设置框架通常设置的所有类，并且还必须设置其值与默认值不同的所有数据属性，以指示预渲染标记反映非默认值相应的小部件选项。

Flipswitch 小部件在 input 周围添加了一个包装器 div 。除了原始元素之外，包装器还包含两个 span 元素，其中存储两个标签。第一个 span 的样式为按钮，活动状态的文本出现在按钮左侧边框之外。要使翻转开关可通过 Tab 键访问，您可以将 T4​​274T 属性添加到第一个 span 。

在下面的示例中，提供了翻转开关的预渲染标记。显式指定属性 data-corners="false" ，因为包装元素上缺少 ui-corner-all 类表明 "corners" 小部件选项为 false。