]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | <section id="adminlte-options"> |
2 | <h2 class="page-header"><a href="#adminlte-options">AdminLTE Javascript Options</a></h2> | |
3 | <p class="lead">Modifying the options of AdminLTE's app.js can be done using one of the following ways.</p> | |
4 | ||
5 | <h3>Editing app.js</h3> | |
6 | <p>Within the main Javascript file, modify the <code>$.AdminLTE.options</code> object to suit your use case.</p> | |
7 | ||
8 | <h3>Defining AdminLTEOptions</h3> | |
9 | <p>Alternatively, you can define a global options variable named <code>AdminLTEOptions</code> and initialize it before loading app.js.</p> | |
10 | <p>Example</p> | |
11 | <pre class="prettyprint"><code class="html"><script> | |
12 | var AdminLTEOptions = { | |
13 | //Enable sidebar expand on hover effect for sidebar mini | |
14 | //This option is forced to true if both the fixed layout and sidebar mini | |
15 | //are used together | |
16 | sidebarExpandOnHover: true, | |
17 | //BoxRefresh Plugin | |
18 | enableBoxRefresh: true, | |
19 | //Bootstrap.js tooltip | |
20 | enableBSToppltip: true | |
21 | }; | |
22 | </script> | |
23 | <script src="dist/js/app.js" type="text/javascript"></script></code></pre> | |
24 | ||
25 | <h3>Available AdminLTE Options</h3> | |
26 | <pre class="prettyprint"><code class="javascript">{ | |
27 | //Add slimscroll to navbar menus | |
28 | //This requires you to load the slimscroll plugin | |
29 | //in every page before app.js | |
30 | navbarMenuSlimscroll: true, | |
31 | navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar | |
32 | navbarMenuHeight: "200px", //The height of the inner menu | |
33 | //General animation speed for JS animated elements such as box collapse/expand and | |
34 | //sidebar treeview slide up/down. This options accepts an integer as milliseconds, | |
35 | //'fast', 'normal', or 'slow' | |
36 | animationSpeed: 500, | |
37 | //Sidebar push menu toggle button selector | |
38 | sidebarToggleSelector: "[data-toggle='offcanvas']", | |
39 | //Activate sidebar push menu | |
40 | sidebarPushMenu: true, | |
41 | //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin) | |
42 | sidebarSlimScroll: true, | |
43 | //Enable sidebar expand on hover effect for sidebar mini | |
44 | //This option is forced to true if both the fixed layout and sidebar mini | |
45 | //are used together | |
46 | sidebarExpandOnHover: false, | |
47 | //BoxRefresh Plugin | |
48 | enableBoxRefresh: true, | |
49 | //Bootstrap.js tooltip | |
50 | enableBSToppltip: true, | |
51 | BSTooltipSelector: "[data-toggle='tooltip']", | |
52 | //Enable Fast Click. Fastclick.js creates a more | |
53 | //native touch experience with touch devices. If you | |
54 | //choose to enable the plugin, make sure you load the script | |
55 | //before AdminLTE's app.js | |
56 | enableFastclick: true, | |
57 | //Control Sidebar Options | |
58 | enableControlSidebar: true, | |
59 | controlSidebarOptions: { | |
60 | //Which button should trigger the open/close event | |
61 | toggleBtnSelector: "[data-toggle='control-sidebar']", | |
62 | //The sidebar selector | |
63 | selector: ".control-sidebar", | |
64 | //Enable slide over content | |
65 | slide: true | |
66 | }, | |
67 | //Box Widget Plugin. Enable this plugin | |
68 | //to allow boxes to be collapsed and/or removed | |
69 | enableBoxWidget: true, | |
70 | //Box Widget plugin options | |
71 | boxWidgetOptions: { | |
72 | boxWidgetIcons: { | |
73 | //Collapse icon | |
74 | collapse: 'fa-minus', | |
75 | //Open icon | |
76 | open: 'fa-plus', | |
77 | //Remove icon | |
78 | remove: 'fa-times' | |
79 | }, | |
80 | boxWidgetSelectors: { | |
81 | //Remove button selector | |
82 | remove: '[data-widget="remove"]', | |
83 | //Collapse button selector | |
84 | collapse: '[data-widget="collapse"]' | |
85 | } | |
86 | }, | |
87 | //Direct Chat plugin options | |
88 | directChat: { | |
89 | //Enable direct chat by default | |
90 | enable: true, | |
91 | //The button to open and close the chat contacts pane | |
92 | contactToggleSelector: '[data-widget="chat-pane-toggle"]' | |
93 | }, | |
94 | //Define the set of colors to use globally around the website | |
95 | colors: { | |
96 | lightBlue: "#3c8dbc", | |
97 | red: "#f56954", | |
98 | green: "#00a65a", | |
99 | aqua: "#00c0ef", | |
100 | yellow: "#f39c12", | |
101 | blue: "#0073b7", | |
102 | navy: "#001F3F", | |
103 | teal: "#39CCCC", | |
104 | olive: "#3D9970", | |
105 | lime: "#01FF70", | |
106 | orange: "#FF851B", | |
107 | fuchsia: "#F012BE", | |
108 | purple: "#8E24AA", | |
109 | maroon: "#D81B60", | |
110 | black: "#222222", | |
111 | gray: "#d2d6de" | |
112 | }, | |
113 | //The standard screen sizes that bootstrap uses. | |
114 | //If you change these in the variables.less file, change | |
115 | //them here too. | |
116 | screenSizes: { | |
117 | xs: 480, | |
118 | sm: 768, | |
119 | md: 992, | |
120 | lg: 1200 | |
121 | } | |
122 | }</code></pre> | |
123 | </section> |