iCheck表單美化外掛使用方法詳解（含引數、事件等）
阿新 • • 發佈：2019-01-05
iCheck
特色：
1、在不同瀏覽器(包括ie6+)和裝置上都有相同的表現 — 包括 桌面和移動裝置
2、支援觸控裝置 — iOS、Android、BlackBerry、Windows Phone等系統
4、方便定製 — 用HTML 和 CSS 即可為其設定樣式 (多套面板)
5、體積小巧 — gzip壓縮後只有1 kb
6、25 種引數 用來定製複選框（checkbox）和單選按鈕（radio button）
7、8 個回撥事件 用來監聽輸入框的狀態
8、7個方法 用來通過程式設計方式控制輸入框的狀態
9、能夠將輸入框的狀態變化同步回原始輸入框中， 支援所有選擇器
iCheck外掛表單美化效果圖
呼叫iCheck時，只需要將修改了預設值的引數列出來即可：
- $(</span><span class="string">'input'</span><span>).iCheck(</span><span class="string">'check'</span><span>); </span><span class="comment">//將輸入框的狀態設定為checked</span><span> </span></span></li><li><span>$('input'
).iCheck('uncheck'); //移除 checked 狀態- $(<span class="string">'input'</span><span>).iCheck(</span><span class="string">'toggle'</span><span>); </span><span class="comment">//toggle checked state</span><span> </span></span></li><li><span>$('input'
).iCheck('disable'); //將輸入框的狀態設定為 disabled- $(<span class="string">'input'</span><span>).iCheck(</span><span class="string">'enable'</span><span>); </span><span class="comment">//移除 disabled 狀態</span><span> </span></span></li><li><span>$('input').iCheck('update'); //apply input changes, which were done outside the plugin
- $('input').iCheck('destroy'); //移除iCheck樣式
下面是引數列表及其預設值：
- //基礎使用方法
- $('input').iCheck({
- labelHover : false,
- cursor : true,
- checkboxClass : 'icheckbox_square-blue',
- radioClass : 'iradio_square-blue',
- increaseArea : '20%'
- });
我們可以對上面列出的任何class重置樣式。藉助iCheck自定義圖示後的效果：
- {
- 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: ''
- }
iCheck面板
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 //紫色
（請自行下載這些面板包）
iCheck初始化
首先，引入jQuery庫檔案
其次，引入jquery.icheck.js外掛檔案
（如果要引入相關面板，則需引入：相關主題顏色.css檔案）
iCheck回撥事件 iCheck支援所有選擇器（selectors），並且只針對複選框checkbox和單選radio按鈕起作用 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){ //ifCreated 事件應該在外掛初始化之前繫結
- alert(event.type + ' callback');
- });
bootstrap iCheck中的radio和checkbox的大小可以調整嗎？
- .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;
- }
如果要調整icheck的radio或checkbox樣式，通過上面的css修改width和height，同時修改blue.png圖片對應的尺寸。