root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update use-tab.html

v1.0
bobi 2019-04-30 22:42:03 +08:00
parent 1829a9c924
commit ff9b47fde8
4 changed files with 127 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -42,7 +42,7 @@
<!--左侧导航区域-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="">
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">
<i class="iconfont icon-huiyuan"></i> 会员管理
@ -130,6 +130,14 @@
<dd><a href="javascript:;" path="donate.html" tab-id="9-9"><i class="iconfont icon-juanzeng"></i> 捐赠列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon">&#xe716;</i> 框架使用
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="use-tab.html" tab-id="10-1"><i class="iconfont icon-settings"></i> Tab使用</a></dd>
</dl>
</li>
</ul>
</div>
</div>
@ -158,7 +166,6 @@
<script src="lib/layui/layui.js"></script>
<script src="lib/nprogress/nprogress.js"></script>
<script src="js/okadmin.js"></script>
<script type="text/javascript"></script>
<!--天气预报插件-->
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {

45
js/okadmin.js
View File

@ -1,10 +1,20 @@
NProgress.start();
window.onload = function () {
NProgress.done();
// NProgress.start();
// window.onload = function () {
// 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 () {
var element = layui.element;
element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
@ -13,7 +23,7 @@ layui.use(["element", "layer"], function () {
*/
var href = location.href;
if (href.substring(0, 4) != "http") {
layer.alert("请先部署到 localhost 下再访问");
layer.msg("请先部署到localhost环境下再访问！", {icon: 7, time: 3000, anim: 1});
}
/**
@ -21,6 +31,7 @@ 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"});
@ -42,6 +53,28 @@ layui.use(["element", "layer"], function () {
// var title = $(this).find("a").html();
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++) {
@ -60,7 +93,7 @@ layui.use(["element", "layer"], function () {
// 切换选项卡
element.tabChange("ok-tab", tabId);
}
});
}
/**
* 修改copyright结束时间

10
use-icon.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站配置</title>
</head>
<body>
<h1>网站配置</h1>
</body>
</html>

69
use-tab.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab使用</title>
<link rel="stylesheet" href="css/okadmin.css">
</head>
<body>
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">
<a><cite>首页</cite></a>
<a><cite>框架使用</cite></a>
<a><cite>Tab使用</cite></a>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<br>
<!--代码块1-->
<blockquote class="layui-elem-quote">
使用方法1：在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>
</pre>
<!--代码块2-->
<blockquote class="layui-elem-quote">
使用方法2：用按钮点击打开
</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>
</pre>
<button class="layui-btn" id="addTab">打开一个新的Tab</button>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script>
<script>
layui.use(["element", "code"], function () {
layui.code({about: false});
var $ = layui.jquery;
$("#addTab").click(function () {
tabAdd("xx", "", 888)
});
})
</script>
</body>
</html>