RoadFlow2.1/WebForm/Scripts/roadui.tab.js


//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 = $('<div class="tab_title"></div>');
        var $tabTitleLeft = $('<div class="tab_title_left"></div>');
        var $tabTitleRight = $('<div class="tab_title_right"></div>');
        var $tabTitleUL = $('<ul class="tab_title_ul" id="tab_ul_' + instance.opts.id + '"></ul>');
        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 = $('<li class="tab_title_ul_li" ' + (clickevent ? 'clickevent="' + clickevent + '"' : '') + ' itemid="' + liID + '" close="' + (isClose ? "1" : "0") + '"></li>');
            var $divText = $('<div class="tab_title_ul_li_txt" ' + (isClose ? ' style="padding-right:2px;"' : '') + ' ' + (isTitle ? 'title="' + fullTitle + '"' : '') + '>' + tabtitle + '</div>');
            $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 = $('<div class="tab_title_ul_li_close"><div class="tab_title_ul_li_close_div"></div></div>');
            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('<div style="clear:both;"></div>');

        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 = $('<li class="tab_title_ul_li" itemid="' + tabID + '" close="' + (opts.close ? "1" : "0") + '"></li>');
        var $divText = $('<div class="tab_title_ul_li_txt"' + (opts.close ? ' style="padding-right:2px;"' : '') + ' ' + (isTitle ? 'title="' + fulltitle + '"' : '') + '>' + opts.title + '</div>');
        var $divClose = $('<div class="tab_title_ul_li_close"><div class="tab_title_ul_li_close_div"></div></div>');
        $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 = $('<div id="' + tabID + '"></div>');
        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 = $('<iframe id="' + tabID + '_iframe" name="' + tabID + '_iframe" frameborder="0" scrolling="auto" style="width:100%;' + (iframdHeight ? "height:" + (iframdHeight - 30).toString() + "px" : "") + '" src="' + iframeSrc + '"></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();
}