add tab right menu

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

component/pear/modules/tab.js

@@ -63,7 +63,48 @@ layui.define(['jquery', 'element'], function(exports) {
 		closeEvent(option);
 
 		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);
 	}
 
@@ -330,6 +371,7 @@ layui.define(['jquery', 'element'], function(exports) {
 		}
 	}
 
+
 	function tabDelete(elem, id, callback, option) {
 
 		//根据 elem id 来删除指定的 layui title li
@@ -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;
@@ -467,6 +511,49 @@ layui.define(['jquery', 'element'], function(exports) {
 		})
 	}
 
+	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() {
@@ -475,7 +562,10 @@ layui.define(['jquery', 'element'], function(exports) {
 				var currentId = currentTab.attr("lay-id");
 				tabDelete(option.elem, currentId, option.closeEvent, option);
 			} else {
-				layer.msg("当前页面不允许关闭",{icon:3,time:800})
+				layer.msg("当前页面不允许关闭", {
+					icon: 3,
+					time: 800
+				})
 			}
 		})
 

component/pear/pear.js

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

view/document/rightmenu_demo.html

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