<!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="111"><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:12345678911</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[0].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: \'111\' }); }); /*使用下面的方式需要引用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>