add tab right menu
就眠仪式
parent
419b2ca9a8
commit
88a153c13e
|
|
@ -12,6 +12,26 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.pear-tab-menu{
|
||||
box-shadow: 0 2px 8px #f0f1f2!important;
|
||||
border: 1px solid whitesmoke!important;
|
||||
border-radius: 4px!important;
|
||||
}
|
||||
|
||||
.pear-tab-menu .item{
|
||||
height: 20px;
|
||||
padding-left: 18px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
color: #333;
|
||||
font-size: 13.5px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.pear-tab-menu .item:hover{
|
||||
background: #36b368;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pear-tab .layui-tab-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,24 +23,24 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
width: opt.width,
|
||||
height: opt.height,
|
||||
tabMax: opt.tabMax,
|
||||
session: opt.session?opt.session:false,
|
||||
session: opt.session ? opt.session : false,
|
||||
closeEvent: opt.closeEvent,
|
||||
success: opt.success?opt.success:function(id){}
|
||||
success: opt.success ? opt.success : function(id) {}
|
||||
}
|
||||
|
||||
// 初始化，检索 session 是否开启
|
||||
if(option.session){
|
||||
if (option.session) {
|
||||
// 替换 opt.data 数据
|
||||
if(sessionStorage.getItem(option.elem+"-pear-tab-data")!=null){
|
||||
tabData = JSON.parse(sessionStorage.getItem(option.elem+"-pear-tab-data"));
|
||||
option.data = JSON.parse(sessionStorage.getItem(option.elem+"-pear-tab-data"));
|
||||
tabDataCurrent = sessionStorage.getItem(option.elem+"-pear-tab-data-current");
|
||||
tabData.forEach(function(item,index){
|
||||
if(item.id == tabDataCurrent){
|
||||
if (sessionStorage.getItem(option.elem + "-pear-tab-data") != null) {
|
||||
tabData = JSON.parse(sessionStorage.getItem(option.elem + "-pear-tab-data"));
|
||||
option.data = JSON.parse(sessionStorage.getItem(option.elem + "-pear-tab-data"));
|
||||
tabDataCurrent = sessionStorage.getItem(option.elem + "-pear-tab-data-current");
|
||||
tabData.forEach(function(item, index) {
|
||||
if (item.id == tabDataCurrent) {
|
||||
option.index = index;
|
||||
}
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
tabData = opt.data;
|
||||
}
|
||||
}
|
||||
|
|
@ -62,8 +62,49 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
});
|
||||
closeEvent(option);
|
||||
|
||||
option.success(sessionStorage.getItem(option.elem+"-pear-tab-data-current"));
|
||||
// 执行回调
|
||||
option.success(sessionStorage.getItem(option.elem + "-pear-tab-data-current"));
|
||||
|
||||
$("body .layui-tab[lay-filter='" + option.elem + "']").on("contextmenu", "li", function(e) {
|
||||
|
||||
// 获取当前元素位置
|
||||
var top = e.clientY;
|
||||
var left = e.clientX;
|
||||
|
||||
var currentId = $(this).attr("lay-id");
|
||||
|
||||
var menu = "<ul><li class='item' id='" + option.elem + "closeThis'>关闭当前</li><li class='item' id='" + option.elem +
|
||||
"closeOther'>关闭其他</li><li class='item' id='" + option.elem + "closeAll'>关闭所有</li></ul>"
|
||||
|
||||
// 初始化
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
shade: false,
|
||||
skin: 'pear-tab-menu',
|
||||
closeBtn: false,
|
||||
area: ['100px', '108px'],
|
||||
fixed: true,
|
||||
offset: [top, left],
|
||||
content: menu, //iframe的url,
|
||||
success: function(layero, index) {
|
||||
menuEvent(option,index);
|
||||
console.log("初始化")
|
||||
var timer;
|
||||
$(layero).on('mouseout', function() {
|
||||
timer = setTimeout(function() {
|
||||
layer.close(index);
|
||||
}, 30)
|
||||
});
|
||||
|
||||
$(layero).on('mouseover', function() {
|
||||
clearTimeout(timer);
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
})
|
||||
|
||||
return new pearTab(option);
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +113,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
var option = this.option;
|
||||
element.on('tab(' + this.option.elem + ')', function(data) {
|
||||
var id = $("#" + elem + " .layui-tab-title .layui-this").attr("lay-id");
|
||||
sessionStorage.setItem(option.elem+"-pear-tab-data-current",id);
|
||||
sessionStorage.setItem(option.elem + "-pear-tab-data-current", id);
|
||||
callback(id);
|
||||
});
|
||||
}
|
||||
|
|
@ -92,9 +133,9 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
}, 200);
|
||||
}
|
||||
|
||||
pearTab.prototype.clear = function(){
|
||||
sessionStorage.removeItem(this.option.elem+"-pear-tab-data");
|
||||
sessionStorage.removeItem(this.option.elem+"-pear-tab-data-current");
|
||||
pearTab.prototype.clear = function() {
|
||||
sessionStorage.removeItem(this.option.elem + "-pear-tab-data");
|
||||
sessionStorage.removeItem(this.option.elem + "-pear-tab-data-current");
|
||||
}
|
||||
|
||||
pearTab.prototype.addTab = function(opt) {
|
||||
|
|
@ -113,23 +154,23 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
id: opt.id
|
||||
});
|
||||
tabData.push(opt);
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data-current", opt.id);
|
||||
element.tabChange(this.option.elem, opt.id);
|
||||
}
|
||||
|
||||
var index = 0;
|
||||
|
||||
// 根据过滤 filter 标识, 删除执行选项卡
|
||||
pearTab.prototype.delTabByElem = function(elem, id, callback){
|
||||
var currentTab = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title [lay-id='"+id+"']");
|
||||
pearTab.prototype.delTabByElem = function(elem, id, callback) {
|
||||
var currentTab = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title [lay-id='" + id + "']");
|
||||
if (currentTab.find("span").is(".able-close")) {
|
||||
tabDelete(elem, id, callback);
|
||||
}
|
||||
}
|
||||
|
||||
// 根据过滤 filter 标识, 删除当前选项卡
|
||||
pearTab.prototype.delCurrentTabByElem = function(elem,callback){
|
||||
pearTab.prototype.delCurrentTabByElem = function(elem, callback) {
|
||||
var currentTab = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title .layui-this");
|
||||
if (currentTab.find("span").is(".able-close")) {
|
||||
var currentId = currentTab.attr("lay-id");
|
||||
|
|
@ -173,7 +214,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
id: opt.id
|
||||
});
|
||||
tabData.push(opt);
|
||||
sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
} else {
|
||||
var isData = false;
|
||||
$.each($(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li[lay-id]"), function() {
|
||||
|
|
@ -207,11 +248,11 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
id: opt.id
|
||||
});
|
||||
tabData.push(opt);
|
||||
sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem(elem+"-pear-tab-data-current",opt.id);
|
||||
sessionStorage.setItem(elem + "-pear-tab-data-current", opt.id);
|
||||
element.tabChange(elem, opt.id);
|
||||
}
|
||||
|
||||
|
|
@ -249,8 +290,8 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
id: opt.id
|
||||
});
|
||||
tabData.push(opt);
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data-current", opt.id);
|
||||
} else {
|
||||
var isData = false;
|
||||
//查询当前选项卡数量
|
||||
|
|
@ -258,7 +299,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
layer.msg("最多打开" + this.option.tabMax + "个标签页", {
|
||||
icon: 2,
|
||||
time: 1000,
|
||||
shift : 6 //抖动效果
|
||||
shift: 6 //抖动效果
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
|
@ -292,12 +333,12 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
id: opt.id
|
||||
});
|
||||
tabData.push(opt);
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data-current", opt.id);
|
||||
}
|
||||
}
|
||||
element.tabChange(this.option.elem, opt.id);
|
||||
sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
|
||||
sessionStorage.setItem(this.option.elem + "-pear-tab-data-current", opt.id);
|
||||
}
|
||||
|
||||
// 刷 新 指 定 的 选 项 卡
|
||||
|
|
@ -318,7 +359,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
});
|
||||
index++;
|
||||
setTimeout(function() {
|
||||
pearLoad.fadeOut(500,function(){
|
||||
pearLoad.fadeOut(500, function() {
|
||||
pearLoad.remove();
|
||||
});
|
||||
}, time);
|
||||
|
|
@ -330,7 +371,8 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
}
|
||||
}
|
||||
|
||||
function tabDelete(elem, id, callback,option) {
|
||||
|
||||
function tabDelete(elem, id, callback, option) {
|
||||
|
||||
//根据 elem id 来删除指定的 layui title li
|
||||
var tabTitle = $(".layui-tab[lay-filter='" + elem + "']").find(".layui-tab-title");
|
||||
|
|
@ -338,17 +380,17 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
// 删除指定 id 的 title
|
||||
var removeTab = tabTitle.find("li[lay-id='" + id + "']");
|
||||
var nextNode = removeTab.next("li");
|
||||
if(!removeTab.hasClass("layui-this")){
|
||||
if (!removeTab.hasClass("layui-this")) {
|
||||
removeTab.remove();
|
||||
var tabContent = $(".layui-tab[lay-filter='" + elem + "']").find("iframe[id='" + id + "']").parent();
|
||||
tabContent.remove();
|
||||
|
||||
tabData = JSON.parse(sessionStorage.getItem(elem+"-pear-tab-data"));
|
||||
tabDataCurrent = sessionStorage.getItem(elem+"-pear-tab-data-current");
|
||||
tabData = tabData.filter(function(item){
|
||||
return item.id!=id;
|
||||
tabData = JSON.parse(sessionStorage.getItem(elem + "-pear-tab-data"));
|
||||
tabDataCurrent = sessionStorage.getItem(elem + "-pear-tab-data-current");
|
||||
tabData = tabData.filter(function(item) {
|
||||
return item.id != id;
|
||||
})
|
||||
sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -364,13 +406,13 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
|
||||
}
|
||||
callback(currId);
|
||||
tabData = JSON.parse(sessionStorage.getItem(elem+"-pear-tab-data"));
|
||||
tabDataCurrent = sessionStorage.getItem(elem+"-pear-tab-data-current");
|
||||
tabData = tabData.filter(function(item){
|
||||
return item.id!=id;
|
||||
tabData = JSON.parse(sessionStorage.getItem(elem + "-pear-tab-data"));
|
||||
tabDataCurrent = sessionStorage.getItem(elem + "-pear-tab-data-current");
|
||||
tabData = tabData.filter(function(item) {
|
||||
return item.id != id;
|
||||
})
|
||||
sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
|
||||
sessionStorage.setItem(elem+"-pear-tab-data-current",currId);
|
||||
sessionStorage.setItem(elem + "-pear-tab-data", JSON.stringify(tabData));
|
||||
sessionStorage.setItem(elem + "-pear-tab-data-current", currId);
|
||||
|
||||
removeTab.remove();
|
||||
// 删除 content
|
||||
|
|
@ -382,7 +424,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
function createTab(option) {
|
||||
|
||||
var type = "";
|
||||
var types = option.type+" ";
|
||||
var types = option.type + " ";
|
||||
if (option.roll == true) {
|
||||
type = "layui-tab-roll";
|
||||
}
|
||||
|
|
@ -392,10 +434,12 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
if (option.roll == true && option.tool != false) {
|
||||
type = "layui-tab-rollTool";
|
||||
}
|
||||
var tab = '<div class="pear-tab ' + types + type + ' layui-tab" lay-filter="' + option.elem + '" lay-allowClose="true">';
|
||||
var tab = '<div class="pear-tab ' + types + type + ' layui-tab" lay-filter="' + option.elem +
|
||||
'" lay-allowClose="true">';
|
||||
var title = '<ul class="layui-tab-title">';
|
||||
var content = '<div class="layui-tab-content">';
|
||||
var control = '<div class="layui-tab-control"><li class="layui-tab-prev layui-icon layui-icon-left"></li><li class="layui-tab-next layui-icon layui-icon-right"></li><li class="layui-tab-tool layui-icon layui-icon-down"><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="javascript:;"></a><dl class="layui-nav-child">';
|
||||
var control =
|
||||
'<div class="layui-tab-control"><li class="layui-tab-prev layui-icon layui-icon-left"></li><li class="layui-tab-next layui-icon layui-icon-right"></li><li class="layui-tab-tool layui-icon layui-icon-down"><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="javascript:;"></a><dl class="layui-nav-child">';
|
||||
|
||||
// 处 理 选 项 卡 头 部
|
||||
var index = 0;
|
||||
|
|
@ -463,19 +507,65 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
function closeEvent(option) {
|
||||
$(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() {
|
||||
var layid = $(this).parent().attr("lay-id");
|
||||
tabDelete(option.elem, layid, option.closeEvent,option);
|
||||
tabDelete(option.elem, layid, option.closeEvent, option);
|
||||
})
|
||||
}
|
||||
|
||||
function menuEvent(option,index) {
|
||||
|
||||
$("#" + option.elem + "closeThis").click(function() {
|
||||
var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
|
||||
|
||||
if (currentTab.find("span").is(".able-close")) {
|
||||
var currentId = currentTab.attr("lay-id");
|
||||
tabDelete(option.elem, currentId, option.closeEvent, option);
|
||||
} else {
|
||||
layer.msg("当前页面不允许关闭", {
|
||||
icon: 3,
|
||||
time: 800
|
||||
})
|
||||
}
|
||||
layer.close(index);
|
||||
})
|
||||
|
||||
$("#" + option.elem + "closeOther").click(function() {
|
||||
var currentId = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this").attr("lay-id");
|
||||
var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
|
||||
$.each(tabtitle, function(i) {
|
||||
if ($(this).attr("lay-id") != currentId) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent, option);
|
||||
}
|
||||
}
|
||||
})
|
||||
layer.close(index);
|
||||
})
|
||||
|
||||
$("#" + option.elem + "closeAll").click(function() {
|
||||
var currentId = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this").attr("lay-id");
|
||||
var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
|
||||
$.each(tabtitle, function(i) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent, option);
|
||||
}
|
||||
})
|
||||
layer.close(index);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function toolEvent(option) {
|
||||
|
||||
$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeThis", function() {
|
||||
var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
|
||||
if (currentTab.find("span").is(".able-close")) {
|
||||
var currentId = currentTab.attr("lay-id");
|
||||
tabDelete(option.elem, currentId, option.closeEvent,option);
|
||||
}else{
|
||||
layer.msg("当前页面不允许关闭",{icon:3,time:800})
|
||||
tabDelete(option.elem, currentId, option.closeEvent, option);
|
||||
} else {
|
||||
layer.msg("当前页面不允许关闭", {
|
||||
icon: 3,
|
||||
time: 800
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -485,7 +575,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
$.each(tabtitle, function(i) {
|
||||
if ($(this).attr("lay-id") != currentId) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent,option);
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent, option);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -496,7 +586,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
|
||||
$.each(tabtitle, function(i) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent,option);
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent, option);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ layui.config({
|
|||
yaml:"yaml", // yaml 解析组件
|
||||
context: "context", // 上下文组件
|
||||
http: "http", // ajax请求组件
|
||||
theme: "theme" // 主题转换
|
||||
theme: "theme", // 主题转换
|
||||
}).use(['layer', 'theme'], function () {
|
||||
layui.theme.changeTheme(window, false);
|
||||
});
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>选项卡插件测试</title>
|
||||
<link rel="stylesheet" href="assets/layui/css/layui.css" media="all">
|
||||
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>选项卡1</h1>
|
||||
<div id="nav1">
|
||||
<!-- 顶部切换卡 -->
|
||||
<!--ul的id要和lay-filter一致-->
|
||||
<div class="layui-tab" lay-filter="main_tab1">
|
||||
<ul id="main_tab1" class="layui-tab-title">
|
||||
<li lay-id="0" class="layui-this">网站设置</li>
|
||||
<li lay-id="1">用户管理</li>
|
||||
<li lay-id="2">权限分配</li>
|
||||
<li lay-id="3">商品管理</li>
|
||||
<li lay-id="4">订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">这是 网站设置 内容</div>
|
||||
<div class="layui-tab-item">这是 用户管理 内容</div>
|
||||
<div class="layui-tab-item">这是 权限分配 内容</div>
|
||||
<div class="layui-tab-item">这是 商品管理 内容</div>
|
||||
<div class="layui-tab-item">这是 订单管理 内容</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>选项卡2</h1>
|
||||
<div id="nav2">
|
||||
<!-- 顶部切换卡 -->
|
||||
<div class="layui-tab" lay-filter="main_tab2">
|
||||
<ul id="main_tab2" class="layui-tab-title">
|
||||
<li lay-id="11" class="layui-this">权限管理</li>
|
||||
<li lay-id="12">机构管理</li>
|
||||
<li lay-id="21">字典管理</li>
|
||||
<li lay-id="31">用户管理</li>
|
||||
<li lay-id="41">物流管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">这是 权限管理 内容</div>
|
||||
<div class="layui-tab-item">这是 机构管理 内容</div>
|
||||
<div class="layui-tab-item">这是 字典管理 内容</div>
|
||||
<div class="layui-tab-item">这是 用户管理 内容</div>
|
||||
<div class="layui-tab-item">这是 物流管理 内容</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['tabrightmenu'], function () {
|
||||
let element = layui.element;
|
||||
let rightmenu_ = layui.tabrightmenu;
|
||||
|
||||
// 默认方式渲染全部：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closeleft）、关闭右侧所有（closeright）、刷新当前页（refresh）
|
||||
rightmenu_.render({
|
||||
container: '#nav1',
|
||||
filter: 'main_tab1',
|
||||
});
|
||||
|
||||
// 默认渲染部分弹出项
|
||||
rightmenu_.render({
|
||||
container: '#nav2',
|
||||
filter: 'main_tab2',
|
||||
// navArr：对象数组，每个对象包含dataType、title、method属性
|
||||
navArr: [
|
||||
//自定义菜单项，此时dataType属性表示自定义事件
|
||||
{title: "测试", eventName: 'test'},
|
||||
{title: "测试2", eventName: 'test2'},
|
||||
],
|
||||
// 注册自定义事件
|
||||
registMethod: {'test': testMethod, 'test2': test2Method}
|
||||
})
|
||||
|
||||
function testMethod(id, title, currentNavGroup, dom) {
|
||||
changeCurrentTabContent(currentNavGroup, "[测试]触发,触发的ID：" + id + "，标题：" + title);
|
||||
}
|
||||
|
||||
function test2Method(id, title, currentNavGroup, dom) {
|
||||
changeCurrentTabContent(currentNavGroup, "[测试2]触发,触发的ID：" + id + "，标题：" + title);
|
||||
}
|
||||
|
||||
function changeCurrentTabContent(currentNavGroup, content) {
|
||||
$(currentNavGroup + " div[class='layui-tab-item layui-show']").html(content);
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue