[TOC] ## 1.下拉框模糊匹配 ``` $(function(){ //啟動Bootsrap-Select,初始化前必須已經有了option $(".selectpicker").selectpicker({ dropuAuto : false }); }) // 設置選中 $('.selectpicker').selectpicker('val', ''選中option的值); $("#id\_selector").selectpicker('refresh'); // 將下拉框的options動態更改后,重新初始化控件,也可以做默認初始化控件用控件下拉框選項選中后會有字體圖標, // 依賴于bootstrap.css里的glyphicon配置,會引入字體文件,保證文件路徑正確即可 ``` ## 2.日期時間插件 ``` jQuery(document).ready(function() { //初始化必須放在jquery頁面加載完成執行函數里 $(".form\_datetime").datetimepicker({ language: "zh-CN", autoclose:!0, todayBtn: true, isRTL:App.isRTL(), format:"yyyy-mm-dd hh:ii:ss", pickerPosition:App.isRTL()?"bottom-right":"bottom-left" }); }); ``` ## 3.側邊欄菜單點擊后仍然保留被選中的狀態. 一.菜單連接的內容用ajax刷新頁面局部避免整個頁面刷新,那么菜單可以保持狀態 二.用一個標識記錄點擊的哪個菜單,在刷新頁面后標記該菜單被展開和選中狀態,可以通過cookies或者url傳參等來鑒別選中的菜單并保持其被選中 ## 4.模態框主動打開和關閉? ? ``` $('#example').modal('show'); $('#example').modal('hide'); ``` ## 5.表格寬度自適應 在table標簽 或其父div中加入`table-responsive` 可以解決有些td中內容過長導致顯示溢出自己所在的td框 ## 6.modal模態框中的`select2`插件的搜索框無法選中進行輸入 一:將模態框的屬性`tabindex="-1"`去掉 二:在JQ的ready事件中執行 ``` $.fn.modal.Constructor.prototype.enforceFocus = function () { }; ``` ## 7.modal模態框禁止點擊空白處隱藏窗口 設置`div.modal? => data-backdrop="static" data-keyboard="false"`,或者在modal方法的option參數中設置 ## 8.嵌套模態框 二級模態框關閉導致一級模態框滾動條消失。 在主模態框div里加上 `style="overflow-y: auto;"` ## 9.`modal`除了指定特點的class來控制寬度外，也可以設置屬性width ## 10.以上有部分問題。包括我們常用的一些樣式僅在`bootstrap.css`是無法正常顯示的，需要依賴`components.css`和`plugins.css`就可以解決.以上解決方案是在不依賴組件和插件樣式時的解決方案. ## 11.樹形結構 `bootstrap-treeview`是一款樹形結構展示圖,依賴于Jquery,點擊父節點文案時默認沒有展開效果,可以給其綁定點擊事件,事件的執行部分來觸發已有的展開事件. ``` $('#treeview_check_all_area').on('click','li',function(event){ console.log('dianji'); $(event.target).find(".glyphicon").eq(0).click(); }); ``` ## 12.如果有一個頁面有多個模態框,上層關閉后可能會導致下層無法滾動: 在modal最外層的div里加上`style="overflow-y: auto;"`即可 ## 13.輸入框和圖片框在同一行，如驗證碼 同一個塊級元素內的行內元素，可以使用class屬性`inlne`