Icheck

通过查询得知,有个叫ICheck的第三方Bootstrap插件,专门用于给复选框,单选框添加漂亮的样式。

可以查看官方网站:http://www.bootcss.com/p/icheck/ 进行了解。 
ICheck插件提供几套非常好看的皮肤,供咱们选择。

最简皮肤 
技术分享

Square皮肤 
技术分享

Flat皮肤 
技术分享

Polaris 皮肤 
技术分享

下面以Square皮肤为例,说明如何应用这个插件:

  1. 下载: https://github.com/fronteed/iCheck/ 下载ICheck插件的压缩包。
  2. 拷贝:把icheck.js、blue.css、blue.png、blue@2x.png这一套文件拷贝到项目目录下
  3. 引用:添加对icheck.js文件和blue.css文件的引用。<link href="blue.css" rel="stylesheet">和 <script src="icheck.js"></script>
  4. JS:在html中添加一段JS代码
//给单选框复选框添加样式
  $(input).iCheck({
    checkboxClass: icheckbox_square-blue,
    radioClass: iradio_square-blue,
    increaseArea: 20%‘ // optional
  });

注意:blue.css、blue.png、blue@2x.png,这三个文件保证了皮肤为蓝色,更换其他颜色需要同时更换这三个文件。

特别注意:事件绑定! Icheck把CheckBox和ComboBox的事件名称进行了更改。这点要特别注意,见下图:
技术分享

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

$(input).on(ifChecked, function(event){
  alert(event.type +  callback);
});

还有ICheck提供了一些方法可以实现通过编程方式改变输入框状态:比如, 
$(‘input‘).iCheck(‘check‘); — 将输入框的状态设置为checked 
$(‘input‘).iCheck(‘uncheck‘); — 移除 checked 状态 

等等。

大爷,请赏我点铜板买喵粮自己吃,您的支持将鼓励我继续创作!(支付宝)

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值