温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-09 09:10:01 阅读:23248 作者:wz669 栏目:开发技术
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

我一般写代码,是设置一个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插件,
    navbarMenuSlimscrolltrue,//是否为内菜单使用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']",
    sidebarPushMenutrue,//侧边栏伸缩使能
    sidebarSlimScrolltrue,//fixed固定布局下侧边栏滚动条使能
    sidebarExpandOnHovertrue,//当侧边栏隐藏时,鼠标悬停侧边栏展开。当fixed和sidebar-mini一起使用时,不管true或false都会展开(即该配置无效)

    /*box*/
    enableBoxRefreshfalse,
    /*Bootstrap.js的提示信息*/
    enableBSToppltiptrue,//使能
    BSTooltipSelector"[data-toggle='tooltip']",//给元素指定tooltip事件,元素中的事件必须和该事件相同
    /*给触摸设备开启快速点击体验,需要引用jquery.slimscroll.min.js*/
    enableFastclickfalse,
    enableControlTreeViewtrue,//树视图控制,即侧边栏的点击动画效果
    enableControlSidebartrue,//右侧边栏的控制选项
    /*右侧边栏配置*/
    controlSidebarOptions: {
      //哪个按钮应该触发开/关事件
      toggleBtnSelector"[data-toggle='control-sidebar']",
      //侧边栏选择器
      selector".control-sidebar",
      //运行划过内容
      slidefalse//true表示在内容上层覆盖,FALSE表示推挤
    },
    enableBoxWidgettrue,//允许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: {
      //默认启用直接聊天
      enabletrue,
      //打开和关闭聊天联系人窗格的按钮
      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: {
      xs480,
      sm768,
      md992,
      lg1200
    }
  };
</script>
<script src="dist/js/app.js"></script>

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×