首页 > 分享 > Bootstrap Switch（开关控件）简易使用

Bootstrap Switch（开关控件）简易使用

花匠小妙招
2024-12-29 17:16

Bootstrap Switch ：通过复选框美化实现的一款开关控件

官方网站 http://www.bootcss.com/p/bootstrap-switch/

项目当中美化按钮，本来想使用honeySwith的，但是它的class跟项目class冲突，所以选择Bootstrap Switch ；

先是导入文件，js,css不用下载

jsp:

/* bootstrap开关控件，初始化 */
$(function(){
/* 初始化控件 */
$(".checkbox").bootstrapSwitch({
onText : "上线", // 设置ON文本
offText : "下线", // 设置OFF文本
onColor : "success",// 设置ON文本颜色 (info/success/warning/danger/primary)
offColor : "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary)
size : "mini", // 设置控件大小,从小到大 (mini/small/normal/large)
handleWidth:"35",//设置控件宽度
// 当开关状态改变时触发
onSwitchChange : function(event, state) {
var ProductId = event.target.defaultValue;
if (state == true) {
//上线
updateProductStatus(ProductId,'AOB');
/* alert("ON"); */
} else {
//下线
updateProductStatus(ProductId,'AOC');
/* alert("OFF"); */
}
}
});
});

项目实际应用中，开关控件样式改变必然会操作数据库，来更新数据状态，所以为了拿到数据的id,我在属性上面加上了value，来拿到要改数据的id值，而这个值，我在debugger中，看到值在target中的defaultValue；所以上面我有了var ProductId = event.target.defaultValue;

要改控件属性也可以直接将属性写在html中，下面罗列bootstrap-switch的属性及应用。

bootstrap-switch属性 js属性名html属性名类型描述取值范围默认值statecheckedBoolean选中状态true、falsetruesizedata-sizeString开关大小null、mini、small、normal、largenullanimatedata-animateBoolean动画效果true、falsetruedisableddisabledBoolean禁用开关ture、falsefalsereadonlyreadonlyBoolean开关状态只读，不能修改true、falsefalseindeterminatedata-indeterminateBoolean模态true、falsefalseinversedata-inverseBoolean颠倒开关顺序true、falsefalseradioAllOffdata-radio-all-offBoolean允许单选按钮被用户取消选中true、falsefalseonColordata-on-colorString左侧开关颜色primary、info、success、warning、danger、defaultprimaryoffColordata-off-colorString右侧开关颜色primary、info、success、warning、danger、defaultdefaultonTextdata-on-textString左侧开关显示文本StringONoffTextdata-off-textString右侧开关显示文本StringOFFlabelTextdata-label-textString开关中间显示文本String handleWidthdata-handle-widthString|Number开关左右2侧的宽度String|NumberautolabelWidthdata-label-widthString|Number开关中间的宽度String|NumberautobaseClassdata-base-classString开关基础样式Stringbootstrap-switchwrapperClassdata-wrapper-classString | Array元素样式容器String | ArraywrapperonInit function初始化开关Functionfunction（event，state）｛｝onSwitchChange function当开关状态改变时触发Functionfunction（event，state）｛｝

覆盖全局默认值：

$.fn.bootstrapSwitch.defaults.size = 'large';

$.fn.bootstrapSwitch.defaults.onColor = 'success';

示例图：