jQuery Mobile Flipswitch

简介

jQuery Mobile Flipswitch 是一个基于 jQuery Mobile 的开关组件。它使用触觉效果和动画来改变状态，并可用于替代传统的单选框。

使用方法

引入文件

在所需 HTML 文件的 head 中引入以下文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

创建 Flipswitch

通过以下代码在 HTML 中创建 Flipswitch：

<label for="flipswitch">Flipswitch:</label>
<input type="checkbox" data-role="flipswitch" name="flipswitch" id="flipswitch">

自定义选项

Flipswitch 有许多可自定义的选项，可以在 data-options 属性中设置。例如，以下代码将 Flipswitch 的外观更改为圆形：

<input type="checkbox" data-role="flipswitch" name="flipswitch" id="flipswitch" data-wrapper-class="custom-flipswitch">

CSS：

.custom-flipswitch .ui-flipswitch.ui-shadow-inset {
  border-radius: 1.5em;
}
.custom-flipswitch .ui-flipswitch-on.ui-btn.ui-shadow {
  right: unset;
  left: 1px;
  border-top-left-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
}
.custom-flipswitch .ui-flipswitch-off.ui-btn.ui-shadow {
  border-top-right-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
}

更多可自定义的选项可在 官方文档 中查看。

结语

jQuery Mobile Flipswitch 是一个非常实用且易于使用的组件，它可以让用户更方便地进行单选操作，并且具有可自定义的选项，使得开发者可以根据自己的需要来使用。