文档章节

解决bootstrap-switch开关按钮不能正常初始化问题

kakai
 kakai
发布于 2019/09/19 20:48
字数 866
阅读 4.2K
收藏 0

从 https://github.com/Bttstrp/bootstrap-switch 下来bootstrap-switch插件,将其中dist目录下的css、js拷贝到项目,引用对应的css和js,然后在body中随便加上开关按钮的checkbox

<input type="checkbox" checked class="switch-checkbox" id="id-abc" />

注意,input中添加了 checked ,按照官方介绍,初始化理该处于选中状态,但使用github上的js文件,不管怎么弄,都是处于未选中状态,而使用

$(".checkbox").bootstrapSwitch('state', true)

代码却能使开关按钮正常显示为选中状态,在firefox进行debug,发现其包装div的class中含有好几个 bootstrap-switch-undefined ,这又是什么鬼?不是说国外程序员严谨吗?初步判断作者故意留一手,没大毛病,基本能使用,但细节上却故意整个bug出来。

然,再使用官方demo https://jsfiddle.net/djibe89/vL87w0j8/  中的 https://cdn.jsdelivr.net/gh/djibe/bootstrap-switch/dist/js/bootstrap-switch.min.js  此文件却一切正常(不使用js设置state也能正常初始化为选中状态),再次验证作者故意挖坑。对比demo中的js文件,发现与github上的js文件有些许不同,代码风格大体相同,但整体代码简化的写法上却完全不同,不知道是不是一个作者写的?????

继续在firefox中debug,首先把bootstrap-switch-undefined这几个玩意解决了,伤脑细胞啊,自己太较劲,本来是用demo中的那个min.js文件就行了,奈何吾过于顽固,坚决要填平作者挖下的坑……找啊找,找啊找……终于在bootstrap-switch.js源文件中找到getClasses函数,此就是为checkbox包装div设置各种class的地方,当然,此函数不负责设置class,但负责获取该设置的哪些class集合,断点到此函数中,发现其中 return v == null 这玩意不严谨(说好的外国程序员严谨的呢?又让我怀疑作者故意挖坑了),因为v有可能还能为undefined,所以改为 return !!v 后再运行,发现不知神马鬼的bootstrap-switch-undefined消失了,开关按钮的大小也与设置相符(顺带解决的这个大小问题,早些时候还没发现)。

……那个不能初始化为选中状态的问题总是那么坚强,仍然存在!只能在firefox中再次debug,state()这个函数未曾调用,但未选中状态怎么出现的呢(先前猜测是正常设置了选中再设置为未选中)?猜测坐标动画那块有问题,顽固的我在bootstrap-switch.js中找到 prvcontainerPosition 这个函数,设置开、关区块的坐标位置的,其中有这么一句

var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.ope;

ope是个什么鬼?搜索整个文件都没有ope的定义,在arguments无参数时,那state变量将会始终为undefined,这不是坑人吗?太坑了!

既然变量名定义为state,那么我尝试着使用 this.options.state代替this.ope,再次运行,一切正常了!好开森!!!焕然醒悟,ope是不是作者故意将options.state简写为一个不存在的属性?坑人!

不管怎么坑,最后我还得感谢作者将此组件开源出来,谢谢!

 

© 著作权归作者所有

kakai

kakai

粉丝 97
博文 13
码字总数 12842
作品 1
长沙
后端工程师
私信 提问
加载中

评论(0)

bootstrap-switch开关按钮表单插件

bootstrap-switch插件这是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,...

板蓝根
2014/02/17
1.4W
0
Android 自定义Switch开关按钮的样式

封面 GitHub传送门 1.写在前面 本文主要讲的是在Android原生Switch控件的基础上进行样式自定义,内容很简单,但是在实现的过程中还是遇到了一些问题,在此记录下来,希望对大家能够有所帮助,...

容华谢后
2017/12/07
0
0
ZUI 发布 1.6 版本,开源HTML5跨屏UI框架

大家好,我们很高兴的向大家推出ZUI的1.6版本。ZUI是我们团队在开发其他几款开源软件过程中衍生出来的一款跨屏HTML5框架。基础的理念基于bootstrap,又结合我们自己实际的应用做了大量的整合...

开源春哥
2017/03/24
3.6K
13
bootstrap-fileinput和jquery-ui 冲突问题

统一个页面同时使用bootstrap-fileinput和jquery-ui,fileinput插件的upload按钮和remove按钮不能正常显示,有没有遇到的朋友,或者提供一下js冲突的解决方法。 下面是对比图,只要在页面中移...

科尔沁鹰隼
2016/12/07
603
3
《前台框架BootStrap学习》系列技术文章整理收藏

《前台框架BootStrap学习》系列技术文章整理收藏 前台框架BootStrap学习系列整理了关于前台框架BootStrap方面的技术文章,一些实用的BootStrap使用示例,供大家学习BootStrap时参考 1CSS——...

开元中国2015
2015/06/22
218
0

没有更多内容

加载失败,请刷新页面

加载更多

项目讲解4

分组取topN的方法: 数据的预处理为使用mapreduce 每日新访客: 回头/单次访客统计: 漏斗模型: 使用python产生数据 1.统计每个步骤的总访问人数 create table tmp_page_views like ods_web...

七宝1
39分钟前
49
0
笔记:pyecharts可视化

# 加载数据import pandas as pddf = pd.read_excel(r"D:\我的文档\数据源\采购商品出库综合查询 - Python.xlsx",header = 2)df # 计算出结果df1 = df.groupby(["部门"])["总销售额"......

tengyulong
52分钟前
56
0
如何在div中垂直对齐图像 - How to vertically align an image inside a div

问题: How can you align an image inside of a containing div ? 如何在包含div内部对齐图像? Example 例 In my example, I need to vertically center the <img> in the <div> with cla......

javail
今天
59
0
用原生JS模拟Vue的State插件的写法

<html><body> <input type="text" id="myinput"></body><script> var myinput = document.querySelector('#myinput'); function Vue() { } Vue.Use = function......

lilugirl
今天
81
0
space_sniffer 清理 磁盘

http://www.uderzo.it/main_products/space_sniffer/ 下载直接运行 , 可以看到占用空间比较大的一些文件夹, 然后根据情况删除 anaconda和pr的缓存占了很大一部分 金山居然也这么大?...

阿豪boy
今天
85
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部