【layui】tabs 控件内通过 iframe 加载url 方式渲染tab页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tabs 内部使用 iframe 嵌套 url 页面</title>
<link rel="stylesheet" href="../../../libs/layui/layui-2.4.5/dist/css/layui.css">
<script src="../../../libs//layui/layui-2.4.5/dist/layui.js"></script>
<style>
/**
* iframe 自适应方案
*/
.layui-tab-content .layui-show {
position: fixed;
width: 100%;
height: 90%;
top: 10%;
left: 0;
}
</style>
</head>
<body>
<div class="layui-fluid weadmin-body">
<div class="layui-tab layui-tab-brief" lay-filter="tabs">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="0">明细</li>
<li lay-id="1">汇总</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="">
<iframe id="iframe_jylc_0" frameborder="0" src="./1.html" scrolling="yes" class="weIframe"
style="width: 100%;height: 100%;">
</iframe>
</div>
<div class="layui-tab-item ">
<iframe id="iframe_jylc_1" frameborder="0" src="./2.html" scrolling="yes" class="weIframe"
style="width: 100%;height: 100%;">
</iframe>
</div>
</div>
</div>
</div>
<script>
layui.use(['jquery', 'layer', 'form', 'table', 'laydate', 'util', 'upload', 'element'],
function () {
var Hussar = layui.Hussar;
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var laydate = layui.laydate;
var $ax = layui.HussarAjax;
var element = layui.element;
var table = layui.table;
var util = layui.util;
var layerWindow;
var upload = layui.upload;
//tabs 点击事件触发
element.on('tab(tabs)', function (data) {
// console.log(data);
// console.log($(this)); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
// console.log(data.elem); //得到当前的Tab大容器
// $(data)
// console.log($("#iframe_jylc_"+data.index))
});
})
;
</script>
</body>
</html>内部的 1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab1</title>
<style>
</style>
</head>
<body>
<div style="width: 100%;height: 100%;border:1px solid green;">
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
<span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
</div>
</body>
</html>2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab2</title>
</head>
<body>
<div style="width: 100%;height: 100%;border:1px solid blue;">
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
<div>hello,world!222</div>
</div>
</body>
</html>效果图：
