用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 ...
随机推荐
- 前端基础之JQuery - day15
写在前面 上课第15天,打卡: 张国臂掖,以通西域: ########### # 课上简书 # ########## http://jquery.cuishifeng.cn/index.html JQ ...
- js 图片压缩上传(纯js的质量压缩，非长宽压缩)
下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...
- List、Map、set的加载因子，默认初始容量和扩容增量
首先,这三个概念说下.初始大小,就是创建时可容纳的默认元素个数:加载因子,表示某个阀值,用0~1之间的小数来表示,当已有元素占比达到这个阀值后,底层将进行扩容操作:扩容方式,即指定每次扩容后的大小的规 ...
- I/O 流
输入流的几个常用方法: 1,复制一个文件; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor ...
- 基于TensorFlow Object Detection API进行相关开发的步骤
*以下二/三.四步骤确保你当前的文件目录是以research文件夹为相对目录. 一/安装或升级protoc 查看protoc版本命令: protoc --version 如果发现版本低于2.6.0或运 ...
- Hive思维导图
- Python 爬虫一 简介
什么是爬虫? 爬虫可以做什么? 爬虫的本质 爬虫的基本流程 什么是request&response 爬取到数据该怎么办 什么是爬虫? 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间 ...
- linux系统内核版本升级
一.查看Linux内核版本命令(2种方法): 1.cat /proc/version 2.uname -a 二.查看Linux系统版本的命令(3种方法): 1.lsb_release -a 即可列出所 ...
- 【leetcode】557. Reverse Words in a String III
Algorithm [leetcode]557. Reverse Words in a String III https://leetcode.com/problems/reverse-words-i ...
- openGL之坐标变换