用layui搭建的后台框架
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用layui搭建的后台管理页面</title>
<link href="layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" /> /*注意修改地址*/
<script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script> /*注意修改地址*/ <script src="layui.js"></script>
</head>
<body>
<div class="layui-layout-admin">
<!--头部-->
<div class="layui-header">
<div class="layui-logo">.Net_海</div>
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>
<li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
<li class="layui-nav-item">
<a 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>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href=""><img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">.Net_海</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
</ul>
</div> <!--左侧-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
<li class="layui-nav-item">
<a href="javascript:;">基本元素</a>
<dl class="layui-nav-child">
<dd lay-id=""><a href="javascript:;" data-options="{url:'HtmlPage1.html',title:'表格'}">表格</a></dd>
<dd><a href="javascript:;" data-options="{url:'2.html',title:'基本信息'}">基本信息</a></dd> <!--子页面-->
<dd><a href="javascript:;" data-options="{url:'test.html',title:'导航栏'}">导航栏</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="">组件</a>
<dl class="layui-nav-child">
<dd><a href="1.html">Navbar</a></dd>
<dd><a href="javascript:;" data-options="{url:'test.html',title:'子菜单1'}">子菜单1</a></dd>
<dd><a href="">子菜单2</a></dd>
<dd><a href="">子菜单3</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="">表格</a>
</li>
<li class="layui-nav-item">
<a href="">表单</a>
</li>
</ul>
</div>
</div> <!--中间主体-->
<div class="layui-body" id="container">
<div class="layui-tab" lay-filter="tabs" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页内容</div>
</div>
</div>
</div> <!--底部-->
<div class="layui-footer">
<center>.Net_海版权所有©Tel:</center>
</div>
</div>
<script>
//JavaScript代码区域
layui.use('element', function () {
var element = layui.element;
element.on('nav(hbkNavbar)', function (elem) {
/*使用DOM操作获取超链接的自定义data属性值*/
var options = eval('(' + elem.context.children[].dataset.options + ')');
var url = options.url;
var title = options.title;
element.tabAdd('tabs', {
title: title,
content: '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>',
id: ''
});
});
/*使用下面的方式需要引用jquery*/
/* $('.layui-nav-child a').click(function () {
var options = eval('('+$(this).data('options')+')');
var url = options.url;
var title = options.title;
element.tabAdd('tabs',{
title : title,
content : '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'
});
});*/
});
</script>
</body>
</html>
用layui搭建的后台框架的更多相关文章
- 自定义统一api返回json格式（app后台框架搭建三）
在统一json自定义格式的方式有多种:1,直接重写@reposeBody的实现,2,自定义一个注解,自己去解析对象成为json字符串进行返回 第一种方式,我就不推荐,想弄得的话,可以自己去研究一下源码 ...
- layui后台框架的搭建
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
随机推荐
- tomcat下的Cookie特殊符号问题
案例:在项目中通过Cookie方式临时存放检索条件,不小心在Cookie值中使用了特殊符号"@",导致在服务器端无法正确解析Cookie值.之所以说"不小心", ...
- iFrame跨域解决办法
按情境分1.不跨域时2.主域相同.子域不同时3.主域不同不跨域时访问iframe: contentWindow访问父级:parent访问顶级:top a.html <html xmlns=&qu ...
- PHP文件缓存包含三种格式
http://developer.51cto.com/art/200912/166975.htm PHP文件缓存的速度一直是PHP程序员们关心的问题,他们一直在探讨着如何才能提高PHP文件缓存的效率来 ...
- Kaldi的delta特征
Delta特征是将mfcc特征(13维)经过差分得到的 它是做了一阶二阶的差分 提取的mfcc特征是13维的 然后通过delta就变成了39维 一阶差分: D(P(t))=P(t)-P(t-1) 二阶 ...
- 15款Java程序员必备的开发工具（转）
如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它 对于Java,有两种截然不同的观点: 一种认为Java是最简单功能 ...
- 解释局域（LAN）和广域网（WAN）之间的区别，它们之间的关系是什么？
解释局域(LAN)和广域网(WAN)之间的区别,它们之间的关系是什么?
- python基础-----字符编码
1.ASCII ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现 ...
- 目标检测----ImageAI使用
1.开源项目 github地址 https://github.com/OlafenwaMoses/ImageAI 2.目标检测(Object Detection)入门概要 3.Pycharm中无法 ...
- 【转】python3解析库lxml
转自:http://www.cnblogs.com/zhangxinqi/p/9210211.html 阅读目录 1.python库lxml的安装 2.XPath常用规则 (1)读取文本解析节点 (2 ...
- 非常好的一篇对linux信号(signal)的解析 (转载)【转】
转自:https://blog.csdn.net/return_cc/article/details/78845346 Linux信号(signal) 机制分析 转载至:https://www.cnb ...