转载

想要不一样的 checkbox？试试 iOS style Switch 吧！：）

Switch

:rabbit: A simple and powerful iOS style switch for checkbox.

Live Preview

Installation

Standalone:

<link rel="stylesheet" href="dist/switch.css" /> <script src="dist/switch.js"></script>

npm:

$ npm install weatherstar-switch --save-dev

Usage

<input type="checkbox" class="checkbox-switch" />

standalone version

var el = document.querySelector('.checkbox-swtich'); var mySwitch = new Switch(el, options);

work with module bundle

require('weatherstar-switch/dist/switch.css'); var Switch = require('weatherstar-switch');  var el = document.querySelector('.checkbox-swtich'); var mySwitch = new Switch(el, options);

Settings and Defaults

defaults = {     size             : 'default'   , checked          : undefined   , onText           : 'Y'   , offText          : 'N'   , onSwitchColor    : '#64BD63'   , offSwitchColor   : '#fff'   , onJackColor      : '#fff'   , offJackColor     : '#fff'   , showText         : false   , disabled         : false   , onInit           : function(){}   , onChange         : function(){}   , onRemove         : function(){}   , onDestroy        : function(){} };

size : size of switch element, can be default | small | large
checked : state of switch and checbox, if undefined the switch state according to the checkbox
onText : text in the jack when switch ON
offText : text in the jack when switch OFF
onSwitchColor : color of checked switch element
offSwitchColor : color of unchecked switch element
onJackColor : color of checked jack element
offJackColor : color of unchecked jack element
showText : show or hide text in the jack of switch
disabled : enable or disable click events and changing the state of the switch
onInit : called when switch init finish
onChange : called when original checkbox's checked change
onRemove : called when mySwitch.remove()
onDestroy : called when mySwitch.destroy()

API

.on()

Set switch ON.

.off()

Set switch OFF.

.toggle()

Toggle switch.

.disable()

Disable events bind to switch.

.enable()

Enable events bind to switch.

.destroy()

Remove all events bind to switch.

.remove()

Remove switch form DOM and show the checkbox.

License

MIT ©zhiyul

原文 https://github.com/zhiyul/Switch

正文到此结束

所属分类：编程技术

本文标签： UI Select tar DOM Document ORM CDN CTO IOS js GitHub http https API src git CSS dist ip IDE onchange
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二