1.在JS里根据指定的 1或者0 或者其它值让按钮变成 on 或者 off (通常需要根据数据库查询的结果初始化开关的状态)

(--开关插件包 bootstrap-switch.min.js)

<div class="make-switch" data-on-label="开" data-off-label="关" id="toggle-state-switch" data-on="success" data-off="warning">
<input id ="toggle" type="checkbox" checked="checked" class="toggle" />
</div> function changeState(stateValue){
if(stateValue==1){
$('#toggle-state-switch').bootstrapSwitch('setState', true);
}else{
$('#toggle-state-switch').bootstrapSwitch('setState', false);
}
}

tip:

--文本设置

data-on-label="开"

data-off-label="关"

--颜色设置(5种:info success warning danger primary)

data-on="success" data-off="warning"

2.改变开关状态,获取开关的值

$('#toggle-state-switch').on('switch-change', function (e, data) {
var $el = $(data.el);
var value = data.value;
});

Bootstrap 开关(switch)使用整理的更多相关文章

  1. vue.js开发之开关(switch)组件

    最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role=&quo ...

  2. Android学习笔记-开关按钮ToggleButton和开关Switch

    本节给大家介绍的Android基本UI控件是:开关按钮ToggleButton和开关Switch,这两个其实都是开关组件,只是后者需要在Android 4.0以后才能使用 所以AndroidManif ...

  3. 【转】Bootstrap FileInput中文API整理

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  4. Bootstrap 开关(switch)控件需要注意的问题

    远程文档地址:http://www.bootcss.com/p/bootstrap-switch/ 先上lz遇到的小坑:自古无图无真相的原则 上面代码注释掉后 就是下面这个图片效果!然后加载顺序也要注 ...

  5. 状态开关按钮(ToggleButton)和开关(Switch)

    ToggleButton支持的XML属性及相关方法1.android:checked----->setChecked(boolean) ----->设置该按钮是否被选中2.android: ...

  6. Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...

  7. Bootstrap 栅格系统简单整理

    Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...

  8. layui开关switch显示不全问题

    先看效果: 开关显示不全,高度也不对称. 解决: 在所用到的html/jsp中自己加css .layui-form-switch { width: 52px; height: 23px; } 再看效果 ...

  9. bootstrap期末考试习题整理

    1.Which is true about Bootstrap? A. Bootstrap is the most popular and powerful front-end (HTML, CSS, ...

随机推荐

  1. JAVA基础知识总结:七

    一.面向对象编程 1.什么是面向对象? 万物皆对象 案例一:我想吃大盘鸡 面向过程 面向对象 1.我自己去买一只鸡 1.委托一个会砍价的人去帮忙买鸡 2.我自己宰鸡 2.委托一个胆大的人宰鸡 3.我自 ...

  2. Yii2之行为

    Yii三大特性:属性.事件.行为.前面两篇文章已经分别讲解了属性和事件,本文接着讲讲yii的行为,分析yii行为的实现原理. 在yii中,一个对象绑定了行为之后,就拥有了所绑定行为拥有的所有事件,而且 ...

  3. session文件无法并发操作

    session_start():打开服务器上的session文件. session_commit():会把$_SESSION数组的内容写入到服务器上的session文件中,但不会清空$_SESSION ...

  4. .13-Vue源码之patch(3)(终于完事)

    怎么感觉遥遥无期了呀~这个源码,跑不完了. 这个系列写的不好,仅作为一个记录,善始善终,反正也没人看,写着玩吧! 接着上一节的cbs,这个对象在初始化应该只会调用create模块数组方法,简单回顾一下 ...

  5. JSON.stringify实战用法

    1.首先定义一个数组 var teamPlanMinList = new Array(); 2. 定义一个json对象 var json = { "plname":plname, ...

  6. 暑假练习赛 006 E Vanya and Label(数学)

    Vanya and LabelCrawling in process... Crawling failed Time Limit:1000MS     Memory Limit:262144KB    ...

  7. Codeforces 376B. Coupons and Discounts

    B. Coupons and Discounts time limit per test 1 second memory limit per test 256 megabytes input stan ...

  8. Java的DAO设计模式

    用java的DAO模式实现对一个学生实体的增加,查询操作. 1.建立一个学生实体类 Student.java public class Student { private String sid; pr ...

  9. python的xlwt模块的常用方法

    工作中需要导出数据为excel格式,使用了xlwt模块,在此记录一下用到的内容. 1. 创建一个表,设置一个sheet import xlwt workbook = xlwt.Workbook(enc ...

  10. Datatable转换为Json

    /// <summary> /// Datatable转换为Json /// </summary> /// <param name="table"&g ...