iCheck自定义复选框 & 单选按钮插件

插件特色

• 在不同浏览器和设备上都有相同的表现 — 包括 桌面和移动设备
• 支持触摸设备 — iOS、Android、BlackBerry、Windows Phone
• 支持键盘导航 — Tab、Spacebar、Arrow up/down 和其它快捷键
• 方便定制 — 用HTML 和 CSS 即可为其设置样式 (试试 6 套针对Retina屏幕的皮肤吧)
• 支持 jQuery 和 Zepto JavaScript工具库
• 体积小巧 — gzip压缩后只有1 kb
• 25 种参数 用来定制复选框（checkbox）和单选按钮（radio button）
• 8 个回调事件 用来监听输入框的状态
• 7 个方法 用来通过编程方式控制输入框的状态
• 能够将输入框的状态变化同步回原始输入框中， 支持所有选择器

你可以通过insert参数向这个div中放置HTML代码或文本。

对于下面这段HTML代码：

<label>
  <input type="checkbox" name="quux[1]" disabled>
  Foo
</label>

<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>

<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

在默认参数下使用iCheck时会得到如下结果：

<label>
  <div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div>
  Foo
</label>

<label for="baz[1]">Bar</label>
<div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div>

<label for="baz[2]">Bar</label>
<div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div>

默认情况下，iCheck并不会给输入框外面包裹的div设置任何CSS样式（在你不使用皮肤的时）。

参数

下面是参数列表及其默认值：

{
  // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
  handle: '',

  // base class added to customized checkboxes
  checkboxClass: 'icheckbox',

  // base class added to customized radio buttons
  radioClass: 'iradio',

  // class added on checked state (input.checked = true)
  checkedClass: 'checked',

    // if not empty, used instead of 'checkedClass' option (input type specific)
    checkedCheckboxClass: '',
    checkedRadioClass: '',

  // if not empty, added as class name on unchecked state (input.checked = false)
  uncheckedClass: '',

    // if not empty, used instead of 'uncheckedClass' option (input type specific)
    uncheckedCheckboxClass: '',
    uncheckedRadioClass: '',

  // class added on disabled state (input.disabled = true)
  disabledClass: 'disabled',

    // if not empty, used instead of 'disabledClass' option (input type specific)
    disabledCheckboxClass: '',
    disabledRadioClass: '',

  // if not empty, added as class name on enabled state (input.disabled = false)
  enabledClass: '',

    // if not empty, used instead of 'enabledClass' option (input type specific)
    enabledCheckboxClass: '',
    enabledRadioClass: '',

  // class added on hover state (pointer is moved onto an input)
  hoverClass: 'hover',

  // class added on focus state (input has gained focus)
  focusClass: 'focus',

  // class added on active state (mouse button is pressed on an input)
  activeClass: 'active',

  // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
  labelHover: true,

    // class added to label if labelHover set to true
    labelHoverClass: 'hover',

  // increase clickable area by given % (negative number to decrease)
  increaseArea: '',

  // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
  cursor: false,

  // set true to inherit original input's class name
  inheritClass: false,

  // if set to true, input's id is prefixed with 'iCheck-' and attached
  inheritID: false,

  // add HTML code or text inside customized input
  insert: ''
}

调用iCheck时，只需要将修改了默认值的参数列出来即可：

$('input').iCheck({
  labelHover: false,
  cursor: true
});

你可以对上面列出的任何class重置样式。

初始化

首先引入jQuery v1.7+ (或 Zepto)，然后引入jquery.icheck.js (或者zepto.icheck.js) 。

iCheck支持所有选择器（selectors），并且只针对复选框和单选按钮起作用：

// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();

// handle inputs only inside $('.block')
$('.block input').iCheck();

// handle only checkboxes inside $('.test')
$('.test input').iCheck({
  handle: 'checkbox'
});

// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();

// you can also change options after inputs are customized
$('input.some').iCheck({
  // different options
});

回调事件

iCheck提供了大量回调事件，都可以用来监听change事件。

事件名称	使用时机
ifClicked	用户点击了自定义的输入框或与其相关联的label
ifChanged	输入框的 checked 或 disabled 状态改变了
ifChecked	输入框的状态变为 checked
ifUnchecked	checked 状态被移除
ifDisabled	输入框状态变为 disabled
ifEnabled	disabled 状态被移除
ifCreated	输入框被应用了iCheck样式
ifDestroyed	iCheck样式被移除

使用on()方法绑定事件：

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

ifCreated 事件应该在插件初始化之前绑定。

方法

下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：

$('input').iCheck('check'); — 将输入框的状态设置为checked

$('input').iCheck('uncheck'); — 移除 checked 状态

$('input').iCheck('toggle'); — toggle checked state

$('input').iCheck('disable'); — 将输入框的状态设置为 disabled

$('input').iCheck('enable'); — 移除 disabled 状态

$('input').iCheck('update'); — apply input changes, which were done outside the plugin

$('input').iCheck('destroy'); — 移除iCheck样式

对比

iCheck被创造出来是为了避免重复造车轮。它针对大量浏览器、设备和使用者提供了同样的表现方式。回调事件和方法可以被用来很容易的处理自定义的输入框的状态的变化。

还有一些利用 CSS3 技术给复选框和单选按钮设置样式的途径。例如。下面列出了此类方法的限制和不足：

• — inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them
• — poor browser support
• — multiple bugs on mobile devices
• — tricky, harder to maintain CSS code
• — JavaScript is still needed to fix specific issues

While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

浏览器支持

iCheck已经在 Internet Explorer 6+、Firefox 2+、Opera 9+、Google Chrome 和 Safari 浏览器上被验证过，并且应该可以再更多浏览器上工作。

移动浏览器(例如 Opera mini、 Chrome mobile、 Safari mobile 和其它浏览器) 也被支持。已经在 iOS (iPad、 iPhone、 iPod)、Android、BlackBerry 和 Windows Phone 设备上进行了测试。