当前位置:JS特效 » 表单特效 » simsCheckbox无序列表转换jquery插件
 simsCheckbox无序列表转换jquery插件
如果您觉得内容不错,请分享:

插件介绍

simsCheckbox是一款可以将普通的html无序列表转换为bootstrap样式的checkbox列表的jquery插件。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:69
简要教程

simsCheckbox是一款可以将普通的html无序列表转换为bootstrap样式的checkbox列表的jquery插件。

使用方法

在页面中引入bootstrap样式文件,jquery和simsCheckbox.css,以及simsCheckbox.js文件。






                
HTML结构

无序列表的HTML结构如下:

  • Jamie Blue
  • Mike Tennis
  • Quentin Hiker

可以通过设置disabled class来禁用某个列表项。

  • Jamie Blue
  • Mike Tennis
  • Quentin Hiker
初始化插件

在页面DOM元素加载完毕之后,通过simsCheckbox()方法来初始化该插件。

$(document).ready(function (){
    $(".sims-batch-students").simsCheckbox();
});             
                

无序列表转换前:

无序列表转换前的效果

无序列表转换后:

无序列表转换后的效果

配置参数

simsCheckbox插件的可用配置参数有:

参数 类型 默认值 描述
btnStyle string 'checkbox' 列表是转换为checkbox还是radio。
height string 'auto' 设置列表的高度。
element string 'li' 设置要被转换的html元素。
titleIcon string 'square-o' 设置checkbox的图标。它是Font Awesome字体图标的名称。可选值有:'circle','circle-o','square','square-o'。
uncheckedClass string 'btn-default' 设置未选择的checkbox的class名称。可选值有:btn-default, btn-info, btn-warning, btn-danger, btn-primary。
checkedClass string 'btn-warning' 设置选择后的checkbox的class名称。可选值有:btn-default, btn-info, btn-warning, btn-danger, btn-primary。
selectAllBtn boolean false 设置是否在列表底部添加 "全选/全不选" 复选框。
selectAllText string 'Select/Unselect All' 设置"全选/全不选"的标题。
ifChecked function null 列表被选择后的回调函数。
ifUnChecked function null 列表被取消选择后的回调函数。
ifToggled function null 列表切换选择项时的回调函数。

simsCheckbox插件的github地址为:https://github.com/simsek97/simsCheckbox

Top