Bootstrap 开关(switch)使用整理
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)使用整理的更多相关文章
- vue.js开发之开关(switch)组件
最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role=&quo ...
- Android学习笔记-开关按钮ToggleButton和开关Switch
本节给大家介绍的Android基本UI控件是:开关按钮ToggleButton和开关Switch,这两个其实都是开关组件,只是后者需要在Android 4.0以后才能使用 所以AndroidManif ...
- 【转】Bootstrap FileInput中文API整理
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...
- Bootstrap 开关(switch)控件需要注意的问题
远程文档地址:http://www.bootcss.com/p/bootstrap-switch/ 先上lz遇到的小坑:自古无图无真相的原则 上面代码注释掉后 就是下面这个图片效果!然后加载顺序也要注 ...
- 状态开关按钮(ToggleButton)和开关(Switch)
ToggleButton支持的XML属性及相关方法1.android:checked----->setChecked(boolean) ----->设置该按钮是否被选中2.android: ...
- Bootstrap FileInput中文API整理
这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...
- Bootstrap 栅格系统简单整理
Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...
- layui开关switch显示不全问题
先看效果: 开关显示不全,高度也不对称. 解决: 在所用到的html/jsp中自己加css .layui-form-switch { width: 52px; height: 23px; } 再看效果 ...
- bootstrap期末考试习题整理
1.Which is true about Bootstrap? A. Bootstrap is the most popular and powerful front-end (HTML, CSS, ...
随机推荐
- vue 从入门到精通(二)
上一篇总结了一些vue的理论知识,如果你没看懂的话--那返回去继续去看啊!反正我要开始第二篇了. vue提供了大量的指令,比如:v-if,v-bind,v-on--太多,多写项目,多看API,这里就不 ...
- windows7 安装TensorFlow
Win7 TensorFlow安装步骤: 1.安装python,参考http://www.zhimengzhe.com/windows/283058.html#0-tsina-1-12530-3972 ...
- c#public、private、protected、internal、protected internal修饰符及访问权限
c#public.private.protected.internal.protected internal修饰符及访问权限 public 公有访问.不受任何限制. private 私有访问.只限于本 ...
- hive1.2.2部署
1.解压hvie.tar,进入conf目录下,cp hive-default.xml.template hive-site.xml; 2.将hive下的新版本jline的JAR包拷贝到hadoop下: ...
- 数据分析基础之Linalg的使用
Linear algebra 简介 When SciPy is built using the optimized ATLAS LAPACK and BLAS libraries, it has ve ...
- spring mvc常用注解的说明
最近一段时间学习了springboot,所以熟悉一下mvc中常用的注解,这样可以方便开发 简介: @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类 ...
- 初入WebService
搭建webservice需要用到的jar applicationContext.xml配置文件 <?xml version="1.0" encoding="UTF- ...
- form 表单处理
submit相关 当使用 submit 按钮或者 image 或者button type="submit" 来提交表单时,会触发 submit 事件,但是直接javascri ...
- spring cloud+dotnet core搭建微服务架构:Api授权认证(六)
前言 这篇文章拖太久了,因为最近实在太忙了,加上这篇文章也非常长,所以花了不少时间,给大家说句抱歉.好,进入正题.目前的项目基本都是前后端分离了,前端分Web,Ios,Android...,后端也基本 ...
- ligerUI---ligerGrid中treegrid(表格树)的使用
写在前面: 表格树是在普通ligerGrid的基础上,做了一点改变,使数据以表格树的形式显示出来,适用于有级别的数据比如菜单(有父菜单,父菜单下面有子菜单).表格树的显示有两种方法,可以根据自己的项目 ...