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>