首页 > 代码库 > adminLTE 教程 -2 配置文件 app.js详解
adminLTE 教程 -2 配置文件 app.js详解
我一般写代码，是设置一个index.html文件，然后在content里面通过ajax请求，动态替换页面内容来实现页面切换，以实现单页面的效果。
adminLTE的配置文件是app.js，在页面中引入即可，想修改配置，一般不应该修改配置文件，而是在配置文件之前写一段js代码，通过给变量（adminLTE指定的） AdminLTEOptions 赋值，加载app.js的时候回先检测有没有该变量，优先使用该变量的配置，该变量没有赋值的配置信息再使用app.js里面原有的配置。然后对页面进行配置。如下：
<!-- FastClick -->
<script src="http://www.mamicode.com/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<!-- SlimScroll 1.3.0 -->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/dist/js/app.js"></script>adminLTE 教程 -2 配置文件 app.js详解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。