注：該插件提取于動易CMS系統管理后臺。

該插件適用于使用框架頁的管理系統后臺。

該插件只能應用于同域的URL，跨域的URL由于Javascript的安全限制，會出錯。

下面是代碼，有注釋，就不多說了。

/*  ** 該插件只能應用于同域的URL，跨域的URL由于Javascript的安全限制，會出錯。** 新建一個標簽：PE_FrameTab.AddNew(url); 如果url為空則是新開一個空白的標簽頁。* 關閉當前標簽：PE_FrameTab.CloseCurrentTab()* 從當前標簽切換到其他標簽時觸發：BeforeSwitch(); 如果該函數存在并返回false則不切換標簽.該函數直接寫
在當前頁面中.* 從其他標簽切換到當前標簽時觸發：SwitchInto(); 如果該函數存在則執行.該函數直接寫在要切換到的頁面.* 在關閉當前標簽頁的時候觸發：OnCloseTab(); 如果該函數存在存在則執行.該函數直接寫在當前頁面中.*/var lastFrameTabId = 1; //最后新建的FrameTabId，用于新建FrameTabvar currentFrameTabId = 1; //當前顯示的FrameTabvar frameTabCount = 1;var StyleSheetPath ="";var PE_FrameTab = {    //新建一個標簽    AddNew: function(url) {        AddNewFrameTab(url);    },    //關閉當前標簽    CloseCurrentTab: function(){        jQuery("#iFrameTab" + currentFrameTabId).find(".closeTab").click();   }};///給tab標簽注冊切換和關閉tab事件jQuery.fn.iFrameTab = function() {    jQuery(this).each(function() {        var cr = jQuery(this);        var tabId = cr.attr("id").replace("iFrameTab", "");        cr.click(function() {//切換FrameTab            SwitchIframe(this);        }).find(".closeTab").click(function() {//關閉FrameTab            if (frameTabCount > 1) {                var mainRightFrame = jQuery("#main_right_frame iframe[tabid='" + tabId + "']");                var bClose = mainRightFrame[0].contentWindow.OnCloseTab ? mainRightFrame[0].c
ontentWi
ndow.OnCloseTab() : true;                if (bClose) {                    if (cr.attr("class") == "current") {//如果關閉的標簽是當前標簽，則切換到前一標簽，如果前
一標簽不存在，則切換到后一標簽                        var nextIframe = cr.prev("li[id^='iFrameTab']");                        if (nextIframe.length <= 0) { nextIframe = cr.next("li[id^='iFrameTab']"); }                        SwitchIframe(nextIframe[0]);                    }                    //清理                    cr.remove();                    jQuery("#frmTitle iframe[tabid='" + tabId + "']").remove();                    mainRightFrame.remove();                    frameTabCount--;                    CheckFramesScroll();                }            }        }).end().dblclick(function() {            jQuery(this).find(".closeTab").click();        });    });    return jQuery(this);}///切換tabfunction SwitchIframe(iFrameTab) {    var tabId = jQuery(iFrameTab).attr("id").replace("iFrameTab", "");  //鼠標點擊的tab的id    if (currentFrameTabId == tabId) { return false; }    //判斷是否允許切換Tab    var switchFunc = jQuery("#main_right")[0].contentWindow.window.BeforeSwitch;    var bSwitch = (switchFunc) ? switchFunc() : true;    if (!bSwitch) { return false; }    var currentGuideSrc = jQuery("#frmTitle iframe[tabid='" + currentFrameTabId + "']").attr("src");    SetCurrentFrameTab(iFrameTab);    var mainFrames = jQuery("#main_right_frame > iframe").hide().attr({ "id": "", "name": "" });    var newMainFrame = jQuery("#main_right_frame iframe[tabid='" + tabId + "']");    //將iframe的window.name設為空，使只對當前iframe有效    mainFrames.each(function() { this.contentWindow.window.name = ""; });     if (newMainFrame.length <= 0) {//是否新建標簽        newMainFrame = jQuery("#main_right_frame").prepend(jQuery("#iframeMainTemplate").html())                .find("[tabid=0]").attr({ "tabid": tabId, "src": "about:blank", "id": "main_right", "name": "main_right" })                .css("display", "block");    } else {        newMainFrame = jQuery("#main_right_frame iframe[tabid='" + tabId + "']")            .attr("id", "main_right").attr("name", "main_right").show();    }    //指定iframe的window.name，使有效    newMainFrame[0].contentWindow.window.name = "main_right";    frames["main_right"] = newMainFrame[0].contentWindow.window;    currentFrameTabId = tabId;    var switchInto = jQuery("#main_right")[0].contentWindow.window.SwitchInto;    if(switchInto){ switchInto(); }}///初始化新建標簽按鈕function InitNewFrameTab() {    jQuery("#newFrameTab").click(function(url) {        AddNewFrameTab(url);    });}function AddNewFrameTab(url){    //jQuery("#FrameTabs .current").removeClass("current");    var btn=jQuery("#newFrameTab");    jQuery('
'" >(無標題)'images/tab-close.gif"/>
')            .insertBefore(btn).iFrameTab();      frameTabCount++;      SwitchIframe(jQuery("#iFrameTab" + lastFrameTabId)[0]);       jQuery("#main_right").attr("src",url);      if (CheckFramesScroll()) { jQuery("#FrameTabs ul:eq(0)").css("margin-left", cW - fW - 40); }}function SetCurrentFrameTab(selector) {    jQuery("#FrameTabs .current").removeClass("current");    jQuery(selector).addClass("current");}///檢查是否需要滾動function CheckFramesScroll() {    var ft = jQuery("#FrameTabs");    window.cW = ft.width(); //包含Tabs的容器寬度    window.fW = ft.find("ul:eq(0)").width();    ft.unbind("DOMMouseScroll").unbind("mousewheel");    if (fW > cW) {        if (jQuery.browser.mozilla) {            ft.bind("DOMMouseScroll", function(e) {                ScrollFrames(cW, fW, e);            });        } else {            ft.bind("mousewheel", function(e) {                ScrollFrames(cW, fW, e);            });        }        jQuery("#FrameTabs .tab-strip-wrap").addClass("tab-strip-margin");        jQuery("#FrameTabs .tab-right, #FrameTabs .tab-left").css("display", "block");        return true;    } else {        jQuery("#FrameTabs ul:eq(0)").css("margin-left", 0);        jQuery("#FrameTabs .tab-right, #FrameTabs .tab-left").css("display", "none");        jQuery("#FrameTabs .tab-strip-wrap").removeClass("tab-strip-margin");        return false;    }}///Tab滾動。///cW為包含Tabs的容器寬度；fW為全部Tabs的寬度；y為指定的位移，如果不指定y，則使用event中的位移。function ScrollFrames(cW, fW, event, y) {    if (!y) {        if (event.wheelDelta) {            y = event.wheelDelta / 5;        } else if (event.detail) {            y = -event.detail * 8;        }    }    var jList = jQuery("#FrameTabs ul:eq(0)");    var ml = jList.css("margin-left");    ml = Number(ml.toLowerCase().replace("px", ""));    if ((ml < 0 && y > 0) || (ml - cW > -fW - 40) && y < 0) {        ml = ml + y;        if (ml >= 0) { ml = 0; }        if (ml - cW <= -fW - 40) { ml = cW - fW - 40;}        jList.css("margin-left", ml);    }}//注冊Tab超出范圍時左移、右移事件function RegScrollFramesBtn() {    jQuery("#FrameTabs .tab-right").click(function() {         ScrollFrames(window.cW,window.fW,null,-50);    });    jQuery("#FrameTabs .tab-left").click(function() {         ScrollFrames(window.cW,window.fW,null,50);    });}//設置標簽的標題//tarFrame參數為目標iframefunction SetTabTitle(tarFrame) {    var title = "";    try { title = tarFrame.contentWindow.document.title; } catch (e) { }    var subTitle = title = title || "(無標題)";    if (title.length > 6) { subTitle = title.substr(0, 5) + ".." }    jQuery("#iFrameTab" + jQuery(tarFrame).attr("tabid")).find("#frameTabTitle").html(subTitle).attr("title", title);}//初始化jQuery(function() {    jQuery("#FrameTabs li[id^='iFrameTab']").iFrameTab();    InitNewFrameTab(); //初始化新建標簽頁按鈕    RegScrollFramesBtn();});

Enjoy!! By Q.Lee.lulu。

最后給出代碼打包下載：FrameTab.rar

it知識庫：發一個基于jQuery的多標簽瀏覽插件，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。