layui 左侧导航生成tab
layui.define(['jquery', 'element'], function(exports) {
var $ = layui.jquery,
element = layui.element,
device = layui.device(),
tabMenu = function() {
this.config = {
item: '#WeTabTip',
closed: true
};
},
objTab = {};
/**
* [参数设置 options]
*/
tabMenu.prototype.set = function(options) {
if (typeof(options) == 'string' && options != "") {
this.config.item = options;
} else if (typeof(options) == 'object') {
$.extend(true, this.config, options);
}
return this;
};
/**
*@todo 初始化对象
*@return 返回对象参数初始化结果
*/
tabMenu.prototype.init = function(options) {
var _this = this,
config = _this.config,
$container = $('' + config.item + ''),
filter = $container.attr('lay-filter');
if (filter === undefined || filter === '') {
console.log('错误:请设置Tab菜单选项卡属性lay-filter过滤器');
}
objTab.titleBox = $container.children('ul.layui-tab-title');
objTab.contentBox = $container.children('div.layui-tab-content');
objTab.tabFilter = filter;
_this.hideRightMenu();
_this.drag();
return _this;
}
/**
*@todo 检查页面是否已打开，如果已打开则返回索引值，否则返回-1
*@param string title 打开页面的标题
*@return int tab的索引值，元则返回-1
*/
tabMenu.prototype.exited = function(title) {
var tab_index = -1;
if (objTab.titleBox === undefined) {
this.init()
}
objTab.titleBox.find('li').each(function(i, e) {
var $em = $(this).children('em');
if ($em.text() === title) {
tab_index = $(this).attr('lay-id');
};
});
return tab_index;
}
/**
* 菜单操作的接口
*/
tabMenu.prototype.beforeTabAdd = function(data, _this) {}
tabMenu.prototype.changeTab = function(data, _this, tab_index) {}
tabMenu.prototype.afterTabClose = function(data, _this) {}
/**
*@todo 添加tab菜单选项卡
*@param object data [ title 菜单选项卡标题
,href 菜单URL地址
,icon 菜单的ICON图标
]
*/
tabMenu.prototype.tabAdd = function(data, fresh) {
var tab_index = this.exited(data.title),
_this = this;
if (tab_index === -1) {
_this.beforeTabAdd(data, _this);
var layID = data.layId ? data.layId : new Date().getTime();
var content = '<iframe src="' + data.href + '" data-id="' + layID + '" class="jqadmin-iframe"></iframe>';
var title = '';
// 如果icon有定义则添加到标题中
if (!_this.config.showIcon) {
title += '<i class="iconfont hide-icon">' + data.icon + '</i>';
} else {
title += '<i class="iconfont">' + data.icon + '</i>';
}
title += '<em>' + data.title + '</em>';
if (this.config.closed) {
title += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + layID + '">ဆ</i>';
}
//添加tab
element.tabAdd(objTab.tabFilter, {
title: title,
content: content,
id: layID
});
//添加打开的菜单到列表,刷新打开列表时不操作数据
if (!data.nodo) {
data.layId = layID;
_this.storage(data, "add");
}
if (data.old) {
objTab.titleBox.find('li[lay-id=' + layID + ']').attr("fresh", 1);
}
//页面淡出效果
_this.effect(layID);
if (this.config.closed) {
//监听关闭事件
objTab.titleBox.find('li').children('i.layui-tab-close[data-id=' + layID + ']').on('click', function() {
element.tabDelete(objTab.tabFilter, $(this).parent('li').attr('lay-id'), data.parent);
_this.tabMove(1, 1);
_this.afterTabClose(data, _this);
//删除数组中的对应元素
element.init();
_this.storage(data, "close");
});
};
this.tabMove(tab_index, 0);
//切换到当前打开的选项卡
element.tabChange(objTab.tabFilter, layID);
//监听鼠标右键事件
objTab.titleBox.find('li:not([bind])').on('contextmenu', function(event) {
$(this).attr("bind", 1);
var layId = $(this).attr('lay-id');
var e = event || window.event;
$('.right-click-menu').attr('lay-id', layId).css({ "top": e.pageY, "left": e.pageX }).slideDown(100);
$('.right-click-menu').find("a:not([bind])").on('click', { _this: _this }, _this.rightMenuEvent);
return false;
});
} else {
element.tabChange(objTab.tabFilter, tab_index);
_this.changeTab(data, _this, tab_index);
_this.effect(tab_index, true);
data.layId = tab_index;
_this.storage(data, "change");
this.tabMove(tab_index, 0);
if (fresh) {
_this.fresh(tab_index);
}
}
}
tabMenu.prototype.effect = function(layID, ischange) {
//页面淡出效果
var l = layer.load(1);
if (ischange) {
objTab.contentBox.find('iframe[data-id=' + layID + ']').css({ "opacity": "0", "margin-top": "50px" }).delay(200).animate({ opacity: '1', marginTop: "0" }, 500);
layer.close(l);
} else {
objTab.contentBox.find('iframe[data-id=' + layID + ']').css({ "opacity": "0", "margin-top": "50px" }).load(function() {
$(this).delay(100).animate({ opacity: '1', marginTop: "0" }, 500);
layer.close(l);
});
}
}
tabMenu.prototype.rightMenuEvent = function(event) {
var _this = event.data._this;
var event = $(this).data('event'),
parent = $(this).parents('.right-click-menu').attr("parent");
$(this).attr("bind", 1);
var index = $(this).parents('.right-click-menu').attr('lay-id');
$(this).parents('.right-click-menu').hide();
$('.menu-list').slideUp();
$('.tab-move-btn').find('i').html("");
switch (event) {
case "close":
if (index != 0) {
element.tabDelete(objTab.tabFilter, index);
}
var data = {
layId: index
}
_this.storage(data, "close");
break;
case "other":
objTab.titleBox.find('li').each(function(i, o) {
var layId = $(o).attr('lay-id');
if (layId != index && layId != 0) {
element.tabDelete(objTab.tabFilter, layId);
}
})
var data = {
layId: index
}
_this.storage(data, "other");
break;
case "all":
objTab.titleBox.find('li').each(function(i, o) {
var layId = $(o).attr('lay-id');
if (layId != 0) {
element.tabDelete(objTab.tabFilter, layId);
}
var data = {
layId: layId
}
_this.storage(data, "all");
})
break;
default:
_this.fresh(index);
}
_this.tabMove(1, 1);
$(this).parents('.right-click-menu').hide();
element.init();
}
tabMenu.prototype.storage = function(data, action) {
if (data.title == undefined && action != "all") {
return false;
}
var storage = window.sessionStorage;
var _data = JSON.stringify(data);
if (action == "add") {
if (storage.menu) {
var menulist = storage.menu;
menulist = menulist.split("|");
menulist.remove(_data);
menulist.push(_data);
var menu = menulist.join("|");
storage.menu = menu;
} else {
storage.menu = _data;
}
storage.curMenu = _data;
} else if (action == "all") {
storage.removeItem("curMenu");
storage.removeItem("menu");
} else {
//取得打开的菜单数组
var menulist = storage.menu;
if (!menulist) {
return;
}
menulist = menulist.split("|");
if (action == "close") {
for (index in menulist) {
if (index == "remove") {
continue;
}
if (typeof menulist[index] === 'string') {
var menu = JSON.parse(menulist[index]);
}
if (menu.layId == data.layId) {
menulist.splice(index, 1);
}
}
storage.menu = menulist.join("|");
storage.removeItem("curMenu");
} else {
for (index in menulist) {
if (index == "remove") {
continue;
}
if (typeof menulist[index] === 'string') {
var menu = JSON.parse(menulist[index]);
}
if (menu.layId == data.layId) {
var _data = menulist[index];
}
}
if (action == "change") { //切换
storage.curMenu = _data;
} else if (action == "other") {
storage.curMenu = _data;
storage.menu = _data;
}
}
}
}
tabMenu.prototype.fresh = function(index) {
element.tabChange(objTab.tabFilter, index);
var othis = objTab.titleBox.find('>li[lay-id="' + index + '"]'),
index = othis.parent().children('li').index(othis),
parents = othis.parents('.layui-tab').eq(0),
item = parents.children('.layui-tab-content').children('.layui-tab-item'),
src = item.eq(index).find('iframe').attr("src");
item.eq(index).find('iframe').attr("src", src);
}
tabMenu.prototype.hideRightMenu = function() {
$(document).on('contextmenu', function(event) {
$(this).find('.right-click-menu').hide();
});
$(document).on('click', function(event) {
$(this).find('.right-click-menu').hide();
})
}
/**
*@todo 判断菜单选项卡是否已超出了总宽度，若超出则显示左右移动按钮，否则隐藏按钮
*@param int index 大于等于0时表示菜单选项卡已经存在，才有移动的需求
*@param int scene 为1时表示删除tab菜单选项卡，为0时表示切换或是添加菜单选项卡
*/
tabMenu.prototype.tabMove = function(index, scene) {
//取得屏幕总宽度
var navWidth = parseInt(objTab.titleBox.parent('div').width());
//取得菜单选项卡总宽度
var $tabNav = objTab.titleBox.find('li'),
tab_all_width = 0;
$tabNav.each(function(i, n) {
tab_all_width += $(n).outerWidth(true);
});
if (!$tabNav[0]) { return }
if (tab_all_width > navWidth + 1) {
var ml = navWidth - tab_all_width - 54;
if (ml < 0) {
if (index >= 0) {
var current_tab_left = parseInt(objTab.titleBox.find('.layui-this').position().left),
curent_tab_ml = parseInt(objTab.titleBox.css("marginLeft")),
curent_ml = current_tab_left + parseInt(curent_tab_ml);
if (curent_ml <= 0) {
ml = 0 - current_tab_left;
} else {
var is_show = -(curent_tab_ml - navWidth + parseInt(objTab.titleBox.find('.layui-this').outerWidth(true)) + current_tab_left + 54);
if (is_show <= 0) {
ml = navWidth - current_tab_left - parseInt(objTab.titleBox.find('.layui-this').outerWidth(true)) - 54;
} else {
if (scene == 1 && parseInt(curent_tab_ml) < 0) {
ml = navWidth - current_tab_left - parseInt(objTab.titleBox.find('.layui-this').outerWidth(true)) - 54;
if (ml > 0) {
ml = 0;
}
} else {
return;
}
}
}
}
objTab.titleBox.css({ "marginLeft": ml });
}
if (ml == 0 && tab_all_width < navWidth + 1) {
objTab.titleBox.parent('div').find('.tab-move-btn').hide();
} else {
objTab.titleBox.parent('div').find('.tab-move-btn').show();
}
} else {
objTab.titleBox.parent('div').find('.tab-move-btn').hide();
objTab.titleBox.css({ "marginLeft": 0 });
}
}
tabMenu.prototype.drag = function() {
var _this = this;
objTab.titleBox.on("mousedown", function(e) {
//取得屏幕总宽度
var navWidth = parseInt(objTab.titleBox.parent('div').width());
//取得菜单选项卡总宽度
var $tabNav = objTab.titleBox.find('li'),
tab_all_width = 0;
$tabNav.each(function(i, n) {
tab_all_width += $(n).outerWidth(true);
});
if (!$tabNav[0]) { return };
if (tab_all_width > navWidth + 1) {
var maxml = tab_all_width - navWidth + 54
var _x = e.pageX - parseInt(objTab.titleBox.css("marginLeft")); //取得鼠标到标签左边left的距离
objTab.titleBox.on("mousemove", function(e) {
x = e.pageX - _x;
if (x > 0) {
x = 0;
} else if (x < -maxml) {
x = -maxml;
}
objTab.titleBox.css({ "marginLeft": x });
});
objTab.titleBox.parents('body').on("mouseup", function(e) {
objTab.titleBox.off("mousemove");
})
return false;
}
});
}
/**
*根据值查找所在位置index值，查不到就返回-1
*/
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
/**
*根椐值删除元素
*/
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
exports('tabmenu', function(options) {
var navtab = new tabMenu();
return navtab.set(options)
});
});
扫一扫
2439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
