用iCheck(jQuery和Zepto)插件定制复选框(checkboxes)和单选按钮(radiobuttons)
$('#input-1,#input-3').iCheck('check');移除1和3输入框置的checked状态展示代码$('#input-1,#input-3').iCheck('uncheck');将2和4输入框置为disabled状态展示代码$('#input-2,#input-4').iCheck('disable');移除2和4输入框置为disabled状态展示代码$('#input-2,#input-4').iCheck('enable');移除iCheck样式展示代码$('input').iCheck('destroy');Callbacks皮肤最简皮肤LiveColorschemesStatesDemoForZeptolibrary,insteadofjquery.icheck.jsusezepto.icheck.js.
Ifyouneedaminifiedversion,usejquery.icheck.min.jsorzepto.icheck.min.js.
ForZeptolibrary,insteadofjquery.icheck.jsusezepto.icheck.js.
所有皮肤(除了Line)都是支持透明的,你可以将它们应用在任何背景上。
iCheck插件就像是复选框和单选按钮的构造器。它将每个输入框都用一个div包裹起来,这样,你就可以按自己的需要定制样式或者使用自带的皮肤了。你还可以通过insert参数向这个div中放置HTML代码或文本。
对于下面这段HTML代码:
Foo BarBar在默认参数下使用iCheck时会得到如下结果:
Foo
Bar Bar 默认情况下,iCheck并不会给输入框外面包裹的div设置任何CSS样式(在你不使用皮肤的时)。
下面是参数列表及其默认值:
$('input').iCheck({labelHover:false,cursor:true});你可以对上面列出的任何class重置样式。
iCheck支持所有选择器(selectors),并且只针对复选框和单选按钮起作用:
//customizeallinputs(willsearchforcheckboxesandradiobuttons)$('input').iCheck();//handleinputsonlyinside$('.block')$('.blockinput').iCheck();//handleonlycheckboxesinside$('.test')$('.testinput').iCheck({handle:'checkbox'});//handle.voteclasselements(willsearchinsidetheelement,ifit'snotaninput)$('.vote').iCheck();//youcanalsochangeoptionsafterinputsarecustomized$('input.some').iCheck({//differentoptions});回调事件iCheck提供了大量回调事件,都可以用来监听change事件。
使用on()方法绑定事件:$('input').on('ifChecked',function(event){alert(event.type+'callback');});ifCreated事件应该在插件初始化之前绑定。
下面这些方法可以用来通过编程方式改变输入框状态(可以使用任何选择器):
$('input').iCheck('check');—将输入框的状态设置为checked
$('input').iCheck('uncheck');—移除checked状态
$('input').iCheck('toggle');—togglecheckedstate
$('input').iCheck('disable');—将输入框的状态设置为disabled
$('input').iCheck('enable');—移除disabled状态
$('input').iCheck('update');—applyinputchanges,whichweredoneoutsidetheplugin
$('input').iCheck('destroy');—移除iCheck样式
iCheck被创造出来是为了避免重复造车轮。它针对大量浏览器、设备和使用者提供了同样的表现方式。回调事件和方法可以被用来很容易的处理自定义的输入框的状态的变化。
WhileCSS3methodisquitelimitedsolution,iCheckismadetobeaneverydayreplacementcoveringmostofthetasks.
iCheck已经在InternetExplorer6+、Firefox2+、Opera9+、GoogleChrome和Safari浏览器上被验证过,并且应该可以再更多浏览器上工作。
移动浏览器(例如Operamini、Chromemobile、Safarimobile和其它浏览器)也被支持。已经在iOS(iPad、iPhone、iPod)、Android、BlackBerry和WindowsPhone设备上进行了测试。