表单/表格
复选框Checkbox元素美化jQuery插件
PetitQ
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"
});
Github 地址：https://github.com/joelthorner/Simple-bt-checks
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
