simsCheckbox无序列表转换jquery插件

ops/2024/12/22 18:50:35/

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

在这里插入图片描述
在线演示 下载

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

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/simsCheckbox.css" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/simsCheckbox.js" type="text/javascript"></script>

HTML结构
无序列表的HTML结构如下:

<ul class="sims-batch-students"><li>Jamie Blue</li><li>Mike Tennis</li><li class="checked">Quentin Hiker</li>
</ul>

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

<ul class="sims-batch-students"><li class="disabled">Jamie Blue</li><li>Mike Tennis</li><li class="checked">Quentin Hiker</li>
</ul>

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

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

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

参数类型默认值描述
btnStylestring'checkbox'列表是转换为checkbox还是radio。
heightstring'auto'设置列表的高度。
elementstring'li'设置要被转换的html元素。
titleIconstring'square-o'设置checkbox的图标。它是Font Awesome字体图标的名称。可选值有:'circle','circle-o','square','square-o'。
uncheckedClassstring'btn-default'设置未选择的checkbox的class名称。可选值有:btn-default, btn-info, btn-warning, btn-danger, btn-primary。
checkedClassstring'btn-warning'设置选择后的checkbox的class名称。可选值有:btn-default, btn-info, btn-warning, btn-danger, btn-primary。
selectAllBtnbooleanfalse设置是否在列表底部添加 "全选/全不选" 复选框。
selectAllTextstring'Select/Unselect All'设置"全选/全不选"的标题。
ifCheckedfunctionnull列表被选择后的回调函数。
ifUnCheckedfunctionnull列表被取消选择后的回调函数。
ifToggledfunctionnull列表切换选择项时的回调函数。

http://www.ppmy.cn/ops/144095.html

相关文章

【论文阅读】Deep Neural Network Pruning Using Persistent Homology

摘要和介绍 PHPM按照神经元之间的组合效应的大小的升序对DNN进行删减&#xff0c;以防止精度的下降&#xff0c;其中神经元之间的组合效应是利用一维PH计算的。 已经表明PH有利于分析DNN中知识的内部表示[6]&#xff0c;[23]。 [6] C. Corneanu, M. Madadi, S. Escalera, and…

基于SpringBoot的“家具销售电商平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“家具销售电商平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 管理员登录界面 管理员功能界面 家具分类管理…

提示词工程-Prompt Engineering

引 言 prompt&#xff08;提示词&#xff09;是我们和LLM互动最常用的方式&#xff0c;我们提供给LLM的Prompt作为模型的输入&#xff0c;并希望LLM反馈我们期待的结果。 虽然LLM的功能非常强大&#xff0c;但LLM对提示词&#xff08;prompt&#xff09;也非常敏感。这使得提…

算法题(11):R格式

审题&#xff1a; 由于该题的数据值非常大&#xff0c;所以我们需要使用高精度计算法&#xff0c;简单来说就是先把数据通过字符串存储&#xff0c;然后转换到int型数组&#xff0c;对数据每一位分别进行乘法运算&#xff0c;然后循环进位 思路&#xff1a; &#xff08;1&…

Python7-数据结构

记录python学习&#xff0c;直到学会基本的爬虫&#xff0c;使用python搭建接口自动化测试就算学会了&#xff0c;在进阶webui自动化&#xff0c;app自动化 python基础7-数据结构的那些事儿 常见的数据结构有哪些&#xff1f;线性数据结构有哪些&#xff1f;非线性数据结构有哪…

进网许可认证、交换路由设备检测项目更新25年1月起

实施时间 2025年1月1日起实施 涉及设备范围 核心路由器、边缘路由器、以太网交换机、三层交换机、宽带网络接入服务器&#xff08;BNAS&#xff09; 新增检测依据 GBT41266-2022网络关键设备安全检测方法交换机设备 GBT41267-2022网络关键设备安全技术要求交换机设备 GB/…

[oeasy]python054_python有哪些关键字_keyword_list_列表_reserved_words

python有哪些关键字_keyword_list_列表_reserved_words 回忆上次内容 hello world 不是 从来就有的 来自于 c语言 print、小括号 和 双引号 也来自于 c语言 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; python 标识符 的 命名规则 依然 完全 学习…

[手机Linux] 六,ubuntu18.04私有网盘(NextCloud)安装

一&#xff0c;LNMP介绍 LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin/Alibaba/Amazon/Mint/Oracle/Rocky/Alma/Kali/UOS/银河麒麟/openEuler/Anolis OS Linux VPS或独立主机安装LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQ…