From 88a153c13e912f70171807a9a1994717e3949ea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Thu, 11 Mar 2021 02:04:53 +0800 Subject: [PATCH] add tab right menu --- component/pear/css/pear-module/tab.css | 20 +++ component/pear/modules/admin.js | 2 +- component/pear/modules/tab.js | 232 +++++++++++++++++-------- component/pear/pear.js | 2 +- view/document/rightmenu_demo.html | 100 +++++++++++ 5 files changed, 283 insertions(+), 73 deletions(-) create mode 100644 view/document/rightmenu_demo.html diff --git a/component/pear/css/pear-module/tab.css b/component/pear/css/pear-module/tab.css index a124713..5b70006 100644 --- a/component/pear/css/pear-module/tab.css +++ b/component/pear/css/pear-module/tab.css @@ -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; } diff --git a/component/pear/modules/admin.js b/component/pear/modules/admin.js index 312cc7e..4941e02 100644 --- a/component/pear/modules/admin.js +++ b/component/pear/modules/admin.js @@ -243,7 +243,7 @@ layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'fram bodyTab.clear(); } }) - + body.on("click", ".collaspe,.pear-cover", function() { collaspe(); }); diff --git a/component/pear/modules/tab.js b/component/pear/modules/tab.js index db37263..1583d51 100644 --- a/component/pear/modules/tab.js +++ b/component/pear/modules/tab.js @@ -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 = "" + + // 初始化 + + 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) { '' + '' - 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 = '
'; + var tab = '
'; var title = '