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

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

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

tip:

--文本设置

data-on-label="开"

data-off-label="关"

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

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

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

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

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. linux命令行下svn常用命令

    linux命令行下svn常用命令 1. 将文件checkout到本地目录 1 #path是服务器上的目录 2 svn checkout path 3 4 #示例 5 svn checkout svn: ...

  2. $(window).on("load",function(){} 和 $(document).ready(function() {}

    $(window).on("load",function(){ //页面属性,图片,内容完全加载完,执行 } $(document).ready(function() { 或者$( ...

  3. eval函数的坑

    开发工作中遇到这样一种情形,需要执行用户输入的php代码串,于是决定使用eval函数.coding大概示例如下: function getStr($str) { return strlen($str) ...

  4. expected single matching bean but found 2

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'acc ...

  5. CTS/GTS 常见问题解答

    1.android.security.cts.PackageSignatureTest测试fail(MTK平台) 原因:由于用的是google default key而导致的fail,需要自己定义re ...

  6. Python爬虫入门:Urllib库的高级使用

    1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...

  7. vue 响应式原理

    Vue 采用声明式编程替代过去的类 Jquery 的命令式编程,并且能够侦测数据的变化,更新视图.这使得我们可以只关注数据本身,而不用手动处理数据到视图的渲染,避免了繁琐的 DOM 操作,提高了开发效 ...

  8. WebService--axis

    axis WebService虽然现在已经很少使用,但是还是把它的配置过程写出来,开发环境jdk 1.6 服务端: 1,导入需要jar包,自行下载 2,创建WebService接口 public in ...

  9. Scrum Meeting Alpha - 10

    Scrum Meeting Alpha - 10 NewTeam 2017/11/06 地点:主楼和3号楼之间的走廊2楼 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了对涉及内容修改的API的 ...

  10. HTTPCLIENT 模拟登陆

    第一步构建忽略https验证的httpclient public static CloseableHttpClient getHttpClient() throws Exception { SSLCo ...