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

我一般写代码，是设置一个index.html文件，然后在content里面通过ajax请求，动态替换页面内容来实现页面切换，以实现单页面的效果。

adminLTE的配置文件是app.js，在页面中引入即可，想修改配置，一般不应该修改配置文件，而是在配置文件之前写一段js代码，通过给变量（adminLTE指定的） AdminLTEOptions  赋值，加载app.js的时候回先检测有没有该变量，优先使用该变量的配置，该变量没有赋值的配置信息再使用app.js里面原有的配置。然后对页面进行配置。如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

<!-- 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 >