Bootstrap-用ICheck插件给CheckBox换新装
上一篇文章讲到了在Bootstrap框架下如何建立一个漂亮的树形菜单。漂亮的菜单是建立了,但是现在却有一个实际的需求:在每个菜单前面添加一个复选框,用来勾选一些需要的数据。 下面是添加上复选框以后的树形菜单效果: 这样看起来有种驴唇不对马嘴的感觉。 通过查询得知,有个叫ICheck的第三方Bootstrap插件,专门用于给复选框,单选框添加漂亮的样式。 可以查看官方网站:http://www.bootcss.com/p/icheck/ 进行了解。 最简皮肤 Square皮肤 Flat皮肤 Polaris 皮肤 下面以Square皮肤为例,说明如何应用这个插件:
//给单选框复选框添加样式
$('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提供了一些方法可以实现通过编程方式改变输入框状态:比如, 下面这幅图是使用ICheck插件后树形菜单的样式: 这样看起来还算是比较搭配的。 最近一直在使用Bootstrap这个框架,整体感觉还是挺不错的,非常高效,美观。不过要实现一些特性的功能时还需要去寻找一些第三方的Bootstrap插件。现在第三方插件也是越来越多,功能越来越丰富了。 这里提供了50个Bootstrap插件供大家学习使用:http://www.oschina.net/news/56950/jquery-bootstrap-plugins-for-your-next-projects (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |