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