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 = '
';
var content = '';
- var control = '
';
+ var control =
+ '';
// 处 理 选 项 卡 头 部
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);
}
})
})
diff --git a/component/pear/pear.js b/component/pear/pear.js
index 59c35aa..a5879fa 100644
--- a/component/pear/pear.js
+++ b/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);
});
\ No newline at end of file
diff --git a/view/document/rightmenu_demo.html b/view/document/rightmenu_demo.html
new file mode 100644
index 0000000..365486d
--- /dev/null
+++ b/view/document/rightmenu_demo.html
@@ -0,0 +1,100 @@
+
+
+
+
+ 选项卡插件测试
+
+
+
+
+
+
+
+
+选项卡1
+
+
+
+
+
+ - 网站设置
+ - 用户管理
+ - 权限分配
+ - 商品管理
+ - 订单管理
+
+
+
这是 网站设置 内容
+
这是 用户管理 内容
+
这是 权限分配 内容
+
这是 商品管理 内容
+
这是 订单管理 内容
+
+
+
+
+
+选项卡2
+
+
+
+
+ - 权限管理
+ - 机构管理
+ - 字典管理
+ - 用户管理
+ - 物流管理
+
+
+
这是 权限管理 内容
+
这是 机构管理 内容
+
这是 字典管理 内容
+
这是 用户管理 内容
+
这是 物流管理 内容
+
+
+
+
+
+
+
+
+
\ No newline at end of file