用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 ...
随机推荐
- 我的长大app开发教程第二弹：完成ContentFragment底部按钮
在开始之前,先上一张效果图 突然发现有点知乎的味道...的确..知乎灰#989898,知乎蓝15,136,235(逃.... 1.学P图 想我大一的时候也用过不少Adobe的软件,昨天重新打开我的Ph ...
- webpack 内存溢出 Allocation failed - JavaScript heap out of memory
项目中,当组件文件过多,webpack-dev-server 编译时,容易内存溢出, 在 \node_modules\.bin\webpack-dev-server.cmd 加以下红色配置,暂可解决 ...
- 【核心】project(idea文件)、module(iml文件)到SSM集成、热部署、Tomcat启动、MAVEN依赖冲突
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/project-composition-introduce.html 在 Inte ...
- php错误提示 open_basedir restriction in effect 解决
<VirtualHost *:80> DocumentRoot "D:/www/4w_raaaa_com_2017" ServerName www.raaaa.com: ...
- SSR搭建服务器
SSR搭建服务器一站式教程:https://ssr.tools/252
- 怎样远程访问 MySQL
比如我在PC上安装有 phpmyadmin, 图形界面很友好,我的MySQL 在一台Centos 7.5服务器上,很自然的想到用phpmyadmin 去登录linux上的MySQL. 但是折腾了很久也 ...
- Jupyter 同时支持python2, python3
从docker hub 下载了一个 tensorFlow 镜像,但是里面只支持python2.7 kernel, 不支持python3 kernel. 1. Notebook的右上角点new 只看到 ...
- linux 共享内存的理解
1. 共享内存是在shmget时创建出来的, 在 shmget(USER_SHARE_MEM_KEY, sizeof(ADDR_NODE) , IPC_CREAT|0666)) ==-1) 的 s ...
- nginx 目录讲解
- ActiveMQ中JMS的可靠性机制
全文用到的生产者代码: package cn.qlq.activemq; import javax.jms.Connection; import javax.jms.ConnectionFactory ...