AdminLTE的使用（转）

<div id="cnblogs_post_body" class="blogpost-body sh-gutter"><div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><a href="https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html" target="_blank">官方文档link</a> 1.AdminLTE的必要配置文件  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  <link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css">  <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">  <link rel="stylesheet" href="${ctx}/assets/css/AdminLTE.css">  <link rel="stylesheet" href="${ctx}/assets/css/skins/_all-skins.min.css"> </pre>  <script type="text/javascript" src="${ctx}/assets/plugins/h-ui/js/H-ui.admin.js"></script>    <script src="${ctx}/assets/js/app-LTE.min.js"></script>javascript

<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 2.自定义主题样式 （1）在body中设置class。 <div class="cnblogs_code"> <pre><body class="hold-transition skin-blue sidebar-mini"></pre> </div> skin-blue：主题颜色，若是引入了_all-skins.min.css，有不少颜色能够选择，如左图，设置为skin-blue默认就为右图的主题样式。 <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161026173118328-1635486192.png" alt="">        <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161026173228156-2029840437.png" alt="" width="662" height="503"> sidebar-mini：在AdminLTE.css中能够找到。 <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161026173504750-1414502334.png" alt="" width="711" height="555">   <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161026173427671-1544935100.png" alt="" width="754" height="567">   （2）wrapper设置: AdminLTE.css   <div class="cnblogs_code"> <pre><div class="wrapper"> <header class="main-header"></header> <aside class="main-sidebar"></aside> <section class="content-wrapper"></section> </div></pre> </div>       header设置：放在header标签里。   <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><!- - Logo - -> <a href="index2.html" class="logo">  <img alt="" src="${ctx}/assets/img/logo.png" width="40px" height="40px"> xxx后台管理系统 </a> <!- - Header Navbar - -> <nav class="navbar navbar-static-top" role="navigation">  <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> Toggle navigation </a>  <div class="navbar-custom-menu"> <ul class="nav navbar-nav">  <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"> ${user.name} </a> <ul class="dropdown-menu">  <li class="user-header"> <img id="user-header" src="${ctx}/assets/img/user.png" class="img-circle" alt="User Image"> ${user.name} </li>  <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&gt; </div> </li>  <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>  <li> <a href="#" data-toggle="control-sidebar"> </a> </li> </ul> </div> </nav></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 　　header效果以下图所示，点击sidebar toggle button，logo-lg隐藏，logo-mini显示，如右图。  <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161027145640015-1543205735.png" alt="" width="796" height="606">    <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161027152029640-1246619151.png" alt="" width="808" height="606">   aside设置：放在aside标签里。   <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre> <aside class="main-sidebar"> <section class="sidebar">  <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="搜索...">css

&lt;span class="input-group-btn"&gt;</br>
       &lt;button type="submit" name="search" id="search-btn" class="btn btn-flat"&gt;</br>
          &lt;i class="fa fa-search"&gt;&lt;/i&gt;</br>
       &lt;/button&gt;</br>
   &lt;/span&gt;</br>
 &lt;/div&gt;</br>

</form>html

<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="首页"> 首页 </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}}"> {{value.name}} </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}}"> {{value1.name}} </a> </li> {{/each}} </ul> </li> {{/each}} </script> </section> </aside></pre>java

<div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><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></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 注意： ${ctx}${apath}/permission/list接口的数据在数据库中手动添加，java后台有代码将数据存入这个接口。数据库字段与js代码所需的字段对应一致。 <div><div id="highlighter_756377" class="syntaxhighlighter javascript"><div class="toolbar"><a href="#" class="toolbar_item command_help help">?</a></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript plain"><code class="javascript string">"font-size: 14pt; font-family: 幼圆"</code><code class="javascript plain">><img src=</code><code class="javascript string">"https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028133415968-1857840470.png"</code> <code class="javascript plain">alt=</code><code class="javascript string">""</code><code class="javascript plain">></code></div></div></td></tr></tbody></table></div></div> <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028113851640-758782329.png" alt="">  通过js处理过的sidebardata： <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028133647093-632621319.png" alt=""> 成功后sidebar显示以下图所示： 　<img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028114719375-1081576047.png" alt="">  content设置：放在section标签里。   <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre><!- - 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"> 首页 </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></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 　点击sidebar的连接，对应的页面都会在iframe_box中显示出来。  <img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028120743437-119469332.png" alt="">  </div>node