root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add tab right menu

develop
就眠仪式 2021-03-11 02:04:53 +08:00
parent 419b2ca9a8
commit 88a153c13e
5 changed files with 283 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
component/pear/css/pear-module/tab.css
View File

@ -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;
}

2
component/pear/modules/admin.js
View File

@ -243,7 +243,7 @@ layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'fram
bodyTab.clear();
}
})
body.on("click", ".collaspe,.pear-cover", function() {
collaspe();
});

232
component/pear/modules/tab.js
View File

@ -8,7 +8,7 @@ layui.define(['jquery', 'element'], function(exports) {
var pearTab = function(opt) {
this.option = opt;
};
var tabData = new Array();
var tabDataCurrent = 0;
@ -23,28 +23,28 @@ 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;
}
}
var tab = createTab(option);
$("#" + option.elem).html(tab);
$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-prev").click(function() {
@ -61,9 +61,50 @@ layui.define(['jquery', 'element'], function(exports) {
position: "relative"
});
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);
});
}
@ -91,10 +132,10 @@ layui.define(['jquery', 'element'], function(exports) {
scrollLeft: autoLeft - $tabTitle.width() / 3
}, 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,28 +154,28 @@ 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){
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");
tabDelete(elem, currentId, 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");
tabDelete(elem, currentId, callback);
}
}
// 通过过滤 filter 标识, 新增标签页
@ -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);
}
// 刷 新 指 定 的 选 项 卡
@ -310,7 +351,7 @@ layui.define(['jquery', 'element'], function(exports) {
'</div>' +
'</div>'
var elem = this.option.elem;
var elem = this.option.elem;
$("#" + this.option.elem).find(".pear-tab").append(load);
var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
pearLoad.css({
@ -318,9 +359,9 @@ layui.define(['jquery', 'element'], function(exports) {
});
index++;
setTimeout(function() {
pearLoad.fadeOut(500,function(){
pearLoad.fadeOut(500, function() {
pearLoad.remove();
});
});
}, time);
$(".layui-tab[lay-filter='" + elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow
.location.reload(true);
@ -329,8 +370,9 @@ layui.define(['jquery', 'element'], function(exports) {
.location.reload(true);
}
}
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,14 +406,14 @@ 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
var tabContent = $(".layui-tab[lay-filter='" + elem + "']").find("iframe[id='" + id + "']").parent();
@ -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);
}
})
})

2
component/pear/pear.js
View File

@ -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);
});

100
view/document/rightmenu_demo.html Normal file
View File

@ -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>