表单/表格

复选框Checkbox元素美化jQuery插件

也想出现在这里?联系我们
创客云

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <p id="sizes-x">
  2.   <span class="checkbox" style="display: inline">
  3.     <label> <input type="checkbox"></label>
  4.   </span>
  5.   <span class="checkbox" style="display: inline">
  6.     <label> <input type="checkbox" value="x" checked=""></label>
  7.   </span>
  8. </p>

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

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

复选框的颜色

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

  1. $('.color_1 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); 
  2. // default bt class: 'btn btn-default'
  3.  
  4. $('.color_2 input[type="checkbox"]').simpleBtChecks({ 
  5.   size: 'x-2',
  6.   class : 'btn btn-primary'
  7. });
  8. $('.color_3 input[type="checkbox"]').simpleBtChecks({ 
  9.   size: 'x-2',
  10.   class : 'btn btn-success'
  11. });
  12. $('.color_4 input[type="checkbox"]').simpleBtChecks({ 
  13.   size: 'x-2',
  14.   class : 'btn btn-info'
  15. });
  16. $('.color_5 input[type="checkbox"]').simpleBtChecks({ 
  17.   size: 'x-2',
  18.   class : 'btn btn-warning'
  19. });
  20. $('.color_6 input[type="checkbox"]').simpleBtChecks({ 
  21.   size: 'x-2',
  22.   class : 'btn btn-danger'
  23. });
  24. $('.color_7 input[type="checkbox"]').simpleBtChecks({ 
  25.   size: 'x-2',
  26.   class : 'btn btn-link'
  27. });

回调事件

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

onLoadSbtc:为每一个 input 都插件一个 node 节点

beforeChange:在复选框状态改变之前触发,返回一个布尔值和一个 nodeElement 元素

afterChange:在复选框状态改变之后触发,返回一个布尔值和一个 nodeElement 元素

自定义图标

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

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

Github 地址:https://github.com/joelthorner/Simple-bt-checks

资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址
收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!