這是項(xiàng)目中用到的一個(gè)仿照蘋果IOS7的滑動(dòng)按鈕插件帮哈。
Switchery是一個(gè)簡(jiǎn)單的組件,它可以幫助你把你的默認(rèn)的HTML復(fù)選框輸入美麗的iOS 7樣式開關(guān)僅在幾個(gè)簡(jiǎn)單的步驟担忧。您可以輕松地定制開關(guān),以便他們完美地匹配您的設(shè)計(jì)辕万。
Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+
具體的樣式~
按鈕樣式
地址：
GitHub
具體使用實(shí)例：
引入方式：
<link rel="stylesheet" href="dist/switchery.css" />
<script src="dist/switchery.js"></script>
初始化：
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
配置：
配置
默認(rèn)配置與選項(xiàng)：
defaults = {
color : '#64bd63', //開關(guān)元件的顏色(十六進(jìn)制或RGB值)
secondaryColor : '#dfdfdf', //次要的背景顏色和邊框的顏色,當(dāng)開關(guān)是關(guān)閉的
jackColor : '#fff', //抬起/按下元素的默認(rèn)顏色
jackSecondaryColor: null, //第二抬起/按下元素的默認(rèn)顏色
className : 'switchery', //開關(guān)元件的類名(默認(rèn)樣式switchery.css)
disabled : false, //啟用或禁用單擊事件和改變開關(guān)的狀態(tài)(布爾值)
disabledOpacity : 0.5, //不透明度泰鸡，當(dāng)不可見時(shí)為true(范圍0-1)
speed : '0.1s', //轉(zhuǎn)型需要的時(shí)間長度,動(dòng)畫效果長度珍特。
size : 'default' //樣式的大薪焯浮（small or large）
}
舉個(gè)栗子（引用CSS與JS后使用）：
<input type="checkbox" class="js-switch" checked />
栗子
多按鈕的統(tǒng)一初始化init.js
統(tǒng)一樣式初始化
當(dāng)然缅糟，這里只是傳入了一個(gè)顏色屬性挺智，這里其實(shí)可以傳入以上的所有屬性和不同的值，去打造不同的滑動(dòng)按鈕效果窗宦。
獲取其狀態(tài)：
通過對(duì)于其控件的.checked屬性bool值判斷是否被點(diǎn)擊
官方的栗子
