121 lines
4.2 KiB
HTML
121 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>用户列表</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
||
<style>
|
||
.ok-body {
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="ok-body">
|
||
<blockquote class="layui-elem-quote">
|
||
<p>主要讲述如何在内部页面添加导航。</p>
|
||
<p>特别注意：添加导航的同时必须要遵守指定的写法</p>
|
||
<p>1.必须指定一个html元素</p>
|
||
<p>2.此元素的属性必须有data-url和lay-id</p>
|
||
<p>3.data-url属性表示指定的页面且必须是网站的绝对路径</p>
|
||
<p>4.lay-id属性，请不要以数字开头，推荐以字母开头，长度不限</p>
|
||
<p>5.当lay-id重复时，那么则只会打开一个，后者只会定位到当前选项卡</p>
|
||
</blockquote>
|
||
<pre lay-title="JavaScript">
|
||
layui.use(['okTab'],function(){
|
||
var okTab = layui.okTab();
|
||
var page = '<div lay-id="add-1" data-url="/pages/user/user.html">个人中心</div>';
|
||
okTab.tabAdd(page);
|
||
})
|
||
</pre>
|
||
<div class="layui-card">
|
||
<button class="layui-btn" id="addNav1">
|
||
<i class="layui-icon"></i>新的选项卡1
|
||
</button>
|
||
<button class="layui-btn" id="addNav2">
|
||
<i class="layui-icon"></i>新的选项卡2
|
||
</button>
|
||
<button class="layui-btn" id="addNav3" lay-id="add-3" data-url="https://cn.vuejs.org/v2/api/">
|
||
<i class="layui-icon"></i>新的选项卡3
|
||
</button>
|
||
<button class="layui-btn" id="addNav4" data-url="/pages/user/user.html">
|
||
<i class="layui-icon"></i>没有加lay-id
|
||
</button>
|
||
<a class="layui-btn" href="../../pages/user/user.html">普通跳转页</a>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<button class="param layui-btn" data-url="/pages/help/navOperate.html?param=a">
|
||
跳转传参a
|
||
</button>
|
||
<button class="param layui-btn" data-url="/pages/help/navOperate.html?param=b">
|
||
跳转传参b
|
||
</button>
|
||
<button class="param2 layui-btn">
|
||
不会被关闭的导航c
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script src="../../lib/layui/layui.js"></script>
|
||
<script type="text/javascript">
|
||
function getUrlParam(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
||
if (r != null) return unescape(r[2]);
|
||
return null; //返回参数值
|
||
}
|
||
</script>
|
||
<script type="text/javascript">
|
||
layui.use(['element', 'table', 'form', 'jquery', 'laydate', 'okTab', 'code'], function () {
|
||
var $ = layui.jquery;
|
||
var p_layer = parent.layer || layer;
|
||
var okTab = layui.okTab();
|
||
|
||
var code = layui.code;
|
||
code({
|
||
elem: 'pre'
|
||
});
|
||
|
||
$("#addNav1").click(function () {
|
||
//方式一（推荐）
|
||
var url = "pages/user/user.html";
|
||
var page = '<div lay-id="add-1" data-url="' + url + '"><cite>个人中心</cite></div>';
|
||
okTab.tabAdd(page);
|
||
});
|
||
|
||
$("#addNav2").click(function () {
|
||
//方式二(获取父级对象进行添加)
|
||
var p_layui = parent.layui;//获取父级的layui
|
||
var p_okTab = p_layui.okTab();//拿到导航操作对象
|
||
var url = "pages/user/user.html";
|
||
var page = '<a lay-id="u-1" href="javascript:;" data-url="' + url + '"><cite>个人中心</cite><span class="layui-badge-dot"></span></a>';
|
||
p_okTab.tabAdd(page);
|
||
});
|
||
|
||
$("#addNav3,#addNav4").click(function () {
|
||
okTab.tabAdd(this);
|
||
});
|
||
|
||
$("button.param").click(function () {
|
||
var url = $(this).attr("data-url");
|
||
var page = '<div lay-id="param" data-url="' + url + '"><cite>选项卡传参</cite></div>';
|
||
okTab.tabAdd(page);
|
||
});
|
||
$("button.param2").click(function () {
|
||
var url = '/pages/help/navOperate.html?param=c';
|
||
var page = '<div lay-id="param2" is-close="false" data-url="' + url + '">不会被关闭</div>';
|
||
okTab.tabAdd(page);
|
||
});
|
||
|
||
var getParam = getUrlParam("param");
|
||
if (getParam) {
|
||
layer.msg("参数为" + getParam);
|
||
}
|
||
});
|
||
|
||
</script>
|