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

当前位置:主页 > jQuery库 > 表单 > 基于Bootstrap3的Checkbox元素美化jQuery插件
基于Bootstrap3的Checkbox元素美化jQuery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-01-08
    阅读:
简要教程

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