java adminlte 使用_AdminLTE的使用

java adminlte 使用_AdminLTE的使用第一次听说这个模板,留着以后用1.AdminLTE的必要配置文件2.自定义主题样式(1)在body中设置class。skin-blue:主题颜色,如果引入了_all-skins.min.css,有很多颜色可以选择,如左图,设置为skin-blue默认就为右图的主题样式。sidebar-mini:在AdminLTE.css中可以找到。(2)wrapper设置:AdminLTE…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

1.AdminLTE的必要配置文件

48304ba5e6f9fe08f3fa1abda7d326ab.png

2.自定义主题样式

(1)在body中设置class。

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

675fbefb5478dd1d60e3bb1d660051b8.png        

c00e082aa5eba091885661a0d105ac30.png

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

56870c78debfcc27b6047bdb5557e97b.png   

bade51d7ff63ee30996f2224bf416bd4.png

(2)wrapper设置: AdminLTE.css

header设置:放在header标签里。

48304ba5e6f9fe08f3fa1abda7d326ab.png

java adminlte 使用_AdminLTE的使用

xxx后台管理系统

Toggle navigation

48304ba5e6f9fe08f3fa1abda7d326ab.png

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

bcd4b5da78594575192b36f4dcf396c3.png    

0cab8df4afda4f1ace1438ed3d8358e4.png

aside设置:放在aside标签里。

48304ba5e6f9fe08f3fa1abda7d326ab.png

导航

首页

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

{
{value.name}}

  • {
    {each value.sub as value1 i1}}//对应 rootList[i].sub
  • {
    {value1.name}}

{
{/each}}

{
{/each}}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

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);

}

});

48304ba5e6f9fe08f3fa1abda7d326ab.png

注意:

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

c520c6ac1a6d940e4b3b484f20daf3ee.png

经过js处理过的sidebardata:

85fe9848485010362372f68f6c63ae47.png

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

cd11db0207dc10d619e6823257674bfc.png

content设置:放在section标签里。

48304ba5e6f9fe08f3fa1abda7d326ab.png

  • 首页

48304ba5e6f9fe08f3fa1abda7d326ab.png

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

18ccd45341834baa833e6c94f085003d.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/164548.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月27日 上午9:00
下一篇 2022年7月27日 上午9:00


相关推荐

  • swal弹窗,sweetalert2具有相同功能的多个swal[通俗易懂]

    swal弹窗,sweetalert2具有相同功能的多个swal[通俗易懂]I’dliketomakeaconditionandcallaswalforeachone(Sweetalert2).Butonlyoneoftheswalruns.HowcanIdoit?functionvalidateEmail(email){varregex=/\S+@\S+\.\S+/;returnregex.test(emai…

    2025年5月23日
    6
  • 智谱AutoGLM深度解析:通用智能体如何重塑每个人的手机(万字纯享版)

    智谱AutoGLM深度解析:通用智能体如何重塑每个人的手机(万字纯享版)

    2026年3月12日
    3
  • 银行家算法c语言加注释,银行家算法C语言代码

    银行家算法c语言加注释,银行家算法C语言代码《银行家算法C语言代码》由会员分享,可在线阅读,更多相关《银行家算法C语言代码(10页珍藏版)》请在人人文库网上搜索。1、实验名称:银行家算法声明:杨秀龙学号:专业课:创新实验课111地图老师:霍林实验标题银行家算法实验的目的银行家算法如何避免死锁的更深层次理解设计思想银行家算法假定,根据进程的请求,在该进程的请求中已分配的资源上执行安全算法,如果可以满足其他进程的所有请求,则满足该进程的请求,否…

    2022年4月28日
    33
  • 神经网络——Python实现BP神经网络算法(理论+例子+程序)

    神经网络——Python实现BP神经网络算法(理论+例子+程序)一、基于BP算法的多层感知器模型采用BP算法的多层感知器是至今为止应用最广泛的神经网络,在多层感知器的应用中,以图3-15所示的单隐层网络的应用最为普遍。一般习惯将单隐层前馈网称为三层感知器,所谓三层包括了输入层、隐层和输出层。算法最终结果采用梯度下降法,具体详细过程此处就省略了!二、BP算法的程序实现流程三、标准BP算法的改进——增加动量项标准BP算法在调整权值时,只按t时刻误差的梯度降方向调整,而没有考虑t时刻以前的梯度方向,从而常使训练过程发生振荡,收敛缓慢。为了提

    2025年9月16日
    8
  • java拦截器handler_java拦截器HandlerInterceptor的preHandle、postHandle与afterCompletion三个方法…

    java拦截器handler_java拦截器HandlerInterceptor的preHandle、postHandle与afterCompletion三个方法…preHandle调用时间:Controller方法处理之前执行顺序:链式Intercepter情况下,Intercepter按照声明的顺序一个接一个执行若返回false,则中断执行,注意:不会进入afterCompletionpostHandle调用前提:preHandle返回true调用时间:Controller方法处理完之后,DispatcherServlet进行视图的渲染之前,也就是说在这…

    2022年5月26日
    132
  • LoadLibrary失败

    LoadLibrary失败LoadLibrary失败 今天同事遇到一个问题,经高手指点,完美解决。不过解决方法总是感觉有点不妥,不知道有没有其它方法。 正常情况,在一个exe中LoadLibrary(DLL1)可以获得正常的结果; 但是,当我们需要load的DLL1如果调用了其它的DLL2,那么我们就会得到一个结果:Theprogramcantstartbecause****.dl

    2022年7月26日
    23

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号