网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Bootstrap Checkbox是一个jQuery/Bootstrap的一个插件,它能将一个普通的复选框转换成一个漂亮的切换按钮控件。适用于最新的bootstrap4框架。
1. 在html页面中引入jquery库,bootstrap框架。
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
2. 引入 Bootstrap Checkbox插件文件。
<script src="/path/to/bootstrap-checkbox.js"></script>
3. 初始化插件。
$(function() {
$('input[type="checkbox"]').checkboxpicker({
// OPTIONS
});
});
4. 可以通过data-*属性或JavaScript传递配置选项。来设置Checkbox空间,如下所示:
$('input[type="checkbox"]').checkboxpicker({
// button group class
baseGroupCls: 'btn-group',
// button class
baseCls: 'btn',
// group class
groupCls: null,
// extra class(es)
cls: null,
// default class
offCls: 'btn-default',
// on class
onCls: 'btn-default',
// active class for off state
offActiveCls: 'btn-danger',
// active class for on state
onActiveCls: 'btn-success',
// custom label
offLabel: 'No',
onLabel: 'Yes',
// shows off/on titles
offTitle: false,
onTitle: false,
// icon class
iconCls: 'glyphicon',
// event key codes:
// 13: Return
// 32: Spacebar
toggleKeyCodes: [13, 32],
// warning message
warningMessage: 'Please do not use Bootstrap-checkbox element in label element.'
});
5. 监听状态改变。
$('input[type="checkbox"]').on('change', function() {
// do something
});
6. 切换复选框状态。
// uncheck the checkbox
$('input[type="checkbox"]').prop('checked', false);
// disable the checkbox
$('input[type="checkbox"]').prop('disabled', true);
转载请注明来源:jQuery+Bootstrap 单选框(Checkbox)美化为切换按钮插件
本文永久链接地址:https://www.moyouyouw.cn/code/681.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论