bootstrap-switch使用,small、mini设置
1.首先需要引用https://www.bootcss.com/p/bootstrap-switch/。
window.onload=function(){
$('[name="status"]').bootstrapSwitch("size","small");//基本初始化
}
//手动设置按钮状态
$('[name="status"]').bootstrapSwitch('state',false);
//点击按钮切换 switch
$('[name="Btn"]').click(function(){
$('[name="status"]').bootstrapSwitch('toggleState');
});
//点击触发事件,监听按钮状态
$('[name="status"]').on('switchChange.bootstrapSwitch',function(event,state){
//内置对象、内置属性
console.log(event);
//获取状态
console.log(state);
});
属性名称

设置单选框大小,都是无效的。
后来使用js
$('[name="status"]').bootstrapSwitch("size","small");
这种方式设置达成效果。
具体原因还未知,先记录遗留一下吧
bootstrap-switch使用,small、mini设置的更多相关文章
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- 前端基础(十):Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- bootstrap switch功能
bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...
- bootstrap switch样式修改与多列等间距布局
先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...
- bootstrap的popover在trigger设置为hover时不隐藏popover
使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...
- 使用jQuery获取Bootstrap Switch的值
$('#switcher').bootstrapSwitch('state'); // true || false $('#switcher').bootstrapSwitch('toggleStat ...
- bootstrap Switch 的一个坑点
在bootstrap的modal点开的时候改变bootstrapSwitch的状态的时候,会出现第一次打开modal,switch没有变化,第二次以后打开modal才会改变,这个问题找了好久没有找到答 ...
- bootstrap使用总结(carousel设置大小。item设置大小,img设置大小)
在bootstrap中使用carousel,先要给.carousel一个大小, 要想使carousel和item和img随着浏览器大小而变,就要设置 .carousel .item { height: ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
随机推荐
- Nginx Rewrite相关功能-ngx_http_rewrite_module模块指令
Nginx Rewrite相关功能-ngx_http_rewrite_module模块指令 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.
- 目标检测论文解读13——FPN
引言 对于小目标通常需要用到多尺度检测,作者提出的FPN是一种快速且效果好的多尺度检测方法. 方法 a,b,c是之前的方法,其中a,c用到了多尺度检测的思想,但他们都存在明显的缺点. a方法:把每图片 ...
- MicroK8s及KubeFlow安装文档
安装简单的k8s大约有三种思路:minikube,microk8s,kubeadm.minikube 虽然是官方出品,但主要还是基于虚拟机做的设计.在 Linux 生产环境下,microk8s 可能是 ...
- java.time.format.DateTimeParseException: Text '2019-10-11 12:30:30' could not be parsed at index 10
java.time.format.DateTimeParseException: Text '2019-10-11 12:30:30' could not be parsed at index 10 ...
- 关于ID命名 一个页面唯一
1.一般ID在一个区域内必须是唯一的.这样是一个规范而且在IE中使用JS通过ID获取这个对象永远只能获取第一个. 2.js无法找到重复的ID,用js获取时,只能得到第一个ID元素,但,如果不同的区域范 ...
- 微信(十一) 使用调试助手申请设备ID和报备流程
以下流程模拟了一个设备,从微信硬件申请一个产品IP,对此ID进行报备生效,查询自己的绑定主人,给绑定主人发送消息的一系列http请求流程. 1 获取微信密钥 下面需要在公众号设备电脑IP白名单的电脑才 ...
- javascript中 encodeURIComponent() 与 encodeURI() 的区别
前言:js 中仅有的几个全局函数中,有两个全局函数可以用来编码url 字符串. 一.encodeURIComponent() 将转义用于分隔 URI 各个部分的标点符号 ,也就是可以编码 " ...
- Java集合详解1:一文读懂ArrayList,Vector与Stack使用方法和实现原理
本文非常详尽地介绍了Java中的三个集合类 ArrayList,Vector与Stack <Java集合详解系列>是我在完成夯实Java基础篇的系列博客后准备开始写的新系列. 这些文章将整 ...
- 【技术博客】使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试
目录 使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试 简介 PhpStorm中的远程开发 1. 配置服务器 2. 配置路径对应 3. 配置同步 4. 进行代码同步 5. 优点 ...
- Notepad++ 【自动完成】与【输入时提示函数参数】互相冲突,无奈
Notepad++ 既然可以在输入时提示函数参数,可是当提示函数参数的时候,输入具体参数时[自动完成]失效了. 一位用户遇到和我一样的问题:https://community.notepad-plus ...