layui基本使用 -后台管理
来源：互联网 发布：美国ip代理软件 编辑：程序博客网 时间：2024/06/05 18:25
'use strict';layui.config({ version: true //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610 , debug: false //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面 , base: 'app/', //设定扩展的Layui模块的所在目录，一般用于外部模块扩展}).use(['element', 'layer'], function () { var element = layui.element, $ = layui.jquery, layer = layui.layer; layer.msg('app.js'); console.log(element) element.on('nav(top_nav)', function(elem){ console.log(elem) console.log(elem.find(".menu").attr('data-href')) // 菜单跳转 var href = elem.find('.menu').attr('data-href'); layer.msg(elem.text()); if(!elem.find('.menu').attr('target')){ $.get(href, function(data){ $('#left').html('').append(data); element.init(); }); } else { $('#left').html(''); } }); if ($("#menu .menu").attr('data-href')){ $("#menu .menu:first").click(); } element.on('nav(left_nav)', function(elem){ console.log('left_nav',elem) console.log('left_nav',elem.find("a").attr('data-href')) //layer.msg("加载中...",{icon: 16,shade: [0.01, '#f5f5f5'],scrollbar: false,offset: '0px', time:100000}); layer.load(0, {time: 500}); // 菜单跳转 var href = elem.find('a').attr('data-href'); // 新增tab 标签信息 var title = "<li class=\"layui-this\">" +"<i class=\"fa fa-dashboard\" aria-hidden=\"true\"></i>" +"<cite>"+elem.text()+"</cite>" +"<i class=\"layui-icon layui-unselect layui-tab-close\" data-id=\"1\">ဆ</i>" +"</li>"; var content = "<div class=\"\">" +"<iframe src=\""+href+"\" style=\"overflow:visible;\" scrolling=\"yes\" frameborder=\"no\" width=\"100%\" height=\"650\"></iframe>" +"</div>"; // $('.ca-tab-content div').hide(); // $('.ca-tab-title').append(title); // $('.ca-tab-content').append(content); $('#mainFrame').attr("src",href); });}); //加载入口 /*layui.define(function(exports){ //do something console.log('come in layui.define'); exports('demo', function(){ console.log('Hello World!'); }); });*/ /* layui.use('./app/index', function (data) { var element = layui.element; console.log("进入自定义模块",data) });*/ /*layui.use(['layer', 'form'], function(){ var layer = layui.layer; // form = layui.form(); layer.msg('Hello World'); });*/html menu-left
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp"%><%--<html><head><title>菜单导航</title><meta name="decorator" content="blank"/><script type="text/javascript">$(document).ready(function() {$(".accordion-heading a").click(function(){$('.accordion-toggle i').removeClass('icon-chevron-down');$('.accordion-toggle i').addClass('icon-chevron-right');if(!$($(this).attr('href')).hasClass('in')){$(this).children('i').removeClass('icon-chevron-right');$(this).children('i').addClass('icon-chevron-down');}});$(".accordion-body a").click(function(){$("#menu-${param.parentId} li").removeClass("active");$("#menu-${param.parentId} li i").removeClass("icon-white");$(this).parent().addClass("active");$(this).children("i").addClass("icon-white");//loading('正在执行，请稍等...');});//$(".accordion-body a:first i").click();//$(".accordion-body li:first li:first a:first i").click();});</script><li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">所有商品</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="javascript:;">列表三</a></dd> <dd><a href="">超链接</a></dd> </dl> </li></head><body> --%><c:set var="menuList" value="${fns:getMenuList()}"/><c:set var="firstMenu" value="true"/><c:forEach items="${menuList}" var="menu" varStatus="idxStatus"><c:if test="${menu.parent.id eq (not empty param.parentId ? param.parentId:1)&&menu.isShow eq '1'}"><li class="layui-nav-item" data-parent="#menu-${param.parentId}"><a data-href="#collapse-${menu.id}" href="javascript:;">${menu.name}<span class="layui-nav-more"></span></a><dl class="layui-nav-child"><c:forEach items="${menuList}" var="menu2"><c:if test="${menu2.parent.id eq menu.id&&menu2.isShow eq '1'}"><dd class="menu3-${menu2.id}"><a data-href="${fn:indexOf(menu2.href, '://') eq -1 ? ctx : ''}${not empty menu2.href ? menu2.href : '/404'}" target="${not empty menu2.target ? menu2.target : 'mainFrame'}" >${menu2.name}</a></dd></c:if></c:forEach><c:set var="firstMenu" value="false"/></dl></li></c:if></c:forEach><%--<div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#menu-${param.parentId}" data-href="#collapse-${menu.id}" href="#collapse-${menu.id}" title="${menu.remarks}"><i class="icon-chevron-${not empty firstMenu && firstMenu ? 'down' : 'right'}"></i> ${menu.name}</a> </div> <div id="collapse-${menu.id}" class="accordion-body collapse ${not empty firstMenu && firstMenu ? 'in' : ''}"><div class="accordion-inner"><ul class="nav nav-list"><c:forEach items="${menuList}" var="menu2"><c:if test="${menu2.parent.id eq menu.id&&menu2.isShow eq '1'}"><li><a data-href=".menu3-${menu2.id}" href="${fn:indexOf(menu2.href, '://') eq -1 ? ctx : ''}${not empty menu2.href ? menu2.href : '/404'}" target="${not empty menu2.target ? menu2.target : 'mainFrame'}" ><i class="icon-${not empty menu2.icon ? menu2.icon : 'circle-arrow-right'}"></i> ${menu2.name}</a><ul class="nav nav-list hide" style="margin:0;padding-right:0;"><c:forEach items="${menuList}" var="menu3"><c:if test="${menu3.parent.id eq menu2.id&&menu3.isShow eq '1'}"><li class="menu3-${menu2.id} hide"><a href="${fn:indexOf(menu3.href, '://') eq -1 ? ctx : ''}${not empty menu3.href ? menu3.href : '/404'}" target="${not empty menu3.target ? menu3.target : 'mainFrame'}" ><i class="icon-${not empty menu3.icon ? menu3.icon : 'circle-arrow-right'}"></i> ${menu3.name}</a></li></c:if></c:forEach></ul></li><c:set var="firstMenu" value="false"/></c:if></c:forEach></ul></div> </div></div>--%><%--</body></html> --%>menu 菜单 layui 后台管理架构
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><html><head> <title>单表管理</title> <meta name="decorator" content="default_layui"/></head><body><div class="layui-layout layui-layout-admin"> <div class="layui-header layui-bg-white"> <div class="layui-logo">layui 后台布局</div> <!-- 头部区域（可配合layui已有的水平导航） --> <ul id="menu" class="layui-nav layui-layout-left" lay-filter="top_nav"> <c:set var="firstMenu" value="true"/> <c:forEach items="${fns:getMenuList()}" var="menu" varStatus="idxStatus"> <c:if test="${menu.parent.id eq '1'&&menu.isShow eq '1'}"> <li class="layui-nav-item"> <c:if test="${empty menu.href}"> <a class="menu" href="javascript:" data-href="${ctx}/sys/menu/tree?parentId=${menu.id}" data-id="${menu.id}"><span>${menu.name}</span></a> </c:if> <c:if test="${not empty menu.href}"> <a class="menu" href="${fn:indexOf(menu.href, '://') eq -1 ? ctx : ''}${menu.href}" data-id="${menu.id}" target="mainFrame"><span>${menu.name}</span></a> </c:if> </li> <c:if test="${firstMenu}"> <c:set var="firstMenuId" value="${menu.id}"/> </c:if> <c:set var="firstMenu" value="false"/> </c:if> </c:forEach> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> <%--<img src="${fns:getUser().photo}" class="layui-nav-img">--%> ${fns:getUser().name} </a> <dl class="layui-nav-child"> <dd><a href="${ctx}/sys/user/info" target="mainFrame">个人信息</a></dd> <dd><a href="${ctx}/sys/user/modifyPwd" target="mainFrame">修改密码</a></dd> <dd><a href="${ctx}/oa/oaNotify/self" target="mainFrame">我的通知</a></dd> </dl> </li> <li class="layui-nav-item"><a href="${ctx}/logout" title="退出登录">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul id="left" class="layui-nav layui-nav-tree" lay-filter="left_nav"> <!-- 左侧导航区域（模板2层菜单child） --> <%-- <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">所有商品</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="javascript:;">列表三</a></dd> <dd><a href="">超链接</a></dd> </dl> </li>--%> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div class="layui-tab-content ca-tab-content"> <div class=""> <iframe id="mainFrame" name="mainFrame" src="${ctxApp}/template/welcome.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="650"></iframe> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> Copyright © 2012-${fns:getConfig('copyrightYear')} ${fns:getConfig('productName')} - Powered By <a href="" target="_blank"></a> ${fns:getConfig('version')} </div></div><script src="${ctxApp}/app.js" type="text/javascript"></script></body></html>阅读全文
0 0
- layui基本使用 -后台管理
- 使用Layui搭建后台管理界面
- LayUI后台管理系统Java实现
- 基于Layui框架的NET后台管理系统
- layui后台select赋值
- layui使用
- layui使用
- layui前台框架的基本弹出层的使用
- 如何使用layui
- layUI初步使用
- 一步一步带你搭建后台管理系统之IntelliJ IDEA的基本使用
- 使用django做管理后台
- supervisor 使用 ：后台进程管理
- layui
- [layui
- layui
- LayUi
- layui-layer弹出层使用
- Redis主从复制和哨兵模式
- maven联通网络下中央仓库不能访问的解决办法
- ffmpeg各种yuv格式转换命令
- EAS 常用代码2
- Java
- layui基本使用 -后台管理
- 骨牌填充
- Python3之Django Web框架首页分页处理升级版
- iOS Apple Pay开发流程
- 新手学习selenium路线图（老司机亲手绘制）
- 【机器学习】逻辑回归（Linear Regression）模型推导
- mysql字符串转换成时间格式
- 齐次坐标(homogeneous coordinate)
- 数据结构专题——栈与队列之顺序栈及其Java实现
