zoukankan      html  css  js  c++  java
  • select 美化(bootstrap)

    需要引入的文件:

            bootstrap-combined.min.css

            bootstrap-select.css

            bootstrap-select.js

    以及bootstrap.min.js等几个常用的bootstarp文件

    实现:

    1、    在<select>标签中添加class或者id,建议添加class,因为class可以重复;

    2、    在js文件中添加初始化方法:

    1    initFnc : function(){
    2                 $(".selectpicker").selectpicker({noneSelectedText:'请选择'});
    3          }
    4  

     在外部初始化的时候调用该方法就ok!

    下图是美化后的:不是很好看,但是自己觉得比之前强多了!

    但是这种美化插件有几个问题:

        其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<select>将取法显示,我觉得应该是这样:        bootstrap-select.js中把没有option的<select>显示'请输入',这样的话动态赋值的option就写不进去了!如果能把noneSelectedText:'请选择'   进行修复,那么这个问题应该是可以解决的!

    --------------------------------------------------------------------------------------------------------------------------------------------------------------

            经过几个小时的研究,发现了问题所在,但是只是解决了其中的一个;

            在js中调用的时候,一定要等也面上的select 中的option加载完成之后再调

    1  initFnc : function(){
    2     $(".selectpicker").selectpicker({noneSelectedText:'请选择'});
    3  }

    这样就可以把动态的select赋值也能美化了,但是任然存在一个问题:不是页面上的每一个select都能在页面初始化的时候全部加载的,比如:现在有两个联动的select,也就是第二个select的option要随第一个变化,在js中添加监控onchange或者change;如果这样美化就有问题了!

  • 相关阅读:
    堆和栈的区别(转)
    conversion to dalvik format failed with error 1的解决办法
    eclipse最实用快捷键
    java socket编程(转)
    Android 面试总结
    Android横竖屏总结(转)
    Android布局文件属性笔记(转)
    常用数据结构有哪些(转)
    经常用到的Eclipse快捷键(转)
    url编码转换
  • 原文地址:https://www.cnblogs.com/tianhyapply/p/3620898.html
Copyright © 2011-2022 走看看