这是一款ios样式开关按钮jQuery插件。该插件可以将复选按钮和单选按钮转换为ios样式的开关按钮。

使用方法

在页面中引入jquery和jquery.switcher.js文件，以及样式文件switcher.css。

HTML结构

HTML结构如下。

Checkboxes

Radio Buttons

CSS样式

你可以创建自己的开关按钮样式。

.ui-switcher {

background-color: #bdc1c2;

display: inline-block;

height: 20px;

width: 48px;

border-radius: 10px;

box-sizing: border-box;

vertical-align: middle;

position: relative;

cursor: pointer;

transition: border-color 0.25s;

margin: -2px 4px 0 0;

box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);

}

.ui-switcher:before {

font-family: sans-serif;

font-size: 10px;

font-weight: 400;

color: #ffffff;

line-height: 1;

display: inline-block;

position: absolute;

top: 6px;

height: 12px;

width: 20px;

text-align: center;

}

.ui-switcher:after {

background-color: #ffffff;

content: '\0020';

display: inline-block;

position: absolute;

top: 2px;

height: 16px;

width: 16px;

border-radius: 50%;

transition: left 0.25s;

}

初始化插件

在页面DOM元素加完毕之后，通过下面的方法来初始化该插件。

$(function(){

$.switcher();

});

你也可以在指定的复选按钮和单选按钮上初始化插件。

$.switcher('input[type=checkbox]');

$.switcher('input[type=radio]');