原理：
1、a 链接不走href进行跳转，属性target设置为网页地址
2、通过click鼠标点击 动态渲染 div 内容， 自动引入iframe实现：
1.首页搭建
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layui</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="header"></div>
</div>
<div class="layui-side layui-bg-black left">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree list-side" id="menu">
<!-- <li class="layui-nav-item">
<a target="1.html">test
<span class="line"></span>
<i class="link-name"></i>
</a>
</li> -->
</ul>
<div id="iframe">
<!--jquery插入html位址-->
</div>
</div>
</div>
<div class="layui-body">
<div style="padding: 15px;">内容主体区域</div>
</div>
</div>
<script src="../js/layui/layui.js"></script>
<script src="../js/common/header.js"></script>
<script src="../js/common/common.js"></script>
<script src="../js/index.js"></script>
</body>
</html>
index.js
layui.use(['jquery','layer','element','form','table','laydate'], function(exports){
var $ = layui.jquery,
layer = layui.layer,
element = layui.element,
form = layui.form,
table = layui.table,
laydate = layui.laydate,
header = layui.header;
header.init($,0,"icon_case",element); // 生成公共头、左侧菜单栏等
$('.list-side li').click(function(){
var _clickLink = $(this).find('a').attr('target');//找到链接a中的target的值
if(_clickLink){
var _clickLink_arr1 = _clickLink.split("&p_shortname=");
var _clickLink_arr2 = _clickLink_arr1[0].split("childrenli=");
var childrenli = _clickLink_arr2[1];
var p_shortname = _clickLink_arr1[1];
$("li").removeClass("layui-this");
$(".nav_pop a").removeClass("active");
$("."+p_shortname).addClass("layui-this");
$("."+p_shortname+" .nav_pop li").eq(childrenli).find("a").addClass("active");
console.log(_clickLink, childrenli, p_shortname)
$("#iframe").load(_clickLink);
}
});
});
header.js
var winW = window.innerWidth;
var winH = window.innerHeight;
var table_h = winH - 45 - 15*2 - 64 -10;
var pageSize = parseInt((table_h - 42 - 43 )/43);
layui.config({
base: '../js/layui/lay/modules/' //假设这是cookie.js所在的目录（本页面的相对路径）
}).extend({ //设定模块别名
//cookie: 'cookie'
});
layui.define(function(exports){
var obj = {
....
init: function(){ .... }
}
//输出接口
exports('header', obj);
});
2.分页面搭建:
注意： 分页面不要在引入layui.js, 不然会报错jq找不到等 因重复引入的问题
分页面只需要实现主体部门的功能就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layui</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 搜索条 -->
<form class="layui-form layui-form-search" lay-filter="formSearch">
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<div class="layui-inline">
<div class="layui-input-inline">
<input class="layui-input layui-input-search">
</div>
<button type="button" class="layui-btn" lay-submit lay-filter="search">查询</button>
</div>
</div>
<div class="layui-col-md9">
<button type="button" class="layui-btn" id="add">创建</button>
</div>
</div>
</form>
<!-- 表格 -->
<table id="table" lay-filter="table"></table>
</div>
</div>
<script src="../js/common/common.js"></script>
<script src="../js/xmgl_fq.js"></script>
</body>
</html>3.效果： 切换链接地址，仅主体内容切换； 弹窗也是全局展示；
扫一扫
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
