加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

BootStrap selectpicker

发布时间:2020-12-17 20:55:40 所属栏目:安全 来源:网络整理
导读:Bootstrap Web前端CSS框架 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
这篇文章主要介绍了BootStrap selectpicker 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用

$('.selectpicker').selectpicker('val','Mustard');//单选
$('.selectpicker').selectpicker('val',['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示
mark一下问题:设置的val必须为option里面的value值,如果用name怎不生效。

PS:select 美化(bootstrap)

需要引入的文件:
bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js
以及bootstrap.min.js等几个常用的bootstarp文件
实现:
1、 在<select>标签中添加class或者id,建议添加class,因为class可以重复;
2、 在js文件中添加初始化方法:

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'请选择'});
}
在外部初始化的时候调用该方法就ok!
下图是美化后的:不是很好看,但是自己觉得比之前强多了!

但是这种美化插件有几个问题:
其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<select>将取法显示,我觉得应该是这样: bootstrap-select.js中把没有option的<select>显示'请输入',这样的话动态赋值的option就写不进去了!如果能把noneSelectedText:'请选择' 进行修复,那么这个问题应该是可以解决的!
经过几个小时的研究,发现了问题所在,但是只是解决了其中的一个;
在js中调用的时候,一定要等也面上的select 中的option加载完成之后再调

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'请选择'});
}
这样就可以把动态的select赋值也能美化了,但是任然存在一个问题:不是页面上的每一个select都能在页面初始化的时候全部加载的,比如:现在有两个联动的select,也就是第二个select的option要随第一个变化,在js中添加监控onchange或者change;如果这样美化就有问题了!
以上所述是小编给大家介绍的BootStrap selectpicker的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持!
转载自:http://www.phperz.com/article...

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读