adminLTE 教程 -2 設定檔 app.js詳解

標籤：adminlte adminlte 教程 adminlte入門教程

我一般寫代碼，是設定一個index.html檔案，然後在content裡面通過ajax請求，動態替換頁面內容來實現頁面切換，以實現單頁面的效果。

adminLTE的設定檔是app.js，在頁面中引入即可，想修改配置，一般不應該修改設定檔，而是在設定檔之前寫一段js代碼，通過給變數（adminLTE指定的） AdminLTEOptions  賦值，載入app.js的時候回先檢測有沒有該變數，優先使用該變數的配置，該變數沒有賦值的配置資訊再使用app.js裡面原有的配置。然後對頁面進行配置。如下：

<!-- FastClick --><script src="plugins/fastclick/fastclick.js"></script><!-- AdminLTE App --><!-- SlimScroll 1.3.0 --><script src="plugins/slimScroll/jquery.slimscroll.min.js"></script><script>  //變數AdminLTEOptions用來修改app.js中的配置，所有需要在app.js之前編寫  // （其實放在app.js之後也可以，看你代碼結構是什麼了，正常需要放在app.js之前）  var AdminLTEOptions = {    /*1、內菜單配置，就是訊息、提醒、任務那三個的內部菜單那種*/    //添加slimscroll到導覽列菜單，（其實在app.js之後載入該外掛程式也可以啟動並執行）    // 這就需要你在每一個頁面的app.js之前載入jquery.slimscroll.min.js外掛程式，    navbarMenuSlimscroll: true,//是否為內菜單使用slimscroll外掛程式    navbarMenuSlimscrollWidth: "10px", //內菜單的捲軸寬度    navbarMenuHeight: "200px",//內菜單高度    /*2、*/    //指定控制項的摺疊速度，例如box collapse/expand展開摺疊 and sidebar treeview slide up/down上下滑動.。    //此選項接受整數為毫秒，‘fast‘, ‘normal‘, or ‘slow‘    animationSpeed: ‘fast‘,    /*3、指定側邊欄伸縮的控制按鈕*/    sidebarToggleSelector: "[data-toggle=‘offcanvas‘]",    sidebarPushMenu: true,//側邊欄伸縮使能    sidebarSlimScroll: true,//fixed固定式配置下側邊欄捲軸使能    sidebarExpandOnHover: true,//當側邊欄隱藏時，滑鼠移至上方側邊欄展開。當fixed和sidebar-mini一起使用時，不管true或false都會展開（即該配置無效）    /*box*/    enableBoxRefresh: false,    /*Bootstrap.js的提示資訊*/    enableBSToppltip: true,//使能    BSTooltipSelector: "[data-toggle=‘tooltip‘]",//給元素指定tooltip事件，元素中的事件必須和該事件相同    /*給觸摸裝置開啟快速點擊體驗，需要引用jquery.slimscroll.min.js*/    enableFastclick: false,    enableControlTreeView: true,//樹視圖控制，即側邊欄的點擊動畫效果    enableControlSidebar: true,//右側邊欄的控制選項    /*右側邊欄配置*/    controlSidebarOptions: {      //哪個按鈕應該觸發開/關事件      toggleBtnSelector: "[data-toggle=‘control-sidebar‘]",      //側邊欄選取器      selector: ".control-sidebar",      //運行划過內容      slide: false//true表示在內容上層覆蓋，FALSE表示推擠    },    enableBoxWidget: true,//允許box摺疊和刪除    //框外掛程式外掛程式選項    boxWidgetOptions: {      boxWidgetIcons: {        //Collapse icon        collapse: ‘fa-minus‘,        //Open icon        open: ‘fa-plus‘,        //Remove icon        remove: ‘fa-times‘      },      boxWidgetSelectors: {        //Remove button selector        remove: ‘[data-widget="remove"]‘,        //摺疊按鈕的選擇        collapse: ‘[data-widget="collapse"]‘      }    },    //Direct Chat plugin options    directChat: {      //預設啟用直接聊天      enable: true,      //開啟和關閉聊天連絡人窗格的按鈕      contactToggleSelector: ‘[data-widget="chat-pane-toggle"]‘    },    //在這裡可以自己額外添加新的顏色    colors: {      lightBlue: "#3c8dbc",      red: "#f56954",      green: "#00a65a",      aqua: "#00c0ef",      yellow: "#f39c12",      blue: "#0073b7",      navy: "#001F3F",      teal: "#39CCCC",      olive: "#3D9970",      lime: "#01FF70",      orange: "#FF851B",      fuchsia: "#F012BE",      purple: "#8E24AA",      maroon: "#D81B60",      black: "#222222",      gray: "#d2d6de"    },    //這裡是修改響應式的分界點    screenSizes: {      xs: 480,      sm: 768,      md: 992,      lg: 1200    }  };</script><script src="dist/js/app.js"></script>

adminLTE 教程 -2 設定檔　app.js詳解