adminLTE 教程 -2 配置文件　app.js詳解

我一般寫代碼，是設置一個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>