<!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_海版权所有&copy;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搭建的后台框架的更多相关文章

  1. 自定义统一api返回json格式（app后台框架搭建三）

    在统一json自定义格式的方式有多种:1,直接重写@reposeBody的实现,2,自定义一个注解,自己去解析对象成为json字符串进行返回 第一种方式,我就不推荐,想弄得的话,可以自己去研究一下源码 ...

  2. layui后台框架的搭建

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...

  3. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  5. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  8. 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 ...

  9. ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. getservbyname和getservbyport

    一.getservbyname函数原型 #include <netdb.h> struct servent *getservbyname(const char *servname, con ...

  2. 对xml进行数据查询时发生NoClassDefFoundError，dom4j和jaxen

    xml可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. 在web中,今天我本想测试一下用xml做为数据库存储用户信息,但是在查询用户信息的时候一直发生: jav ...

  3. Play XML Entities

    链接:https://pentesterlab.com/exercises/play_xxe/course Introduction This course details the exploitat ...

  4. Docker（四）Dockerfile入门

    摘自: https://mp.weixin.qq.com/s/Im4axroExgrJoj05g_TQ-w 一.Docker的工作流程 Docker组件协作运行容器可以分为以下几个过程: Docker ...

  5. [C++]线性链表之顺序表<一>

    顺序表中数据元素的存储地址是其序号的线性函数,只要确定了存储顺序表的起始地址(即 基地址),计算任意一个元素的存储地址的时间是相等的,具有这一特点的存储结构称为[随机存储]. 使用的基本数据结构:数组 ...

  6. luogu P4156 [WC2016]论战捆竹竿

    传送门 官方题解(证明都在这) 神仙题鸭qwq 转化模型,发现这题本质就是一个集合,每次可以加上集合里的数,问可以拼出多少不同的数 首先暴力需要膜意义下的最短路,例题戳这 然后这个暴力可以优化成N^2 ...

  7. JavaScript中Float类型保留两位小数

    JavaScript中Float类型保留两位小数 核心方法: num:要操作的数字     size:要保留的位数 parseFloat(num).toFixed(size); 实现代码如下:var  ...

  8. 安装Vmware并破解

    1. 先下载Vmware安装包 链接:http://pan.baidu.com/s/1hsjCKgk 密码:c1o6 2. 解压缩 3. 运行VMware-workstation-full-10.0. ...

  9. shell编程 之 文件包含

    解释:就是在一个脚本中引用或者运行其他脚本的文件. 常用格式:. filename 或者 source filename 实例:/hehe文件夹下有两个文件:t2.sh 和t3.sh t2.sh的内容 ...

  10. css3 特效拓展 画个安卓机器人

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...