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, ...
随机推荐
- Loadrunner Http接口Get/Post方法性能测试脚本解析
最近使用LoadRunner 11进行了一次完整的Http WEB接口性能测试,下面介绍下Http接口Get/Post方法性能测试脚本通用编写方法. 1. Http接口性能测试基本流程 首先定义了一个 ...
- 求原码、补码,反码(C语言源代码)
#include <stdio.h> #define N 8 //这里你要求是8位 int main(int argc, const char * argv[]) { int binary ...
- React UI 组件库uiw v1.2.8 发布
uiw 高品质的UI工具包,基于React 16+的组件库.
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- Ionic3 一些命令
ionic start --help E:\Projects\ionic>ionic start --help ionic start - Create a new project This c ...
- Codeforces Round #443 (Div. 2) C. Short Program
C. Short Program time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- Thinkphp5 常量设置问题
楼主是之前使用了thinkphp3.2快两年了,很早就听说过thinkphp的版本已经到达5了. 不过鉴于早期的版本尚未完善,并没有立即开始学习.最近做一个项目,尝试一下新的知识. 但是在使用的时候, ...
- AngularJS学习篇(十四)
AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...
- HashMap面试题:90%的人回答不上来
在java面试中集合类似乎已经是绕不开的话题,对于一个中高级java程序员来说如果对集合类的内部原理不了解,基本上面试都会被pass掉.下面从面试官的角度来聊聊一个候选者应该对HashMap了解到什么 ...
- HTTPS协议,TLS协议
一.HTTPS 协议 HTTPS协议其实就是HTTP over TSL,TSL(Transport Layer Security) 传输层安全协议是https协议的核心. TSL可以理解为SSL (S ...