//Tab标签 ;RoadUI.Tab = function (options) { var defaults = { id: "", srcElement: null, //源对象,当此为空时则用ID获取 replace: false, //如果打开相同ID的标签,则替换掉原标签 dblclickclose: true, //是否双击关闭 contextmenu: true, //是否有右键菜单 maxtabs:-1 //最大tab数量 }; this.opts = $.extend(defaults, options); this.$tabDiv = null; if (this.opts.id.isNullOrEmpty() && this.opts.srcElement == null) { throw "要初始化为tab的对象或对象ID为空!"; return false; } else { this.$tabDiv = this.opts.srcElement != null ? $(this.opts.srcElement) : $("#" + this.opts.id); if (this.$tabDiv == null || this.$tabDiv.size() == 0) { throw "要初始化为tab的对象!"; return false; } } var instance = this; //是否显示了滚动条, 只有显示了滚动条在关闭按钮时才调整滚动 this.scrollbar = false; this.opts.srcElement = this.$tabDiv; if (!this.opts.id) { this.opts.id = this.$srcObj.attr("id"); } var contextMenu; //初始化标签 this.init = function () { var $contents = this.$tabDiv.children("div"); var $tabTitle = $('
'); var $tabTitleLeft = $('
'); var $tabTitleRight = $('
'); var $tabTitleUL = $(''); var tabDivHeight = parseInt(this.$tabDiv.get(0).style.height) || 0; $tabTitleLeft.hide(); $tabTitleRight.hide(); var tabSize = instance.opts.maxtabs == -1 || instance.opts.maxtabs > $contents.size() ? $contents.size() : instance.opts.maxtabs; for (var i = 0; i < tabSize; i++) { var $tab = $contents.eq(i); var liID = this.getTabID($tab.attr("id")); var clickevent = $tab.attr("clickevent"); var tabtitle = $tab.attr("title"); var isTitle = tabtitle > 14; var fullTitle = tabtitle; tabtitle = isTitle ? tabtitle(0, 12) + "…" : tabtitle; //是否显示关闭按钮 var isClose = $tab.attr("close") && ($tab.attr("close").toLowerCase() == "1" || $tab.attr("close").toLowerCase() == "true"); var $li = $('
  • '); var $divText = $('
    ' + tabtitle + '
    '); $li.bind("click", function () { instance.setActive($(this).attr("itemid")); if ($(this).attr("clickevent")) { eval($(this).attr("clickevent")); } }); if (this.opts.dblclickclose) { $li.bind("dblclick", function () { instance.closeTab($(this).attr("itemid")); }); } var $divClose = $('
    '); if (isClose) { $divClose.bind("mouseover", function () { $(this).children("div").removeClass().addClass("tab_title_ul_li_close_div_over"); }) .bind("mouseout", function () { $(this).children("div").removeClass().addClass("tab_title_ul_li_close_div"); }) .bind("click", function () { instance.closeTab($(this).parent().attr("itemid")); }); } else { $divClose.hide(); } $li.append($divText, $divClose); $tabTitleUL.append($li); $tab.attr("title", ""); $li.contextmenu(function (e) { instance.setActive($(this).attr("itemid")); if (contextMenu) { contextMenu.setDisabled(0, $(this).attr("close") && $(this).attr("close") == "1"); } }); //如果规定了高度,则限制溢出后显示滚动条 if (tabDivHeight > 0 && !$tab.attr("isiframe")) { $tab.css({ "height": (tabDivHeight - 30) + "px", "overflow": "auto" }); } } $tabTitleLeft.bind("mouseover", function () { $(this).removeClass().addClass("tab_title_left_over"); }).bind("mouseout", function () { $(this).removeClass().addClass("tab_title_left"); }).bind("click", function () { instance.moveLeft(); ; }); $tabTitleRight.bind("mouseover", function () { $(this).removeClass().addClass("tab_title_right_over"); }).bind("mouseout", function () { $(this).removeClass().addClass("tab_title_right"); }).bind("click", function () { instance.moveRight() }); $tabTitle.append($tabTitleLeft, $tabTitleUL, $tabTitleRight); $tabTitle.append('
    '); if ($contents.size() > 0) { $contents.first().before($tabTitle); this.setActive($contents.eq(0).attr("id")); //初始化时设置第一个标签为活动 } else { this.$tabDiv.append($tabTitle); } if (instance.opts.contextmenu) { try { var baseurl = top.rootdir; contextMenu = new RoadUI.Menu({ srcElement: $tabTitleUL }); contextMenu.addItem({ ico: baseurl + "images/ico/cross.png", title: "关闭", onclick: function () { instance.closeCurrent() } }); contextMenu.addItem({ ico: "", title: "除此之外全部关闭", onclick: function () { instance.closeOther(); } }); contextMenu.addItem({ ico: "", title: "全部关闭", onclick: function () { instance.closeAll(); } }); contextMenu.addItem({ type: 1 }); contextMenu.addItem({ ico: baseurl + "images/ico/Refresh.png", title: "刷新", onclick: function () { instance.refresh(); } }); } catch (e) { } } this.checkMore(true, false, false, false); }; this.getLength = function () { return ($(".tab_title ul li", this.$tabDiv).size() || 0) + 1; }; //设置活动标签 //tabID 要设置的标签id this.setActive = function (tabID) { var $lis = this.$tabDiv.children(".tab_title").children("ul").children("li"); var $contents = this.$tabDiv.children("div[id]"); for (var i = 0; i < $lis.size(); i++) { var isCurrent = $lis.eq(i).attr("itemid") == tabID; $lis.eq(i).removeClass().addClass(isCurrent ? "tab_title_ul_li_over" : "tab_title_ul_li"); $lis.eq(i).children("div:first").removeClass().addClass(isCurrent ? "tab_title_ul_li_txt_over" : "tab_title_ul_li_txt"); } for (var i = 0; i < $contents.size(); i++) { var isCurrent = $contents.eq(i).attr("id") == tabID; if (isCurrent) { $contents.eq(i).show(); } else { $contents.eq(i).hide(); } } }; //添加标签 //id:"" 标签id如果为空,则自动生成 //title:标签标题 //close:是否可以关闭 //html:标签显示的html //domid:标签显示的某个元素的id //src:标签显示的url地址,以iframe形式加载 //callbakc:回调函数 this.addTab = function (options) { if (instance.opts.maxtabs && instance.opts.maxtabs != -1 && this.getLength() > instance.opts.maxtabs) { alert("您打开的标签太多了,请关闭一些无用的标签再试!"); return; } var defaults = { id: "", title: "新标签", //标签标题 close: true, //是否显示关闭按钮 html: "", domid: "", src: "", callback: null //添加后回调函数 }; var opts = $.extend(defaults, options); var $ul = this.$tabDiv.children(".tab_title").children("ul"); var tabHeight = parseInt(this.$tabDiv.get(0).style.height) || 0; if (this.opts.replace && opts.id && $ul.children("li[itemid='" + opts.id + "']").size() > 0) { this.closeTab(opts.id, false); } var fulltitle = opts.title; var isTitle = opts.title.length > 14; opts.title = isTitle ? opts.title.substr(0, 12) + "…" : opts.title; var tabID = this.getTabID(opts.id); var $li = $('
  • '); var $divText = $('
    ' + opts.title + '
    '); var $divClose = $('
    '); $divClose.bind("mouseover", function () { $(this).children("div").removeClass().addClass("tab_title_ul_li_close_div_over"); }) .bind("mouseout", function () { $(this).children("div").removeClass().addClass("tab_title_ul_li_close_div"); }) .bind("click", function () { instance.closeTab(tabID); }); if (!opts.close) { $divClose.hide(); } $li.append($divText, $divClose); $li.bind("click", function () { instance.setActive(tabID); }); if (this.opts.dblclickclose) { $li.bind("dblclick", function () { instance.closeTab(tabID); }); } var $content = $('
    '); if (opts.html) { $content.html(opts.html); } else if (opts.domid) { var $dom = $("#" + opts.domid); if ($dom != null) { $content.append($dom); } } else if (opts.src) { $content.attr("isiframe", "1"); var iframdHeight = parseInt(this.$tabDiv.height()); var iframeSrc = opts.src.indexOf('?') >= 0 ? opts.src + "&tabid=" + tabID : opts.src + "?tabid=" + tabID; var $iframe = $(''); $content.append($iframe); } $li.contextmenu(function (e) { instance.setActive($(this).attr("itemid")); contextMenu.setDisabled(0, $(this).attr("close") && $(this).attr("close") == "1"); }); $ul.append($li); this.$tabDiv.append($content); this.setActive(tabID); this.checkMore(true, false, false, false); if ($.isFunction(opts.callback)) { window.setTimeout(opts.callback, 1); } return tabID; }; //关闭标签 //id: 要关闭的标签id this.closeTab = function (id) { if (!id) { id = this.getActiveID(); } var $li = this.$tabDiv.children(".tab_title").children("ul").children("li[itemid='" + id + "']"); var $content = this.$tabDiv.children("#" + id); var isCurrent = $li.attr("class") == "tab_title_ul_li_over"; if (isCurrent) { if ($li.prev().size() > 0) { this.setActive($li.prev().attr("itemid")); } else if ($li.next().size() > 0) { this.setActive($li.next().attr("itemid")); } } $li.remove(); $content.find("iframe").attr("src", "about:blank"); $content.find("iframe").remove(); $content.remove(); try { CollectGarbage(); } catch (e) { } if (this.scrollbar) { this.checkMore(true, true, false, false); } }; //关闭全部可关闭的标签 this.closeAll = function () { var $lis = this.$tabDiv.children(".tab_title").children("ul").children("li[itemid]"); for (var i = 0; i < $lis.size(); i++) { var close = $lis.eq(i).attr("close"); if (close && close == "1") { this.closeTab($lis.eq(i).attr("itemid")); } } if (this.scrollbar) { this.checkMore(true, true, false, false); } }; //关闭当前活动标签 this.closeCurrent = function () { var $li = this.$tabDiv.children(".tab_title").children("ul").children(".tab_title_ul_li_over"); if ($li.size() > 0) { if ($li.attr("close") && $li.attr("close") == "1") { this.closeTab($li.attr("itemid")); } else { } } if (this.scrollbar) { this.checkMore(true, true, false, false); } }; //关闭除当前标签以外的所有标签 this.closeOther = function () { var $lis = this.$tabDiv.children(".tab_title").children("ul").children("li[itemid][class!='tab_title_ul_li_over']"); for (var i = 0; i < $lis.size(); i++) { var close = $lis.eq(i).attr("close"); if (close && close == "1") { this.closeTab($lis.eq(i).attr("itemid")); } } if (this.scrollbar) { this.checkMore(true, true, false, false); } }; //刷新标签 this.refresh = function (id) { if (!id) { id = this.getActiveID(); } var $content = this.$tabDiv.children("#" + id); if ($content.size() > 0 && $content.attr("isiframe") == "1") { var src = $content.children("iframe").attr("src"); $content.children("iframe").attr("src", src); } }; //得到当前活动标签ID this.getActiveID = function () { var $li = this.$tabDiv.children(".tab_title").children("ul").children(".tab_title_ul_li_over"); if ($li.size() > 0) { return $li.attr("itemid"); } else { return ""; } }; //主窗口大小改变时调用 this.topResize = function (height) { var $contents = this.$tabDiv.children("div[id][class!='ctxmenu']"); for (var i = 0; i < $contents.size(); i++) { if ($contents.eq(i).attr("isiframe")) { $contents.eq(i).find("iframe").height(height); } } }; //改变大小 this.resize = function (options) { var defaults = { width: null, height: null }; var opts = $.extend(defaults, options); if (opts.width) { this.$tabDiv.css("width", opts.width); } if (opts.height) { this.$tabDiv.css("height", opts.height); } if (opts.width || opts.height) { var $contents = this.$tabDiv.children("div[id][class!='ctxmenu']"); for (var i = 0; i < $contents.size(); i++) { if (opts.height) { $contents.eq(i).height(opts.height - 30); if ($contents.eq(i).attr("isiframe")) { $contents.eq(i).find("iframe").height(opts.height - 30); } } if (opts.width) { $contents.eq(i).width(opts.width); if ($contents.eq(i).attr("isiframe")) { $contents.eq(i).find("iframe").width(opts.width); } } } this.checkMore(true, false, false, true); } }; //检查移动 //isMove:是否移动 //isClose:是否执行的是close操作 //isInit: 是否是第一次初始化,如果是则初始化应显示第一个标签 //isResize:是否是调整大小 this.checkMore = function (isMove, isClose, isInit, isResize) { var tabWidth = (parseInt(this.$tabDiv.width()) || 36) - 36; var ulWidth = 0; var $tabTitle = this.$tabDiv.children(".tab_title"); var $tabUL = $tabTitle.children("ul"); var $lis = $tabUL.children("li"); for (var i = 0; i < $lis.size(); i++) { ulWidth += parseInt($lis.eq(i).width()) || 0; ulWidth += 2; } var $tabLeft = $tabTitle.children(".tab_title_left"); var $tabRight = $tabTitle.children(".tab_title_right"); if (ulWidth > tabWidth) { //是移动 并且 (不是关闭 或者 关闭到tab宽度的1/3时调整显示标签) if (isMove && (!isClose || ulWidth - Math.abs(parseInt($tabUL.css("left")) || 0) <= tabWidth / 3)) { //如果是初始化则left应该在起始位置 var left = isInit ? 19 : tabWidth - ulWidth; $tabLeft.show(); $tabRight.show(); $tabUL.animate({ left: left }); this.scrollbar = true; } return ulWidth; } else { this.scrollbar = false; $tabLeft.hide(); $tabRight.hide(); if (isMove && (isClose || isResize)) { $tabUL.animate({ left: 2 }); } return 0; } }; //左移动 this.moveLeft = function () { var ulWidth = this.checkMore(false, false, false, false); if (ulWidth == 0) { return; } var $tabTitle = this.$tabDiv.children(".tab_title"); var $tabUL = $tabTitle.children("ul"); var tabLeft = parseInt($tabUL.css("left")) || 0; if (ulWidth - Math.abs(tabLeft) < (parseInt($tabTitle.width()) || 36)) { return; } var left = tabLeft - 200; $tabUL.animate({ left: left }); }; //右移动 this.moveRight = function () { var ulWidth = this.checkMore(false, false, false, false); if (ulWidth == 0) { return; } var $tabUL = this.$tabDiv.children(".tab_title").children("ul"); var tabLeft = parseInt($tabUL.css("left")) || 0; var left = tabLeft + 200; if (left > 19) { left = 19; } else if (tabLeft == 19) { return; } $tabUL.animate({ left: left }); }; //得到tab ID this.getTabID = function (id) { return id && this.$tabDiv.children(".tab_title").children("ul").children("li[itemid='" + id + "']").size() == 0 ? id : "tab_" + RoadUI.Core.newid(false); }; this.init(); }