tabAdd逻辑完善
bobi
parent
ff9b47fde8
commit
a1d4b7f8e6
138
js/okadmin.js
138
js/okadmin.js
|
|
@ -3,18 +3,8 @@
|
|||
// NProgress.done();
|
||||
// }
|
||||
|
||||
function addTab() {
|
||||
console.log(self != top)
|
||||
if (self != top) {
|
||||
console.log("在iframe中")
|
||||
} else {
|
||||
console.log("不在iframe中")
|
||||
}
|
||||
}
|
||||
|
||||
var element;
|
||||
layui.use(["element", "layer"], function () {
|
||||
element = layui.element;
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
|
|
@ -31,7 +21,6 @@ layui.use(["element", "layer"], function () {
|
|||
* @type {boolean}
|
||||
*/
|
||||
$(".menu-switch").click(function () {
|
||||
addTab();
|
||||
if ($(".layui-layout-admin .layui-side").css("left") == '0px') {
|
||||
$(".layui-layout-admin .layui-side").animate({left: "-200px"});
|
||||
$(".layui-layout-admin .content-body").animate({left: "0px"});
|
||||
|
|
@ -54,47 +43,87 @@ layui.use(["element", "layer"], function () {
|
|||
var path = $(this).children("a").attr("path");
|
||||
var tabId = $(this).children("a").attr("tab-id");
|
||||
tabAdd(title, path, tabId);
|
||||
// if (path != undefined && path != "" && tabId != undefined && tabId != "") {
|
||||
// // 去重复选项卡
|
||||
// for (var i = 0; i < $(".ok-frame").length; i++) {
|
||||
// if ($(".ok-frame").eq(i).attr("tab-id") == tabId) {
|
||||
// element.tabChange("ok-tab", tabId);
|
||||
// event.stopPropagation();
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// // 添加选项卡
|
||||
// element.tabAdd("ok-tab", {
|
||||
// title: title,
|
||||
// content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
|
||||
// id: tabId
|
||||
// });
|
||||
// // 切换选项卡
|
||||
// element.tabChange("ok-tab", tabId);
|
||||
// }
|
||||
});
|
||||
|
||||
function tabAdd(title ,path, tabId) {
|
||||
if (path != undefined && path != "" && tabId != undefined && tabId != "") {
|
||||
// 去重复选项卡
|
||||
for (var i = 0; i < $(".ok-frame").length; i++) {
|
||||
if ($(".ok-frame").eq(i).attr("tab-id") == tabId) {
|
||||
element.tabChange("ok-tab", tabId);
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 添加选项卡
|
||||
element.tabAdd("ok-tab", {
|
||||
title: title,
|
||||
content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
|
||||
id: tabId
|
||||
});
|
||||
// 切换选项卡
|
||||
element.tabChange("ok-tab", tabId);
|
||||
/**
|
||||
* 添加tab
|
||||
* @param title 标题
|
||||
* @param path 路径
|
||||
* @param tabId tabId必须唯一
|
||||
*/
|
||||
window.tabAdd = function (title, path, tabId) {
|
||||
if (self == top) {
|
||||
console.log("不在iframe中")
|
||||
tabAdd1(title, path, tabId)
|
||||
} else {
|
||||
console.log("在iframe中")
|
||||
tabAdd2(title, path, tabId)
|
||||
}
|
||||
}
|
||||
|
||||
function tabAdd1(title, path, tabId) {
|
||||
// 参数校验
|
||||
parameterCheck(title, path, tabId);
|
||||
// 去重复选项卡
|
||||
var okFrame = $(".ok-frame");
|
||||
for (var i = 0; i < okFrame.length; i++) {
|
||||
var _tabId = okFrame.eq(i).attr("tab-id");
|
||||
if (_tabId == tabId) {
|
||||
element.tabChange("ok-tab", tabId);
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 添加选项卡
|
||||
element.tabAdd("ok-tab", {
|
||||
title: title,
|
||||
content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
|
||||
id: tabId
|
||||
});
|
||||
// 切换选项卡
|
||||
element.tabChange("ok-tab", tabId);
|
||||
}
|
||||
|
||||
function tabAdd2(title, path, tabId) {
|
||||
// 参数校验
|
||||
parameterCheck(title, path, tabId);
|
||||
// 去重复选项卡
|
||||
var parentOkFrame = $(".ok-frame", parent.document);
|
||||
for (var i = 0; i < parentOkFrame.length; i++) {
|
||||
var _tabId = parentOkFrame.eq(i).attr("tab-id");
|
||||
if (_tabId == tabId) {
|
||||
console.warn("tabId=" + tabId + "有重复元素,请检查！")
|
||||
parent.layui.element.tabChange("ok-tab", tabId);
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 添加选项卡
|
||||
parent.layui.element.tabAdd("ok-tab", {
|
||||
title: title,
|
||||
content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
|
||||
id: tabId
|
||||
});
|
||||
// 切换选项卡
|
||||
parent.layui.element.tabChange("ok-tab", tabId);
|
||||
}
|
||||
|
||||
function parameterCheck(title, path, tabId) {
|
||||
if (title == undefined || title == "") {
|
||||
console.error("title未定义")
|
||||
return false;
|
||||
}
|
||||
if (path == undefined || path == "") {
|
||||
console.error("path未定义")
|
||||
return false;
|
||||
}
|
||||
if (tabId == undefined || tabId == "") {
|
||||
console.error("tabId未定义")
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改copyright结束时间
|
||||
*/
|
||||
|
|
@ -163,13 +192,12 @@ layui.use(["element", "layer"], function () {
|
|||
});
|
||||
});
|
||||
|
||||
console.log(" _ _ _ \n" +
|
||||
" | | | | (_) \n" +
|
||||
" ___ | | _ _____ _____ __| |____ _ ____ \n" +
|
||||
" / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" +
|
||||
"| |_| | _ ( / ___ ( (_| | | | | | | | |\n" +
|
||||
" \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" +
|
||||
" \n" +
|
||||
console.log(" __ .___ .__ \n" +
|
||||
" ____ | | __ _____ __| _/_____ |__| ____ \n" +
|
||||
" / _ \\| |/ / ______ \\__ \\ / __ |/ \\| |/ \\ \n" +
|
||||
"( <_> ) < /_____/ / __ \\_/ /_/ | Y Y \\ | | \\\n" +
|
||||
" \\____/|__|_ \\ (____ /\\____ |__|_| /__|___| /\n" +
|
||||
" \\/ \\/ \\/ \\/ \\/ \n" +
|
||||
"版本：v1.0\n" +
|
||||
"作者：bobi\n" +
|
||||
"邮箱：bobi1234@foxmail.com\n" +
|
||||
|
|
|
|||
37
use-tab.html
37
use-tab.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab使用</title>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<br>
|
||||
<!--代码块1-->
|
||||
<blockquote class="layui-elem-quote">
|
||||
使用方法1：在index.html中添加
|
||||
使用方法1：在index.html左侧中添加
|
||||
</blockquote>
|
||||
<pre class="layui-code" lay-title="HTML" lay-encode="true">
|
||||
<li class="layui-nav-item">
|
||||
|
|
@ -37,18 +37,29 @@
|
|||
|
||||
<!--代码块2-->
|
||||
<blockquote class="layui-elem-quote">
|
||||
使用方法2：用按钮点击打开
|
||||
使用方法2：在index.html顶部中添加
|
||||
</blockquote>
|
||||
<pre class="layui-code" lay-title="HTML" lay-encode="true">
|
||||
<li class="layui-nav-item">
|
||||
<a class="" href="javascript:;">
|
||||
<i class="iconfont icon-ai-new"></i> XX管理
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
// tab-id不可和其它菜单重复
|
||||
<dd><a href="javascript:;" path="xx.html" tab-id="xx-1"><i class="iconfont icon-xx"></i> xx列表</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;" path="user-center.html" tab-id="0-1">个人中心<span class="layui-badge-dot"></span></a></dd>
|
||||
<dd><a href="javascript:;" path="user-info.html" tab-id="0-2">基本资料</a></dd>
|
||||
<dd><a href="javascript:;" path="user-security.html" tab-id="0-3">安全设置</a></dd>
|
||||
<dd><a href="javascript:;" id="lock">锁定账户</a></dd>
|
||||
</dl>
|
||||
</pre>
|
||||
|
||||
<!--代码块3-->
|
||||
<blockquote class="layui-elem-quote">
|
||||
使用方法3：用按钮点击打开
|
||||
</blockquote>
|
||||
<pre class="layui-code" lay-title="HTML" lay-encode="true">
|
||||
/**
|
||||
* 添加tab
|
||||
* @param title 标题
|
||||
* @param path 路径
|
||||
* @param tabId tabId必须唯一
|
||||
*/
|
||||
tabAdd("百度", "http://www.xlbweb.cn", "11-1")
|
||||
</pre>
|
||||
<button class="layui-btn" id="addTab">打开一个新的Tab</button>
|
||||
</div>
|
||||
|
|
@ -61,7 +72,7 @@
|
|||
var $ = layui.jquery;
|
||||
|
||||
$("#addTab").click(function () {
|
||||
tabAdd("xx", "", 888)
|
||||
tabAdd("百度", "http://tool.xlbweb.cn", "11-1")
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue