zoukankan      html  css  js  c++  java
  • jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化。为了界面的美观,不得已查资料寻找另外的插件。

    使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果

    完成效果如下

    实现步骤如下

    1.导入相关文件

       <link rel="stylesheet" href="${ctxStatic}/css/chosen.css" />
        <script type="text/javascript" src="${ctxStatic}/js/chosen.jquery.min.js"></script>

    2.创建select元素

    <select id="customerId1" name="customer.id" class="j-chosen" data-live-search="true">
                                    <option value="" maxlength="50"><font style="color: #eeeeee;">请选择客户名称</font></option>
                                    <c:forEach items="${customerList}" var="customer">
                                        <option value="${customer.id}" maxlength="50" ${data.customer.id eq customer.id ? 'selected' : ''}>${customer.customerName}</option>
                                    </c:forEach>
                                </select>

    3.初始化

    <script>
            $(function(){
                $("#customerId1").chosen(); //通过id
            //$(".j-chosen").chosen();//通过class
            $(
    ".chzn-search input").css("height","25px");//设置下拉出来的搜索框的高度,一般不用设置
          })
    </script>

    OK,搞定,就是这么简单

    相关资料分享

    详细的参数及过程可参考博文http://blog.csdn.net/iamduoluo/article/details/11519909

    不设置的话,搜索框将从首字母开始匹配,要实现模糊查询,可参考博文http://blog.csdn.net/mengtianyalll/article/details/43966089

  • 相关阅读:
    数据降维和可视化
    聚类
    支持向量机的实现
    支持向量机核函数
    支持向量基
    倾斜类误差度量
    构建垃圾邮件分类器
    POJ 2955 Brackets (区间dp入门)
    POJ 3126 Prime Path (bfs+欧拉线性素数筛)
    POJ 1426 Find The Multiple (dfs??!!)
  • 原文地址:https://www.cnblogs.com/YangJavaer/p/5832960.html
Copyright © 2011-2022 走看看