layui.define(['jquery', 'element'], function (exports) { "use strict"; var MOD_NAME = 'pearTab', $ = layui.jquery, element = layui.element; var pearTab = function (opt) { this.option = opt; }; pearTab.prototype.render = function (opt) { //默认配置值 var option = { elem:opt.elem, data:opt.data, tool:opt.tool, roll:opt.roll, index:opt.index, width:opt.width, height:opt.height, tabMax:opt.tabMax } var tab = createTab(option); $("#"+option.elem).html(tab); $(".layui-tab[lay-filter='"+option.elem+"'] .layui-tab-prev").click(function(){ rollPage("left",option); }) $(".layui-tab[lay-filter='"+option.elem+"'] .layui-tab-next").click(function(){ rollPage("right",option); }) element.init(); closeEvent(option); toolEvent(option); $("#"+option.elem).width(opt.width); $("#"+option.elem).height(opt.height); $("#"+option.elem).css({position:"relative"}); return new pearTab(option); } pearTab.prototype.click = function(callback){ var elem = this.option.elem; element.on('tab('+this.option.elem+')', function(data){ var id = $("#"+elem+" .layui-tab-title .layui-this").attr("lay-id"); callback(id); }); } pearTab.prototype.positionTab = function(){ var $tabTitle = $('.layui-tab[lay-filter='+this.option.elem+'] .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); } pearTab.prototype.addTab = function (opt) { var title = ''; if(opt.close){ title += ''+opt.title+'' }else{ title += ''+opt.title+'' } element.tabAdd(this.option.elem, { title: title, content: '', id: opt.id }); element.tabChange(this.option.elem,opt.id); } var index =0; pearTab.prototype.addTabOnlyByElem = function(elem,opt,time){ var title = ''; if(opt.close){ title += ''+opt.title+'' }else{ title += ''+opt.title+'' } if ($(".layui-tab[lay-filter='"+elem+"'] .layui-tab-title li[lay-id]").length <= 0) { if(time!=false && time!=0){ var load = '
'+ '
'+ ''+ '
'+ '
' $("#"+elem).find(".pear-tab").append(load); var pearLoad = $("#"+elem).find("#pear-tab-loading"+index); pearLoad.css({display:"block"}); setTimeout(function(){ pearLoad.fadeOut(500,function(){ pearLoad.remove(); }); },time); index++; } element.tabAdd(elem, { title: title, content: '', id: opt.id }); }else{ var isData = false; $.each($(".layui-tab[lay-filter='"+elem+"'] .layui-tab-title li[lay-id]"), function() { if ($(this).attr("lay-id") == opt.id) { isData = true; } }) if (isData == false) { if(time!=false && time!=0){ var load = '
'+ '
'+ ''+ '
'+ '
' $("#"+elem).find(".pear-tab").append(load); var pearLoad = $("#"+elem).find("#pear-tab-loading"+index); pearLoad.css({display:"block"}); setTimeout(function(){ pearLoad.fadeOut(500,function(){ pearLoad.remove(); }); },time); index++; } element.tabAdd(elem, { title: title, content: '', id: opt.id }); } } element.tabChange(elem,opt.id); } /** 添 加 唯 一 选 项 卡 */ pearTab.prototype.addTabOnly = function(opt,time){ var title = ''; if(opt.close){ title += ''+opt.title+'' }else{ title += ''+opt.title+'' } if ($(".layui-tab[lay-filter='"+this.option.elem+"'] .layui-tab-title li[lay-id]").length <= 0) { if(time!=false && time!=0){ var load = '
'+ '
'+ ''+ '
'+ '
' $("#"+this.option.elem).find(".pear-tab").append(load); var pearLoad = $("#"+this.option.elem).find("#pear-tab-loading"+index); pearLoad.css({display:"block"}); setTimeout(function(){ pearLoad.fadeOut(500,function(){ pearLoad.remove(); }); },time); index++; } element.tabAdd(this.option.elem, { title: title, content: '', id: opt.id }); } else { var isData = false; //查询当前选项卡数量 if ($(".layui-tab[lay-filter='"+this.option.elem+"'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) { layer.msg("最多打开"+this.option.tabMax+"个标签页"); return false; } $.each($(".layui-tab[lay-filter='"+this.option.elem+"'] .layui-tab-title li[lay-id]"), function() { if ($(this).attr("lay-id") == opt.id) { isData = true; } }) if (isData == false) { if(time!=false && time!=0){ var load = '
'+ '
'+ ''+ '
'+ '
' $("#"+this.option.elem).find(".pear-tab").append(load); var pearLoad = $("#"+this.option.elem).find("#pear-tab-loading"+index); pearLoad.css({display:"block"}); setTimeout(function(){ pearLoad.fadeOut(500,function(){ pearLoad.remove(); }); },time); index++; } element.tabAdd(this.option.elem, { title: title, content: '', id: opt.id }); } } element.tabChange(this.option.elem,opt.id); } // 刷 新 指 定 的 选 项 卡 pearTab.prototype.refresh = function(time){ // 刷 新 指 定 的 选 项 卡 if(time!=false && time!=0){ var load = '
'+ '
'+ ''+ '
'+ '
' $("#"+this.option.elem).find(".pear-tab").append(load); var pearLoad = $("#"+this.option.elem).find("#pear-tab-loading"+index); pearLoad.css({display:"block"}); setTimeout(function(){ pearLoad.fadeOut(500,function(){ pearLoad.remove(); }); },time); index++; } $(".layui-tab[lay-filter='"+this.option.elem+"'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true); } // 重写 Tab Delete 删除 , 源码存在 Bug 所以重写 function tabDelete(elem,id){ //根据 elem id 来删除指定的 layui title li var tabTitle = $(".layui-tab[lay-filter='"+elem+"']").find(".layui-tab-title"); // 删除指定 id 的 title var removeTab = tabTitle.find("li[lay-id='"+id+"']"); // 查 找 下 方 是 否 存 在 li var nextNode = removeTab.next("li"); if(nextNode.length){ nextNode.addClass("layui-this"); var currId = nextNode.attr("lay-id"); $("#"+elem+" [id='"+currId+"']").parent().addClass("layui-show"); }else{ var prevNode = removeTab.prev("li"); prevNode.addClass("layui-this"); var currId = prevNode.attr("lay-id"); $("#"+elem+" [id='"+currId+"']").parent().addClass("layui-show"); } removeTab.remove(); // 删除 content var tabContent = $(".layui-tab[lay-filter='"+elem+"']").find("iframe[id='"+id+"']").parent(); tabContent.remove(); } function createTab(option){ var type =""; if(option.roll==true){ type = "layui-tab-roll"; } if(option.tool!=false){ type = "layui-tab-tool"; } if(option.roll==true && option.tool!=false){ type = "layui-tab-rollTool"; } var tab = '
'; var title = '
'; tab += title; tab += control; tab += content; tab += ''; tab += '' return tab; } function rollPage(d,option) { var $tabTitle = $('#'+option.elem+' .layui-tab-title'); var left = $tabTitle.scrollLeft(); if ('left' === d) { $tabTitle.animate({ scrollLeft: left - 450 }, 200); } else { $tabTitle.animate({ scrollLeft: left + 450 }, 200); } } function closeEvent(option){ $(".layui-tab[lay-filter='"+option.elem+"']").on("click",".layui-tab-close",function(){ var layid = $(this).parent().attr("lay-id") element.tabDelete(option.elem, layid); }) } 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); } }) $("body .layui-tab[lay-filter='"+option.elem+"']").on("click","#closeOther",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")); } } }) }) $("body .layui-tab[lay-filter='"+option.elem+"']").on("click","#closeAll",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")); } }) }) } exports(MOD_NAME,new pearTab()); })