js插件---iCheck是用來作什麼的

時間 2019-11-11

標籤插件 icheck 來作什麼欄目 JavaScript 简体版

原文原文鏈接

js插件---iCheck是用來作什麼的

1、總結

一句話總結：25 種參數用來定製複選框（checkbox）和單選按鈕（radio button）

定製複選框定製單選按鈕

一、iCheck經常使用的方法有哪些？

$('input').iCheck('check'); $('input').iCheck('uncheck'); $('input').iCheck('toggle'); $('input').iCheck('disable'); $('input').iCheck('enable'); $('input').iCheck('update'); $('input').iCheck('destroy');

使用方法：
    $('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樣式

css

二、iCheck皮膚使用的注意事項是什麼？

使用對應皮膚要記得引入對應的css樣式

使用對應皮膚要記得引入對應的css樣式html

皮膚jquery

Black — minimal.css //黑色編程

Red — red.css //紅色bootstrap

Green — green.css //綠色瀏覽器

Blue — blue.css //藍色app

Aero — aero.css //win7中的那種玻璃效果ide

Grey — grey.css //銀灰色函數

Orange — orange.css //橙色url

Yellow — yellow.css //黃色

Pink — pink.css //粉紅色

Purple — purple.css //紫色

（請自行下載這些皮膚包）

（若是要引入相關皮膚，則需引入：相關主題顏色.css文件）

三、若是想要在iCheck點擊的時候作點什麼，應該怎麼用？

用iCheck的回調函數ifChecked

$('input').on('ifChecked', function(event){ //ifCreated 事件應該在插件初始化以前綁定 
   alert(event.type + ' callback'); 
});

四、如何改變iCheck控件的大小？

改變對應的css樣式

     .icheckbox_square-blue, .iradio_square-blue { 
      display: block; 
      margin: 0; 
      padding: 0; 
      width: 22px; 
      height: 22px; 
      background: url(blue.png) no-repeat; 
      border: none; 
      cursor: pointer; 
    }

2、iCheck表單美化插件使用方法詳解（含參數、事件等）

參考：iCheck表單美化插件使用方法詳解（含參數、事件等）
https://www.cnblogs.com/caicaizi/p/6070136.html

iCheck

特點：

一、在不一樣瀏覽器(包括ie6+)和設備上都有相同的表現 — 包括桌面和移動設備

二、支持觸摸設備 — iOS、Android、BlackBerry、Windows Phone等系統

四、方便定製 — 用HTML 和 CSS 便可爲其設置樣式 (多套皮膚)

五、體積小巧 — gzip壓縮後只有1 kb

六、25 種參數用來定製複選框（checkbox）和單選按鈕（radio button）

七、8 個回調事件用來監聽輸入框的狀態

八、7個方法用來經過編程方式控制輸入框的狀態

九、可以將輸入框的狀態變化同步回原始輸入框中，支持全部選擇器

iCheck插件表單美化效果圖

使用方法：

$('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時，只須要將修改了默認值的參數列出來便可：

//基礎使用方法
$('input').iCheck({
labelHover : false,
cursor : true,
checkboxClass : 'icheckbox_square-blue',
radioClass : 'iradio_square-blue',
increaseArea : '20%'
});

下面是參數列表及其默認值：

{
handle: '',
checkboxClass: 'icheckbox',
radioClass: 'iradio',
checkedClass: 'checked',
checkedCheckboxClass: '',
checkedRadioClass: '',
uncheckedClass: '',
uncheckedCheckboxClass: '',
uncheckedRadioClass: '',
disabledClass: 'disabled',
disabledCheckboxClass: '',
disabledRadioClass: '',
enabledClass: '',
enabledCheckboxClass: '',
enabledRadioClass: '',
hoverClass: 'hover',
focusClass: 'focus',
activeClass: 'active',
labelHover: true,
labelHoverClass: 'hover',
increaseArea: '',
cursor: false,
inheritClass: false,
inheritID: false,
insert: ''
}

咱們能夠對上面列出的任何class重置樣式

皮膚

Black — minimal.css //黑色

Red — red.css //紅色

Green — green.css //綠色

Blue — blue.css //藍色

Aero — aero.css //win7中的那種玻璃效果

Grey — grey.css //銀灰色

Orange — orange.css //橙色

Yellow — yellow.css //黃色

Pink — pink.css //粉紅色

Purple — purple.css //紫色

（請自行下載這些皮膚包）

初始化

首先，引入jQuery庫文件

其次，引入jquery.icheck.js插件文件

（若是要引入相關皮膚，則需引入：相關主題顏色.css文件）

回調事件

iCheck支持全部選擇器（selectors），而且只針對複選框 checkbox和單選radio按鈕起做用

iCheck提供了大量回調事件，均可以用來監聽 change事件


事件名稱	使用時機
ifClicked	用戶點擊了自定義的輸入框或與其相關聯的label
ifChanged	輸入框的 checked 或 disabled 狀態改變了
ifChecked	輸入框的狀態變爲 checked
ifUnchecked	checked 狀態被移除
ifDisabled	輸入框狀態變爲 disabled
ifEnabled	disabled 狀態被移除
ifCreated	輸入框被應用了iCheck樣式
ifDestroyed	iCheck樣式被移除