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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM