用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 ...
随机推荐
- 深入浅出mybatis之入门使用
写在前面 mybatis是一个持久层框架,可以支持SQL定制和存储过程,实现数据库记录到Java POJO对象之间的映射. 所以说,mybatis是一个ORM框架. 这个ORM可以通过2种方式实现:x ...
- vue 用checkbox 做多选，带选中样式
<dl v-for="(item,index) in listData" :key="index"> testName <label> ...
- php下curl ssl常用问题
1. 查看curl版本 在phpinfo中,可以查看 curl cURL support enabled cURL Information 7.35.0 Age 3 Features AsynchDN ...
- NSScanner类的基本用法
NSScanner是一个类,用于在字符串中扫描指定的字符,尤其是把它们翻译/转换为数字和别的字符串.可以在创建NSScaner时指定它的string属性,然后scanner会按照你的要求从头到尾地扫描 ...
- 传入mybatis的xml为Long型时报There is no getter for property named 'VARCHAR' in
修改前 <insert id="insert" parameterType="com.taotao.pojo.TbContent" > i ...
- [C++]最小生成元 (Digit Generator, ACM/ICPC Seoul 2005, UVa1583)
Question 例题3-5 最小生成元 (Digit Generator, ACM/ICPC Seoul 2005, UVa1583) 如果x+x的各个数字之和得到y,就是说x是y的生成元.给出n( ...
- HDFS笔记（一）
1. HDFS 是什么? Hadoop分布式文件系统(Distributed File System)-HDFS(Hadoop Distributed File System) 2. HDFS 架构 ...
- python web cgi
知识详解: cgi:通用网关接口,网络脚本的解析 python cgi 自带有cgi轻量级服务器,我们通过cgi命令可以开启该服务器 python2 python -m CGIHTTPServer p ...
- 🌵react小记 🌵
- Android小知识汇总
1.Android Studio 将module编译打包成aar文件,module依赖的 (例如 compile 'com.zhy:autolayout:1.4.3' )不会被打包进入aar文件,应用 ...