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 
        >