AdminLTE的使用
官方文档link
1.AdminLTE的必要配置文件
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx}/assets/font/Hui-iconfont/1.0.7/iconfont.css">
<!-- Theme style -->
<link rel="stylesheet" href="${ctx}/assets/css/AdminLTE.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="${ctx}/assets/css/skins/_all-skins.min.css">
<script type="text/javascript" src="${ctx}/assets/plugins/h-ui/js/H-ui.admin.js"></script>
<!-- AdminLTE App -->
<script src="${ctx}/assets/js/app-LTE.min.js"></script>
2.自定义主题样式
（1）在body中设置class。
<body class="hold-transition skin-blue sidebar-mini">
skin-blue：主题颜色，如果引入了_all-skins.min.css，有很多颜色可以选择，如左图，设置为skin-blue默认就为右图的主题样式。
sidebar-mini：在AdminLTE.css中可以找到。
（2）wrapper设置: AdminLTE.css
<div class="wrapper">
<header class="main-header"></header>
<aside class="main-sidebar"></aside>
<section class="content-wrapper"></section>
</div>
header设置：放在header标签里。
<!- - Logo - ->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini">
<img alt="" src="${ctx}/assets/img/logo.png" width="40px" height="40px">
</span>
<span class="logo-lg">xxx后台管理系统</span>
</a>
<!- - Header Navbar - ->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="${ctx}/assets/img/user.png" class="user-image" alt="User Image">
<span class="hidden-xs">${user.name}</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id="user-header" src="${ctx}/assets/img/user.png" class="img-circle" alt="User Image">
<p>${user.name}</p>
</li>
<!--Menu Body-->
<li class="user-body">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a id="systemsettingBtn" href="javascript:void(0)" class="btn btn-default btn-flat">修改密码</a>
</div>
<div class="pull-right">
<a href="${ctx}${apath}/logout" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar">
<i class="fa fa-gears"></i>
</a>
</li>
</ul>
</div>
</nav>
header效果如下图所示，点击sidebar toggle button，logo-lg隐藏，logo-mini显示，如右图。
aside设置：放在aside标签里。
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<section class="sidebar">
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="搜索..."> <span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form> <!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
</ul>
<script id="left-sidebarTmp" type="text/html">
<li class="header ad-click">导航</li>
<li class="active treeview">
<a _href="${ctx}${apath}/dashboard" href="javascript:void(0)" data-title="首页">
<i class="fa fa-dashboard"></i><span>首页</span><i class="fa fa-angle-left pull-right"></i>
</a>
</li>
{{each sub1 as value i}} //sub1 对应js代码中的 sub1 .
<li class="treeview">
<a {{if value.url}}_href="{{value.url}}"{{/if}} href="javascript:void(0)" data-title="{{value.name}}">
<i class="fa {{value.ico}}"></i><span>{{value.name}}</span><i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
{{each value.sub as value1 i1}} //对应 rootList[i].sub
<li>
<a {{if value1.url}}_href="{{value1.url}}"{{/if}} href="javascript:void(0)" data-title="{{value1.name}}">
<i class="fa {{value1.ico}}"></i>{{value1.name}}
</a>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</script>
</section>
</aside>
<script>
function sloveSliderData (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);
}
});
</script>
注意：
${ctx}${apath}/permission/list接口的数据在数据库中手动添加，java后台有代码将数据存入这个接口。数据库字段与js代码所需的字段对应一致。
经过js处理过的sidebardata：
成功后sidebar显示如下图所示：
content设置：放在section标签里。
<!- - content - ->
<section class="content-wrapper">
<div id="Hui-tabNav" class="Hui-tabNav ">
<div class="Hui-tabNav-wp">
<ul id="min_title_list" class="acrossTab cl" style="padding-left: 6px;">
<li class="active">
<span title="首页" data-href="${ctx}${apath}/dashboard">首页</span><em></em>
</li>
</ul>
</div>
</div>
<div id="iframe_box" class="Hui-article">
<div class="show_iframe">
<div style="display: none" class="loading"></div>
<iframe scrolling="yes" frameborder="0" src="${ctx}${apath}/dashboard"></iframe>
</div>
</div>
</section>
点击sidebar的链接，对应的页面都会在iframe_box中显示出来。
AdminLTE的使用的更多相关文章
- Asp.Net Core 项目实战之权限管理系统（1） 使用AdminLTE搭建前端
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- 用C#从数据库动态生成AdminLTE菜单的一种方法
当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...
- AdminLTE 2 开源模版
AdminLTE 2 开源模版: 1. 文档 https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html 2. 代码 ...
- adminLTE的自动化菜单
一. model from django.db import models # Create your models here. class MenuInfo(models.Model): paren ...
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...
- 在Laravel5.* 中使用 AdminLTE
在Laravel5.* 中使用 AdminLTE AdminLTE是一个很棒的单纯的由 HTML 和 CSS 构建的后台模板,在这片文章中,我将讲述如何将 AdminLTE 和 Laravel 优雅的 ...
- AdminLTE
AdminLTE搭建前端 0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp ...
- 基于Bootstrap 3.x的免费高级管理控制面板主题：AdminLTE
AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题.AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小型移动设 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统一期
学而时习之,不亦说乎,温顾温知新,可以为师矣. 这也是算是一种学习的方法和态度吧,经常去学习和总结,在博客园看了很多大神的文章,写下一点对于ABP(ABP是“ASP.NET Boilerplat ...
随机推荐
- 38．利用接口做参数，写个计算器，能完成+-*/运算 （1）定义一个接口Compute含有一个方法int computer(int n,int m); （2）设计四个类分别实现此接口，完成+-*/运算 （3）设计一个类UseCompute，含有方法： public void useCom(Compute com, int one, int two) 此方法要求能够：1．用传递过来的对象调用comp
//接口Compute package jieKou; public interface Compute { int Computer(int n,int m); } //加 package jieK ...
- POJ 1696 Space Ant 极角排序（叉积的应用）
题目大意:给出n个点的编号和坐标,按逆时针方向连接着n个点,按连接的先后顺序输出每个点的编号. 题目思路:Cross(a,b)表示a,b的叉积,若小于0:a在b的逆时针方向,若大于0a在b的顺时针方向 ...
- JavaScript（5）——DOM
DOM操作 为了写这一篇随笔真的是费了好多力气,虽然还是写不好.本来是从周一都开始写的,但是周二周三忙着去帮忙招新了,哈哈哈.感觉做自己喜欢的事特别好玩,虽然挺忙的.看着那些小鲜肉,感觉自己真的老了啊 ...
- jail brak 获取当前安装app列表
ios 5 6 7 可以通过解析"/private/var/mobile/Library/Caches/com.app.mobile.installation.plist" 文件获 ...
- Linux下利用nc命令来监控检测服务器的端口使用情况（转载）
最近碰到一个项目,前端用apache htttpd进行发布(80端口),通过双机负载均衡转发到后端的两个tomcat进行处理(8081和8082端口),现在需要随时监控这三个端口的情况,一旦down掉 ...
- 【3】docker命令集
root@xcc-VirtualBox:/home/xcc# docker --helpUsage: docker [OPTIONS] COMMAND [arg...] docker [ ...
- 框架基础：ajax设计方案（二）---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket ...
- Mybatis插件原理和PageHelper结合实战分页插件（七）
今天和大家分享下mybatis的一个分页插件PageHelper,在讲解PageHelper之前我们需要先了解下mybatis的插件原理.PageHelper 的官方网站:https://github ...
- j2ee网站项目首页如何直接使用action
之前做过一些网站项目,大多数都是首页就是登录,直接进入首页的不多,也就没有注意到,今天刚好注意到了就来记一下.也算是一个小技巧 <welcome-file>index.jsp</we ...
- FCFS
(First Come First Served) 按照作业进入系统的先后次序来挑选作业,先进入系统的作业优先被挑选. FCFS算法的优缺点: 算法容易实现.但效率不高,只顾及作业等候时间,没考虑作业 ...