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. js页面间通信方法(storage事件)(浏览器页面间通信方法)

    在写页面的时候有时会遇到这样的需求,需要两个页面之间传递数据或者一个事件.这个时候,就需要用到我今天所要讲的storage事件,学习这个事件之前,需要先了解localStorage的用法.具体用法可以 ...

  2. OOAD-设计模式(二)之GRASP模式与GOF设计模式概述

    一.GRASP模式(通用责任分配软件模式)概述 1.1.理解责任 1)什么是责任 责任是类间的一种合约或义务,也可以理解成一个业务功能,包括行为.数据.对象的创建等 知道责任——表示知道什么 行为责任 ...

  3. LeetCode 107. Binary Tree Level Order Traversal II (二叉树阶层顺序遍历之二)

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  4. MySql数据库的基本原理及指令

    1.什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库中的数据进行增加,修改,删除及查询操作. 2.简介 MySQL是一个开放源 ...

  5. 一起来学linux:NFS服务器搭建

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } nfs是network file system的缩写,作用在于让不同的网络,不同的机 ...

  6. 使用SQL Server2014作业定时执行无参的存储过程

    一.存储过程 1.新建存储过程 按照下图找到存储过程,右键“新建”选择”存储过程” 此时在右侧会打开一个窗口,如下图. 2.填写创建存储过程语句 填写存储过程名称,因为是无参的存储过程,所以把参数部分 ...

  7. Bower+grunt-wiredep自动注入包到html

    以安装jquery为例 1.假设已经通过npm安装好了bower和grunt-wiredep,以及grunt-contrib-watch(用来观察文件变动) 在gruntfile.js文件中增加任务 ...

  8. 深度学习系列 Part(3)

    这是<GPU学习深度学习>系列文章的第三篇,主要是接着上一讲提到的如何自己构建深度神经网络框架中的功能模块,进一步详细介绍 Tensorflow 中 Keras 工具包提供的几种深度神经网 ...

  9. ASP.NET没有魔法——ASP.NET Identity的加密与解密

    前面文章介绍了如何使用Identity在ASP.NET MVC中实现用户的注册.登录以及身份验证.这些功能都是与用户信息安全相关的功能,数据安全的重要性永远放在第一位.那么对于注册和登录功能来说要把密 ...

  10. continous integration environment (Jenkins and bitbucket configuration)

    ================================================================================ continous integrati ...