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, ...
随机推荐
- 局部刷新Ajax
1.1.1 Ajax的由来: 如下注册界面 界面在注册的时候,需要用户输入的信息有很多,假如我们将所有的数据都录入后,在点击会员注册按钮,然后将整个页面数据进行提交,此时如果该用户名已经被占用,那么 ...
- LeetCode 566. Reshape the Matrix (重塑矩阵)
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- CentOS6编译LAMP基于FPM模式的应用wordpress
CentOS6编译LAMP基于FPM模式的应用wordpress 引言:其实我们可以直接使用yum安装LAMP(Linux+Apache[httpd]+Mysql+PHP),比手动编译安装LAMP要简 ...
- 实验排队功能实现(JAVA)
1.功能要求 实验室有固定台数的设备供学生通过网络连接进行实验,一台设备只能同时被一个用户使用,一个用户只能占用一台设备. 下面是一个功能的简图: 2.实现方案 2.1 初始化 在项目启动之后,开始进 ...
- 在CentOS 7.3 中安装 NVIDIA GT730 显卡驱动
主机: Dell OptiPlex 390 MT (i5) 系列: 显卡: 技嘉(GIGABYTE) GV-N730D5-2GI 902MHz/5000MHz 2GB/64bit GDDR5 显卡 ( ...
- 改变 font Awesome、Ionic 图标属性
可使用 -webkit-text-stroke属性. 例如: -webkit-text-stroke:1px red 使用color属性,可改变 图标颜色: 例如: color: red: 使用fon ...
- iOS之ViewController的多层presentViewController的dismiss问题
今天在Q群里有人问了个这么个问题: A,B,C,D 都是Viewcontroller.A.B.C.D使用present去切的 他是这么搞的: A -> B, B ->C, C->D, ...
- sphinx实时索引和高亮显示
sphinx实时索引和高亮显示 时间 2014-06-25 14:50:58 linux技术分享 -欧阳博客 原文 http://www.wantlearn.net/825 主题 Sphinx数据 ...
- Turn the corner
Turn the corner Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- body.clientHeight与documentElement.clientHeight
body上的clientHeight会对着内容区域的高度变化而变化,当内容只有100px,则body上只有100px被撑起,返回的clientHeight为100: documentElement.c ...