(轉載)iCheck.js：超級棒的jQuery庫和Zepto庫插件

iCheck.js的做用：

看圖說話

icheck-js-for-jquery-and-zepto

用於單選框Radio和複選框Checkbox的UI。

iCheck.js特性：

支持不一樣的瀏覽器和設備 - 臺式機和移動

觸摸操做支持 - IOS ， Android，黑莓， Windows Phone的

支持鍵盤輸入 - TAB鍵，空格鍵，箭頭向上/向下和其餘快捷鍵

自由定製 - 使用任何HTML和CSS樣式輸入（嘗試6視網膜就緒皮膚）

jQuery和的Zepto JavaScript庫支持

輕量的大小 - 壓縮後僅有1 KB

31種設置來定製複選框和單選按鈕；

11種回調處理方式；

9種可編程的改變方式；

保存原有的輸入。

iCheck.js應用：

頁面首先要包含jQuery v1.7以上版本，國內的推薦使用又拍雲jQuery加速，網址本身搜一下吧。下載包含有一個skin文件夾，下面有6套皮膚，每套皮膚有10種配色方案，這些均可以用、也能夠改後再用。

         <div class="demo-list clear">  
           <ul>  
             <li>  
               <input tabindex="1" type="checkbox" id="輸入-1">  
               <label for="input-1">複選框, <span>#輸入-1</span></label>  
             </li>  
             <li>  
               <input tabindex="2" type="checkbox" id="輸入-2" checked>  
               <label for="input-2">複選框, <span>#輸入-2</span></label>  
             </li>  
           </ul>  
           <ul>  
             <li>  
               <input tabindex="3" type="radio" id="輸入-3" name="demo-radio">  
               <label for="input-3">單選按鈕, <span>#輸入-3</span></label>  
             </li>  
             <li>  
               <input tabindex="4" type="radio" id="輸入-4" name="demo-radio" checked>  
               <label for="input-4">單選按鈕, <span>#輸入-4</span></label>  
             </li>  
           </ul>  
           <script>  
           $(document).ready(function(){   
             var callbacks_list = $('.demo-callbacks ul');//定義復callbacks ul的class   
    //下面開始監視並回調   
             $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){   
               callbacks_list.prepend('<li><span>#' + this.id + '</span> 已被 ' + event.type.replace('if', '').toLowerCase() + '</li>');   
             }).iCheck({   
               checkboxClass: 'icheckbox_square-blue',//定義複選框的Class   
               radioClass: 'iradio_square-blue',//定義單選框的Class   
               increaseArea: '20%'//position: absolute;的top與bottom的值   
             });   
           });   
           </script>  
         </div>  

 

在與Zepto庫一塊兒用的時候，只須要使用zepto.icheck.js文件，而不是jquery.icheck.js就OK了！

下面說下Zepto庫：

Zepto

 

這是一個專爲WebKit瀏覽器(Safari、Chrome等)開發的一個JavaScript框架。超輕量級的，只有5KB，重要的是它的語法借鑑併兼容jQuery，這是個好消息哦！

其官方網站首頁上明確說明與jQuery兼容，不是用來替代jQuery的，而是爲了讓你有個更輕量級的庫、更多的插件可用。

支持的瀏覽器：

桌面的：

Safari 5+ (Mac, Win)

Chrome 5+ (Win, Mac, Linux, Chrome OS)

Mozilla Firefox 4+ (Win, Mac, Linux)

Opera 10+ (Win, Mac, Linux)

移動設備上的：

iOS 4+ Safari

Chrome for Android

Chrome for iOS

Android 2.2+ Browser

webOS 1.4.5+ Browser

BlackBerry Tablet OS 1.0.7+ Browser

Amazon Silk 1.0+

Firefox for Android

Firefox OS Browser

Practically any WebKit-based browsers/runtimes

看來官方首頁說的專爲移動設備打造，並不是虛言啊！