用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 ...
随机推荐
- redis集群之主从架构
https://redis.io/topics/replication1. redis主从架构概述(1)一个master可以配置多个slave(2)slave与master之间使用异步复制进行数据同步 ...
- VS Resharper正常代码显示红色处理
点击重启VS即可.
- 微信调试工具测试时有时候复制URL没有corpid解决
可以直接去微信企业后台查询corpid,复制到粘贴到自己的url后面.
- oracle pivot
select * from (select a.drugname, a.drugform, a.drugspec, a.type flag, max(a.maxzjprice) maxprice, m ...
- 如何用vue控制样式实现相同的结构样式
<div class="index-board-list"> <div class="index-board-item" v-for=&quo ...
- 第28月第3天 c语言读写文件
1. int ConfigIniFile::OpenFile( const char* szFileName ) { FILE *fp; size_t nLen; int nRet; CloseFil ...
- Python操作Redis数据库
连接数据库 StrictRedis from redis import StrictRedis # 使用默认方式连接到数据库 redis = StrictRedis(host='localhost', ...
- 前端向服务器请求数据并渲染的方式（ajax/jQuery/axios/vue）
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
- jira迁移数据
jira迁移数据有两种方式 方式一: jira系统自带的备份恢复操作 最简单的,但不一定能成功 从/export/atlassian/application-data/jira/export下载至 ...
- [css]将textarea前的文字设置在左上角
在使用textarea的时候,默认前面的文字是在最下面的,好丑,然后百度了一下,要在textarea加上vertical-align:top的css属性 代码: <div class=" ...