java adminlte 使用_AdminLTE的使用

第一次听说这个模板，留着以后用

1.AdminLTE的必要配置文件

2.自定义主题样式

(1)在body中设置class。

skin-blue：主题颜色，如果引入了_all-skins.min.css，有很多颜色可以选择，如左图，设置为skin-blue默认就为右图的主题样式。

        

sidebar-mini：在AdminLTE.css中可以找到。

   

(2)wrapper设置: AdminLTE.css

header设置：放在header标签里。

xxx后台管理系统

Toggle navigation

• 

  ${user.name}

  • 

    ${user.name}

  • Followers

    Sales

    Friends

  • 修改密码

    注销

header效果如下图所示，点击sidebar toggle button，logo-lg隐藏，logo-mini显示，如右图。

    

aside设置：放在aside标签里。

导航

首页

{{each sub1 as value i}} //sub1 对应js代码中的 sub1 .

{{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); //根据根菜单的pid为0，挑选出根菜单

if (list.length > 0)

{

for (var i = 0; i < rootList.length; i++)

{

rootList[i].sub = sloveSliderData (list, rootList[i].id); //根据pid为0挑选出的根菜单的id，作为子菜单的pid。

}

}

//组装数据源

var sidebardata =

{

sub1 : rootList

};

console.log(sidebardata);

//渲染菜单数据

var dt = template("left-sidebarTmp", sidebardata); //artTemplate方法

$("#left-sidebar").html(dt);

}

});

注意：

${ctx}${apath}/permission/list接口的数据在数据库中手动添加，java后台有代码将数据存入这个接口。数据库字段与js代码所需的字段对应一致。

经过js处理过的sidebardata：

成功后sidebar显示如下图所示：

content设置：放在section标签里。

• 首页

点击sidebar的链接，对应的页面都会在iframe_box中显示出来。