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插件表单美化效果图

使用方法:
  1. $('input').iCheck('check');   //将输入框的状态设置为checked
  2. $('input').iCheck('uncheck'); //移除 checked 状态
  3. $('input').iCheck('toggle');  //toggle checked state
  4. $('input').iCheck('disable'); //将输入框的状态设置为 disabled
  5. $('input').iCheck('enable');  //移除 disabled 状态
  6. $('input').iCheck('update');  //apply input changes, which were done outside the plugin
  7. $('input').iCheck('destroy'); //移除iCheck样式
 
调用iCheck时,只需要将修改了默认值的参数列出来即可:
 
  1. //基础使用方法
  2. $('input').iCheck({
  3. labelHover : false,
  4. cursor : true,
  5. checkboxClass : 'icheckbox_square-blue',
  6. radioClass : 'iradio_square-blue',
  7. increaseArea : '20%'
  8. });
下面是参数列表及其默认值:
 
  1. {
  2. handle: '',
  3. checkboxClass: 'icheckbox',
  4. radioClass: 'iradio',
  5. checkedClass: 'checked',
  6. checkedCheckboxClass: '',
  7. checkedRadioClass: '',
  8. uncheckedClass: '',
  9. uncheckedCheckboxClass: '',
  10. uncheckedRadioClass: '',
  11. disabledClass: 'disabled',
  12. disabledCheckboxClass: '',
  13. disabledRadioClass: '',
  14. enabledClass: '',
  15. enabledCheckboxClass: '',
  16. enabledRadioClass: '',
  17. hoverClass: 'hover',
  18. focusClass: 'focus',
  19. activeClass: 'active',
  20. labelHover: true,
  21. labelHoverClass: 'hover',
  22. increaseArea: '',
  23. cursor: false,
  24. inheritClass: false,
  25. inheritID: false,
  26. insert: ''
  27. }
我们可以对上面列出的任何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样式被移除

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

  1. $('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
  2. alert(event.type + ' callback');
  3. });

bootstrap iCheck中的radio和checkbox的大小可以调整吗?

  1. .icheckbox_square-blue, .iradio_square-blue {
  2. display: block;
  3. margin: 0;
  4. padding: 0;
  5. width: 22px;
  6. height: 22px;
  7. background: url(blue.png) no-repeat;
  8. border: none;
  9. cursor: pointer;
  10. }

如果要调整icheck的radio或checkbox样式,通过上面的css修改width和height,同时修改blue.png图片对应的尺寸。

iCheck表单美化插件使用方法详解(含参数、事件等)的更多相关文章

  1. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  2. [转]iCheck表单美化插件使用方法详解(含参数、事件等)

    本文转自:http://www.exp99.com/jswz/f2e/1408696007_34.html iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 ...

  3. Python的Django框架中forms表单类的使用方法详解

    用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...

  4. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

  5. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  6. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  7. 我为什么还要造轮子?欠踹?Monk.UI表单美化插件诞生记!

    背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...

  8. Validation-jQuery表单验证插件使用方法

    http://www.cnblogs.com/shuang121/archive/2012/04/23/2466628.html 作用 jquery.validate是jquery旗下的一个验证框架, ...

  9. ExtJs如何判断form表单是否被修改过详解

    1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式)      相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...

随机推荐

  1. java多线程之:线程对象一些api

    一:wait()方法,wait(long timeout)--->锁对象调用wait()方法,让当前线程小a进入等待状态,阻塞住,并让出当先线程拥有的锁.--->直到其他线程用锁对象调用n ...

  2. Thinking Clearly about Performance

    http://queue.acm.org/detail.cfm?id=1854041 The July/August issue of acmqueue is out now acmqueue is ...

  3. Clr core

    http://hllvm.group.iteye.com/group/topic/43559

  4. ServiceStack

    https://github.com/ServiceStack/ServiceStack/wiki/Routing Service Gateway https://github.com/Service ...

  5. UML开始,OOA与OOD以及一个网站

    1.Object-Oriented Analysis(面向对象分析方法)是确定需求或者业务的角度,按照面向对象的思想来分析业务 2.面向对象设计(Object-Oriented Design,OOD) ...

  6. [转]easyui常用控件及样式API中文收藏

    [转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报  分类: java ee(5)  目录(?)[+] CSS类定义: div easyu ...

  7. s2-032批量脚本

    看乌云上许多大牛上脚本,我也写个玩吧!写的比较简单.懒得优化,参数获取就自己改吧 需要抓很多struts,可用爱站工具包或则自己写个脚本爬 #coding:utf8 import urllib2 im ...

  8. linux包之包管理命令rpm-yum

    背景 YUM(Yellow dog Updater, Modified)为多个Linux发行版的前端软件包管理器,例如 Redhat RHEL, CentOS & Fedora. YUM通过调 ...

  9. USACO/gift1

    描述 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人. 然而,在任何一群朋友中 ...

  10. 安卓中Activity的onStart()和onResume()的区别是什么

    知道Activity的四种状态:Active/Runing 一个新 Activity 启动入栈后,它在屏幕最前端,处于栈的最顶端,此时它处于可见并可和用户交互的激活状态. Paused 当 Activ ...