layui.define(["element", "layer", "jquery"], function (exports) { var element = layui.element,layer = layui.layer,$ = layui.$; var miniTab = { //初始化tab render: function (options) { options.filter = options.filter || null; options.multiModule = options.multiModule || false; options.urlHashLocation = options.urlHashLocation || false; options.maxTabNum = options.maxTabNum || 20; options.menuList = options.menuList || []; options.homeInfo = options.homeInfo || {}; options.listenSwichCallback = options.listenSwichCallback || function () { }; miniTab.listen(options); miniTab.listenRoll(); miniTab.listenSwitch(options); miniTab.listenHash(options); }, //新建tab窗口 create: function (options) { options.tabId = options.tabId || null; options.href = options.href || null; options.title = options.title || null; options.isIframe = options.isIframe || false; options.maxTabNum = options.maxTabNum || 20; if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) { layer.msg('Tab窗口已达到限定数量,请先关闭部分Tab'); return false; } var ele = element; if (options.isIframe) ele = parent.layui.element; ele.tabAdd('layuiminiTab', { title: '' + options.title + 'ဆ' //用于演示 , content: '' , id: options.tabId }); $('.layuimini-menu-left').attr('layuimini-tab-tag', 'add'); sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title); }, //切换选项卡 change: function (tabId) { element.tabChange('layuiminiTab', tabId); }, //删除tab窗口 delete: function (tabId, isParent) { $(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove(); if (isParent === true) { parent.layui.element.tabDelete('layuiminiTab', tabId); } else { element.tabDelete('layuiminiTab', tabId); } }, //在iframe层打开新tab方法 openNewTabByIframe: function (options) { options.href = options.href || null; options.title = options.title || null; var loading = parent.layer.load(0, {shade: false, time: 2 * 1000}); if (options.href === null || options.href === undefined) options.href = new Date().getTime(); var checkTab = miniTab.check(options.href, true); if (!checkTab) { miniTab.create({ tabId: options.href, href: './?c=admin&page=' + options.href + '&u=' + u, title: options.title, isIframe: true, }); } parent.layui.element.tabChange('layuiminiTab', options.href); parent.layer.close(loading); }, //在iframe层关闭当前tab方法 deleteCurrentByIframe: function () { var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document); if (ele.length > 0) { var layId = $(ele[0]).attr('lay-id'); miniTab.delete(layId, true); } }, //判断tab窗口 check: function (tabId, isIframe) { // 判断选项卡上是否有 var checkTab = false; if (isIframe === undefined || isIframe === false) { $(".layui-tab-title li").each(function () { var checkTabId = $(this).attr('lay-id'); if (checkTabId != null && checkTabId === tabId) { checkTab = true; } }); } else { parent.layui.$(".layui-tab-title li").each(function () { var checkTabId = $(this).attr('lay-id'); if (checkTabId != null && checkTabId === tabId) { checkTab = true; } }); } return checkTab; }, //开启tab右键菜单 openTabRignMenu: function (tabId, left) { miniTab.closeTabRignMenu(); var menuHtml = '
'; var makeHtml = ''; $('.layuimini-tab .layui-tab-title').after(menuHtml); $('.layuimini-tab .layui-tab-content').after(makeHtml); }, //关闭tab右键菜单 closeTabRignMenu: function () { $('.layuimini-tab-mousedown').remove(); $('.layuimini-tab-make').remove(); }, //查询菜单信息 searchMenu: function (href, menuList) { var menu; for (key in menuList) { var item = menuList[key]; if (item.href === href) { menu = item; break; } if (item.child) { newMenu = miniTab.searchMenu(href, item.child); if (newMenu) { menu = newMenu; break; } } } return menu; }, //监听 listen: function (options) { options = options || {}; options.maxTabNum = options.maxTabNum || 20; //打开新窗口 $('body').on('click', '[layuimini-href]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var tabId = $(this).attr('layuimini-href'), href = $(this).attr('layuimini-href'), title = $(this).text(), target = $(this).attr('target'); var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left"); layer.close(window.openTips); if (el.length) { $(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this"); $(el).parent().addClass("layui-this"); } if (target === '_blank') { layer.close(loading); window.open(href, "_blank"); return false; } if (tabId === null || tabId === undefined) tabId = new Date().getTime(); var checkTab = miniTab.check(tabId); if (!checkTab) { miniTab.create({ tabId: tabId, href: './?c=admin&page=' + href + '&u=' + u, title: title, isIframe: false, maxTabNum: options.maxTabNum, }); } element.tabChange('layuiminiTab', tabId); layer.close(loading); }); //在iframe子菜单上打开新窗口 $('body').on('click', '[layuimini-content-href]', function () { var loading = parent.layer.load(0, {shade: false, time: 2 * 1000}); var tabId = $(this).attr('layuimini-content-href'), href = $(this).attr('layuimini-content-href'), title = $(this).attr('data-title'), target = $(this).attr('target'); if (target === '_blank') { parent.layer.close(loading); window.open(href, "_blank"); return false; } if (tabId === null || tabId === undefined) tabId = new Date().getTime(); var checkTab = miniTab.check(tabId, true); if (!checkTab) { miniTab.create({ tabId: tabId, href: './?c=admin&page=' + href + '&u=' + u, title: title, isIframe: true, maxTabNum: options.maxTabNum, }); } parent.layui.element.tabChange('layuiminiTab', tabId); parent.layer.close(loading); }); //关闭选项卡 $('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var $parent = $(this).parent(); var tabId = $parent.attr('lay-id'); if (tabId !== undefined || tabId !== null) { miniTab.delete(tabId); } layer.close(loading); }); //选项卡操作 $('body').on('click', '[layuimini-tab-close]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var closeType = $(this).attr('layuimini-tab-close'); $(".layuimini-tab .layui-tab-title li").each(function () { var tabId = $(this).attr('lay-id'); var id = $(this).attr('id'); var isCurrent = $(this).hasClass('layui-this'); if (id !== 'layuiminiHomeTabId') { if (closeType === 'all') { miniTab.delete(tabId); } else { if (closeType === 'current' && isCurrent) { miniTab.delete(tabId); } else if (closeType === 'other' && !isCurrent) { miniTab.delete(tabId); } } } }); layer.close(loading); }); //禁用网页右键 $(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) { e.preventDefault(); return false; }); //注册鼠标右键 $('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) { var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2), tabId = $(this).attr('lay-id'); if (e.which === 3) { miniTab.openTabRignMenu(tabId, left); } }); //关闭tab右键菜单 $('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () { miniTab.closeTabRignMenu(); }); //tab右键选项卡操作 $('body').on('click', '[layuimini-tab-menu-close]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var closeType = $(this).attr('layuimini-tab-menu-close'), currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id'); $(".layuimini-tab .layui-tab-title li").each(function () { var tabId = $(this).attr('lay-id'); var id = $(this).attr('id'); if (id !== 'layuiminiHomeTabId') { if (closeType === 'all') { miniTab.delete(tabId); } else { if (closeType === 'current' && currentTabId === tabId) { miniTab.delete(tabId); } else if (closeType === 'other' && currentTabId !== tabId) { miniTab.delete(tabId); } } } }); miniTab.closeTabRignMenu(); layer.close(loading); }); }, //监听tab切换 listenSwitch: function (options) { options.filter = options.filter || null; options.multiModule = options.multiModule || false; options.urlHashLocation = options.urlHashLocation || false; options.listenSwichCallback = options.listenSwichCallback || function () { }; element.on('tab(' + options.filter + ')', function (data) { var tabId = $(this).attr('lay-id'); if (options.urlHashLocation) { location.hash = tabId; } if (typeof options.listenSwichCallback === 'function') { options.listenSwichCallback(); } // 判断是否为新增窗口 if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') { $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no') } else { $("[layuimini-href]").parent().removeClass('layui-this'); miniTab.listenSwitchSingleModule(tabId); } miniTab.rollPosition(); }); }, //监听hash变化 listenHash: function (options) { options.urlHashLocation = options.urlHashLocation || false; options.maxTabNum = options.maxTabNum || 20; options.homeInfo = options.homeInfo || {}; options.menuList = options.menuList || []; if (!options.urlHashLocation) return false; var tabId = location.hash.replace(/^#/, ''); if (tabId === null || tabId === undefined || tabId ==='') return false; // 判断是否为首页 if(tabId ===options.homeInfo.href) return false; // 判断是否为右侧菜单 var menu = miniTab.searchMenu(tabId, options.menuList); if (menu !== undefined) { miniTab.create({ tabId: tabId, href: './?c=admin&page=' + tabId + '&u=' + u, title: menu.title, isIframe: false, maxTabNum: options.maxTabNum, }); $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no'); element.tabChange('layuiminiTab', tabId); return false; } // 判断是否为快捷菜单 var isSearchMenu = false; $("[layuimini-content-href]").each(function () { if ($(this).attr("layuimini-content-href") === tabId) { var title = $(this).attr("data-title"); miniTab.create({ tabId: tabId, href: './?c=admin&page=' + tabId + '&u=' + u, title: title, isIframe: false, maxTabNum: options.maxTabNum, }); $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no'); element.tabChange('layuiminiTab', tabId); isSearchMenu = true; return false; } }); if (isSearchMenu) return false; // 既不是右侧菜单、快捷菜单,就直接打开 var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId); miniTab.create({ tabId: tabId, href: './?c=admin&page=' + tabId + '&u=' + u, title: title, isIframe: false, maxTabNum: options.maxTabNum, }); element.tabChange('layuiminiTab', tabId); return false; }, //监听滚动 listenRoll: function () { $(".layuimini-tab-roll-left").click(function () { miniTab.rollClick("left"); }); $(".layuimini-tab-roll-right").click(function () { miniTab.rollClick("right"); }); }, //单模块切换 listenSwitchSingleModule: function (tabId) { $("[layuimini-href]").each(function () { if ($(this).attr("layuimini-href") === tabId) { // 自动展开菜单栏 var addMenuClass = function ($element, type) { if (type === 1) { $element.addClass('layui-this'); if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) { $(".layuimini-header-menu li").attr('class', 'layui-nav-item'); } else { addMenuClass($element.parent().parent(), 2); } } else { $element.addClass('layui-nav-itemed'); if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) { $(".layuimini-header-menu li").attr('class', 'layui-nav-item'); } else { addMenuClass($element.parent().parent(), 2); } } }; addMenuClass($(this).parent(), 1); return false; } }); }, //自动定位 rollPosition: function () { var $tabTitle = $('.layuimini-tab .layui-tab-title'); var autoLeft = 0; $tabTitle.children("li").each(function () { if ($(this).hasClass('layui-this')) { return false; } else { autoLeft += $(this).outerWidth(); } }); $tabTitle.animate({ scrollLeft: autoLeft - $tabTitle.width() / 3 }, 200); }, //点击滚动 rollClick: function (direction) { var $tabTitle = $('.layuimini-tab .layui-tab-title'); var left = $tabTitle.scrollLeft(); if ('left' === direction) { $tabTitle.animate({ scrollLeft: left - 450 }, 200); } else { $tabTitle.animate({ scrollLeft: left + 450 }, 200); } } }; exports("miniTab", miniTab); });