注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

复选框美化成IOS7的开关按钮插件Switchery

UI fishcity 1660浏览

复选框美化成IOS7的开关按钮插件Switchery

Switchery是一个简单的JS组件,它可以帮助你把默认的HTML复选框变成美丽的iOS 7开关按钮样式,而您仅需几个简单的步骤就可以实现,同时您还可以轻松地定制开关的样式,你完全可以根据项目的设计要求完成开关按钮的设计,无需担心样式修改的问题。Switchery是一个独立JS库,无需jqeury等JS库的支持。

使用方法

引入核心文件

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

写入html,只需在checkbox中加上checked属性,代码如下

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

写入JS初始化

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

参数与默认值

defaults = {
    color          : '#64bd63'  //开关打开的颜色
  , secondaryColor : '#dfdfdf'  //开关关闭的颜色
  , className      : 'switchery'//开关的名称
  , disabled       : false      //开关是否可用
  , disabledOpacity: 0.5        //开关的透明度
  , speed          : '0.1s'     //开关的动画时间
}

多个开关

你可以添加任意个开关,它们只需要有共同的样式类,然后使用选择器选择它们,再一一地把它们实例化便可。

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

多个调用

可以通过属性data-switchery="true"来筛选出已经被调用过的元素,下面的代码为如果元素有这个数据属性将返回。

var init = new Switchery('.js-switch');
if (init.markedAsSwitched()) { ... }

disabled

通过禁用选项来激活或是关闭开关功能

var switchery = new Switchery(elem, { disabled: true });

自定义禁用后的透明度

var switchery = new Switchery(elem, { disabled: true, disabledOpacity: 0.75 });

Colored

激活开关颜色color

var switchery = new Switchery(elem, { color: '#41b7f1' });

开关关闭后的颜色secondaryColor

var switchery = new Switchery(elem, { color: '#fec200', secondaryColor: '#fec200' });

Checking state

获取当前开关的状态,click和change获取

onclik:

var clickCheckbox = document.querySelector('.js-check-click')
  , clickButton = document.querySelector('.js-check-click-button');

clickButton.addEventListener('click', function() {
  alert(clickCheckbox.checked);
});

onchange

var changeCheckbox = document.querySelector('.js-check-change')
  , changeField = document.querySelector('.js-check-change-field');

changeCheckbox.onchange = function() {
  changeField.innerHTML = changeCheckbox.checked;
};

兼容低版本浏览器,建议使用 CSS3 PIE,官方例子中就有使用。

var elems = document.querySelectorAll('.js-switch');

for (var i = 0; i < elems.length; i++) {
  var switchery = new Switchery(elems[i]);
}

转载请注明:jQ酷 » 复选框美化成IOS7的开关按钮插件Switchery

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。