转载

基于Bootstrap3的Checkbox元素美化jQuery插件

简要教程

Simple-bt-checks是一款基于Bootstrap3的Checkbox元素美化jQuery插件。通过该插件可以轻松的制作各种尺寸、颜色的复选框按钮，并且可以自定义复选框选中时的图标，以及完全自定义复选框的样式。

查看演示 下载插件

使用方法

复选框的尺寸

要使用不同尺寸的复选框，可以使用下面的HTML结构来生成复选框。

<p id="sizes-x">   <span class="checkbox" style="display: inline">     <label> <input type="checkbox"></label>   </span>   <span class="checkbox" style="display: inline">     <label> <input type="checkbox" value="x" checked=""></label>   </span> </p>

然后使用下面的jQuery代码来初始化，在size参数中设置不同的尺寸。

$('#sizes-1 input[type="checkbox"]').simpleBtChecks();//默认尺寸 $('#sizes-2 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); $('#sizes-3 input[type="checkbox"]').simpleBtChecks({ size: "x-3" });

复选框的颜色

可以通过class参数来设置不同的复选框颜色。

$('.color_1 input[type="checkbox"]').simpleBtChecks({ size: "x-2" });  // default bt class: 'btn btn-default'   $('.color_2 input[type="checkbox"]').simpleBtChecks({    size: 'x-2',   class : 'btn btn-primary' }); $('.color_3 input[type="checkbox"]').simpleBtChecks({    size: 'x-2',   class : 'btn btn-success' }); $('.color_4 input[type="checkbox"]').simpleBtChecks({    size: 'x-2',   class : 'btn btn-info' }); $('.color_5 input[type="checkbox"]').simpleBtChecks({    size: 'x-2',   class : 'btn btn-warning' }); $('.color_6 input[type="checkbox"]').simpleBtChecks({    size: 'x-2',   class : 'btn btn-danger' }); $('.color_7 input[type="checkbox"]').simpleBtChecks({    size: 'x-2',   class : 'btn btn-link' });

回调事件

该复选框美化插件有3个可用的回调函数：

onLoadSbtc：为每一个input都插件一个node节点。
beforeChange：在复选框状态改变之前触发，返回一个布尔值和一个nodeElement元素。
afterChange：在复选框状态改变之后触发，返回一个布尔值和一个nodeElement元素。

自定义图标

复选框选中状态的图标是可以自定义的，通过icon参数来自定义图标，例如下面的代码：

$('input[type="checkbox"]').simpleBtChecks ({   size: "default",   class: "btn btn-default",   icon : "glyphicon glyphicon-heart-empty" });

Simple-bt-checks复选框美化插件的github地址为： https://github.com/joelthorner/Simple-bt-checks

来源：jQuery之家

原文 http://www.html5cn.org/article-9236-1.html

正文到此结束

所属分类：编程技术

本文标签： value HTML https 代码 git HTML5 下载 node GitHub http src Bootstrap 参数 UI 插件 jquery
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

基于Bootstrap3的Checkbox元素美化jQuery插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流