<!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. oracle java连接配置

    oracle数据库连接使用ojdbc驱动.使用tomcat-jdbc连接池. pom.xml: <!-- tomcat jdbc --> <dependency> <gr ...

  2. 设置 Visual Studio IIS Express 站点局域网访问

    Ø  Visual Stuido 的 IIS Express运行一个网站时,默认地址是这样的:http://localhost:23167/Cache/Three,其中 localhost 表示本机, ...

  3. termios结构体的内容

    一.结构体成员 struct termios { tcflag_t c_iflag; tcflag_t c_oflag; tcflag_t c_cflag; tcflag_t c_lflag; cc_ ...

  4. Groovy 类名称赋值为变量使用（newInstance & new）

    类创建实例一般方式 http://groovy-lang.org/objectorientation.html#_class class Person { String name Integer ag ...

  5. 第25月第4天 Blog-API-with-Django-Rest-Framework项目记录01

    #------------------------------ 1. djangochinaorg项目 https://github.com/DjangoChinaOrg/Django-China-A ...

  6. 堆（heap）与栈（stack）

    编程语言书籍中经常解释: 值类型被创建在栈上,引用类型被创建在堆上.   构造函数,原型之类的算是引用类型吗? 5种基本数据类型有Undefined.Null.Boolean.Number 和 Str ...

  7. 【Thymeleaf】浅谈Java模板引擎(带更新...)

    什么是模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 为什么要用模板 ...

  8. 编写blog第一天

    今天玩的比较嗨,离开学还剩半个月了,之前在网上搜集了一些blog制作方面的资料,并且在博客园注册了一个账号,今天才打开了申请已久的blog,现在已经对blog具有的基本功能和界面布局有了比较全面的掌握 ...

  9. 资源中心的ES 服务的COM.IFLYTEK.ERSP.API.RESOURCEAPI 接口注册ZOOKEEPER失败，解决记录

    No provider available for the service com.iflytek.ersp.api.ResourceApi from the url zookeeper://zook ...

  10. 【Java编程思想笔记】-集合1

    1.为什么要用集合? 一般情况下,数组是保存一组对象(或基本数据类型)最有效的方式.但是数组有着固定的尺寸,而在更一般的情况下,我们在写程序时不知道将需要保存多少个对象,或者是否需要更复杂的存储结构来 ...