(转载)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

看来官方首页说的专为移动设备打造，并非虚言啊！

转载于:https://www.cnblogs.com/shhxpump/p/3501542.html