bootstrap-switch使用
bootstrap 的开关。
引入相关文件:
<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>
HTML代码:
<input type="checkbox" name="useState"/>
JavaScript代码:
$("[name='useState']").bootstrapSwitch({
size:"large",
onText:"启用",
offText:"禁用",
onColor:"success",
onSwitchChange:function(event,state){
if(state==true){
$(this).val("2");
}else{
$(this).val("1"); // 禁用
}
}
});
设置开或者关:
$('[name="useState"]').bootstrapSwitch("state", true);
// true 为 开,false 为 关
bootstrap-switch使用的更多相关文章
- bootstrap switch功能
bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- bootstrap switch样式修改与多列等间距布局
先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...
- 前端基础(十):Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- 使用jQuery获取Bootstrap Switch的值
$('#switcher').bootstrapSwitch('state'); // true || false $('#switcher').bootstrapSwitch('toggleStat ...
- bootstrap Switch 的一个坑点
在bootstrap的modal点开的时候改变bootstrapSwitch的状态的时候,会出现第一次打开modal,switch没有变化,第二次以后打开modal才会改变,这个问题找了好久没有找到答 ...
- Bootstrap switch 切换状态踩坑
Boostrap switch 下载地址(http://www.bootcss.com/p/bootstrap-switch/),同时配有一些简单的用例. 其中写到 Toggle State切换状态的 ...
- 基于Bootstrap的jQuery开关按钮插件
按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- Bootstrap相关优质项目推荐
Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...
随机推荐
- A1060 Are They Equal (25 分)
一.技术总结 cnta.cntb用于记录小数点出现的位置下标,初始化为strlen(字符串)长度. q.p用于记录第一个非0(非小数点)出现的下标,可以用于计算次方和方便统计输出的字符串,考虑到前面可 ...
- Python进阶小结
目录 一.异常TODO 二.深浅拷贝 2.1 拷贝 2.2 浅拷贝 2.3 深拷贝 三.数据类型内置方法 3.1 数字类型内置方法 3.1.1 整型 3.1.2 浮点型 3.2 字符串类型内置方法 3 ...
- golang之引用自己定义的包
初始目录如下: 其中main.go只有一个主函数main(),用于运行程序,array文件夹是自己定义的包,里面spArr.go位于package array. spArr中的函数名或变量首字母得大写 ...
- 1+x 证书 Web 前端开发 HTML5 专项练习
官方QQ群 1+x 证书 Web 前端开发 HTML5 专项练习 http://blog.zh66.club/index.php/archives/193/
- 分布式SQL数据库中部分索引的好处
在优锐课的java学习分享中,探讨了分布式SQL数据库中部分索引的优势,并探讨了性能测试,结果等. 如果使用局部索引而不是常规索引,则在可为空的列上(其中只有一小部分行的该列不具有空值),然后可以大大 ...
- python学习(day1-2)
python 学习(day - 1-2 ) 变量:将运算的中间结果暂存到内存,以便后续程序调⽤. 变量的命名规则: 1, 变量由字⺟, 数字,下划线搭配组合⽽成 2, 不可以⽤数字开头,更不能是全数字 ...
- Bootstrap --------- 了解与使用
Bootstrap是用来做什么的?有几大部分?谁开发的?有什么特点? 一个用于快速开发 Web 应用程序和网站的前端框架. 基于 HTML.CSS.JAVASCRIPT 的. 2011 年八月在 Gi ...
- StreamWriter StreamReader
private void WriteLoginJsonData(object jsonData) { using (FileStream writerFileStream = new FileStre ...
- python基础(9):基本数据类型四(set集合)、基础数据类型补充、深浅拷贝
1. 基础数据类型补充 li = ["李嘉诚", "麻花藤", "⻩海峰", "刘嘉玲"] s = "_&qu ...
- 接口测试基础--Fiddler、Postman、Python实现对接口的测试
写在前面:本文主要的章节规划: 1.什么是接口测试 另外,有的时候会直接调用别的公司的接口,比如银行的.淘宝的.支付宝的,此时也需要做接口测试以及验证数据: 做接口测试的好处: 其中, ...