1. Necessary configuration files for AdminLTE
2. Customize theme style
(1) Set the class in the body.
skin-blue: theme color, if _all-skins.min.css is introduced, there are many colors to choose from, as shown in the left picture, if it is set to skin-blue, the default is the theme style of the right picture.
sidebar-mini: found in AdminLTE.css.
(2) wrapper settings: AdminLTE.css
Header setting: put it in the header tag.
xxx background management system
Toggle navigation
- ${user.name}
${user.name}
- Followers Sales Friends
The header effect is shown in the figure below, click the sidebar toggle button, the logo-lg is hidden, and the logo-mini is displayed, as shown on the right.
aside setting: put in the aside tag.
navigation
front page
{{each sub1 as value i}} //sub1 corresponds to sub1 in js code.
{ {value.name}}
- { {each value.sub as value1 i1}}//对应 rootList[i].sub
- { {value1.name}}
{ {/each}}
{ {/each}}
functionsloveSliderData (list, pid){
var retList = [ ];
var len = list.length;
if (len > 0)
{
for (var i = 0; i < len; i++)
{
var x = list[i];
if (x.pid == pid)
{
var node = {};
node.name = x.name;
if (x.url == undefined || x.url == null || x.url == “”)
{
node.url = null;
}
else
{
node.url = “{ctx}{apath}/page/” + x.url;
}
node.ico = x.ico;
node.pid = x.pid;
node.id = x.id;
retList.push (node);
}
else
{
}
}
}
return retList;
}
$.HTTP.list (
{
url : “{ctx}{apath}/permission/list”,
success : function (list, pageinfo) {
var rootList = [ ];
rootList = sloveSliderData (list, 0); //According to the pid of the root menu is 0, select the root menu
if (list.length > 0)
{
for (var i = 0; i < rootList.length; i++)
{
rootList[i].sub = sloveSliderData (list, rootList[i].id); //The id of the root menu selected according to the pid of 0 is used as the pid of the submenu.
}
}
//Assemble the data source
var sidebardata =
{
sub1 : rootList
};
console.log(sidebardata);
// render menu data
var dt = template(“left-sidebarTmp”, sidebardata); //artTemplate method
$(“#left-sidebar”).html(dt);
}
});
Notice:
The data for {ctx}{apath}/permission/list interface is added manually in the database and the java backend has code to store the data into this interface. The database fields correspond to the fields required by the js code。
The sidebardata processed by js:
After success, the sidebar is displayed as shown below:
content setting: put it in the section tag.
- front page
Click the link of the sidebar, the corresponding page will be displayed in the iframe_box.
Publisher: full stack programmer, please indicate the source: https://javaforall.cn/164548.htmlOriginal link: https://javaforall.cn