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, ...
随机推荐
- (转)Java 网络IO编程总结(BIO、NIO、AIO均含完整实例代码)
原文出自:http://blog.csdn.net/anxpp/article/details/51512200 1.BIO编程 1.1.传统的BIO编程 网络编程的基本模型是C/S模型,即两个进程间 ...
- LeetCode 27. Remove Element (移除元素)
Given an array and a value, remove all instances of that value in place and return the new length. D ...
- px em rem的详解与区别
在前端项目开发中,px,em,以及rem都是页面布局常用的单位,虽然它们是长度单位,但是所含的意义不一样.通过复习和查阅,总结了以下知识. px像素(Pixel) 定义:相对长度单位.像素px是相对于 ...
- Leftmost Digit
Problem Description Given a positive integer N, you should output the leftmost digit of N^N. Input ...
- 利用 pandas 进行数据的预处理——离散数据哑编码、连续数据标准化
数据的标准化 数据标准化就是将不同取值范围的数据,在保留各自数据相对大小顺序不变的情况下,整体映射到一个固定的区间中.根据具体的实现方法不同,有的时候会映射到 [ 0 ,1 ],有时映射到 0 附近的 ...
- Struts2+Spring+Hibernate实现员工管理增删改查功能(一)之ssh框架整合
前言 转载请标明出处:http://www.cnblogs.com/smfx1314/p/7795837.html 本项目是我写的一个练习,目的是回顾ssh框架的整合以及使用.项目介绍: ...
- 解决Android下元素滑动问题
移动端左右.上下滑动: 当页面中既需要页面滑动操作,又需要上下或左右滑动页面上的某个元素时,直接使用zepto中提供的swipe事件是不能直接达到目的的,原因如下: (1)在Android低端机上to ...
- position:sticky 定位 position:fixed
它的表现类似position:relative和position:fixed的合体,当目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像 ...
- zabbix 3.2 高可用实现方式一,亲测无坑
1.架构设计图 2.设计说明 1. 基础架构为LAMP环境,采用keepalived实现zabbix服务器高可用,保证主server的mysql或者httpd宕掉后能切换到从server. 2.数据库 ...
- 学习C++ -> 构造函数与析构函数
学习C++ -> 构造函数与析构函数 一.构造函数的介绍 1. 构造函数的作用 构造函数主要用来在创建对象时完成对对象属性的一些初始化等操作, 当创建对象时, 对象会自动调用 ...