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

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

  1. <!-- FastClick -->
  2. <script src="plugins/fastclick/fastclick.js"></script>
  3. <!-- AdminLTE App -->
  4. <!-- SlimScroll 1.3.0 -->
  5. <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
  6. <script>
  7.   //变量AdminLTEOptions用来修改app.js中的配置,所有需要在app.js之前编写
  8.   // (其实放在app.js之后也可以,看你代码结构是什么了,正常需要放在app.js之前)
  9.   var AdminLTEOptions = {
  10.     /*1、内菜单配置,就是消息、提醒、任务那三个的内部菜单那种*/
  11.     //添加slimscroll到导航栏菜单,(其实在app.js之后加载该插件也可以运行的)
  12.     // 这就需要你在每一个页面的app.js之前加载jquery.slimscroll.min.js插件,
  13.     navbarMenuSlimscrolltrue,//是否为内菜单使用slimscroll插件
  14.     navbarMenuSlimscrollWidth"10px"//内菜单的滚动条宽度
  15.     navbarMenuHeight"200px",//内菜单高度
  16.     /*2、*/
  17.     //指定控件的折叠速度,例如box collapse/expand展开折叠 and sidebar treeview slide up/down上下滑动.。
  18.     //此选项接受整数为毫秒,'fast', 'normal', or 'slow'
  19.     animationSpeed'fast',
  20.     /*3、指定侧边栏伸缩的控制按钮*/
  21.     sidebarToggleSelector"[data-toggle='offcanvas']",
  22.     sidebarPushMenutrue,//侧边栏伸缩使能
  23.     sidebarSlimScrolltrue,//fixed固定布局下侧边栏滚动条使能
  24.     sidebarExpandOnHovertrue,//当侧边栏隐藏时,鼠标悬停侧边栏展开。当fixed和sidebar-mini一起使用时,不管true或false都会展开(即该配置无效)
  25.     /*box*/
  26.     enableBoxRefreshfalse,
  27.     /*Bootstrap.js的提示信息*/
  28.     enableBSToppltiptrue,//使能
  29.     BSTooltipSelector"[data-toggle='tooltip']",//给元素指定tooltip事件,元素中的事件必须和该事件相同
  30.     /*给触摸设备开启快速点击体验,需要引用jquery.slimscroll.min.js*/
  31.     enableFastclickfalse,
  32.     enableControlTreeViewtrue,//树视图控制,即侧边栏的点击动画效果
  33.     enableControlSidebartrue,//右侧边栏的控制选项
  34.     /*右侧边栏配置*/
  35.     controlSidebarOptions: {
  36.       //哪个按钮应该触发开/关事件
  37.       toggleBtnSelector"[data-toggle='control-sidebar']",
  38.       //侧边栏选择器
  39.       selector".control-sidebar",
  40.       //运行划过内容
  41.       slidefalse//true表示在内容上层覆盖,FALSE表示推挤
  42.     },
  43.     enableBoxWidgettrue,//允许box折叠和删除
  44.     //框插件插件选项
  45.     boxWidgetOptions: {
  46.       boxWidgetIcons: {
  47.         //Collapse icon
  48.         collapse'fa-minus',
  49.         //Open icon
  50.         open'fa-plus',
  51.         //Remove icon
  52.         remove'fa-times'
  53.       },
  54.       boxWidgetSelectors: {
  55.         //Remove button selector
  56.         remove'[data-widget="remove"]',
  57.         //折叠按钮的选择
  58.         collapse'[data-widget="collapse"]'
  59.       }
  60.     },
  61.     //Direct Chat plugin options
  62.     directChat: {
  63.       //默认启用直接聊天
  64.       enabletrue,
  65.       //打开和关闭聊天联系人窗格的按钮
  66.       contactToggleSelector'[data-widget="chat-pane-toggle"]'
  67.     },
  68.     //在这里可以自己额外添加新的颜色
  69.     colors: {
  70.       lightBlue"#3c8dbc",
  71.       red"#f56954",
  72.       green"#00a65a",
  73.       aqua"#00c0ef",
  74.       yellow"#f39c12",
  75.       blue"#0073b7",
  76.       navy"#001F3F",
  77.       teal"#39CCCC",
  78.       olive"#3D9970",
  79.       lime"#01FF70",
  80.       orange"#FF851B",
  81.       fuchsia"#F012BE",
  82.       purple"#8E24AA",
  83.       maroon"#D81B60",
  84.       black"#222222",
  85.       gray"#d2d6de"
  86.     },
  87.     //这里是修改响应式的分界点
  88.     screenSizes: {
  89.       xs480,
  90.       sm768,
  91.       md992,
  92.       lg1200
  93.     }
  94.   };
  95. </script>
  96. <script src="dist/js/app.js"></script>