发一个基于jQuery的多标签浏览插件

a:link, a:visited
{
font: 12px "宋体";
color: #1835d1;
text-decoration: none;
}
a:active, a:hover
{
color: #f30;
text-decoration: underline;
}

form, ul, li, dl, dt, dd
{
padding: 0px;
margin: 0px;
}
ul
{
list-style-type: none;
}

/*FrameTabs*/
#frametabs{ background:url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401063697.gif) top repeat-x #d4e4f6; /*border-bottom:1px solid #f0f5fa;*/ padding:2px 0 1px;height:25px;*height:28px!important; position:relative;}
#frametabs ul{display:block; /*border-bottom:1px solid #99bbe8;*/ height:24px; padding:0 4px;}
ul.tab-strip{display:block;zoom:1;}
ul.tab-strip-top{}
.tab-left{background:transparent url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401061296.gif) no-repeat -18px 0;width:18px; height:23px;position:absolute;left:0;top:0;z-index:10;cursor:pointer; display:none;}
.tab-left-over{background-position:0 0;}
.tab-disabled{background-position:-36px 0;cursor:default;}
.tab-right{ float:right;background:transparent url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401061923.gif) no-repeat 0 0;width:18px; height:23px;position:absolute;right:0;top:0;z-index:10;cursor:pointer;display:none;}
.tab-right-over{background-position:-18px 0;}
/*.tab-right-disabled{background-position:-36px 0;cursor:default;}*/
.tab-strip-wrap{width:100%;overflow:hidden;position:relative;zoom:1;}
.tab-strip-margin{margin-left:18px;margin-right:18px;}
#frametabs li{ float:left;background:url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401063074.gif) left -201px repeat-x; height:21px; line-height:21px; margin-right:2px;}
#frametabs li a{display:block; float:left; background:url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401063074.gif) left -51px no-repeat;height:21px; line-height:21px; color:#416aa3; font-size:12px;text-decoration:none;padding-left:8px;}
#frametabs li a.closetab{ background:url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401063074.gif) right -351px no-repeat; padding:4px 6px 6px 5px; height:11px; cursor:pointer;}
#frametabs li.frametabs_hover{ background-position:left -251px;}
#frametabs li.frametabs_hover a{ background-position: left -101px;}
#frametabs li.frametabs_hover a.closetab{ background-position: right -401px;}
#frametabs li.current{ background-position:left -151px; height:24px ; line-height:24px;}
#frametabs li.current a{ background-position: left 0px; font-weight:bold;}
#frametabs li.current a.closetab{ background-position: right -301px;}
#frametabs li#newframetab{background:none; padding-top:4px; height:15px; padding-left:2px;}
#frametabs li#newframetab a{background:url(http://pic002.cnblogs.com/img/qleelulu/200907/2009070401060456.gif) left top no-repeat; width:15px; height:15px;}
#frametabs li#newframetab a:hover{ background-position:0 -15px;}

var lastFrameTabId = 1;
var currentFrameTabId = 1;
var frameTabCount = 1;
var StyleSheetPath ="";

var PE_FrameTab = {
AddNew: function(url) {
AddNewFrameTab(url);
},

CloseCurrentTab: function(){
jQuery("#iFrameTab" + currentFrameTabId).find(".closeTab").click();
}
};

jQuery.fn.iFrameTab = function() {
jQuery(this).each(function() {
var cr = jQuery(this);
var tabId = cr.attr("id").replace("iFrameTab", "");
cr.click(function() {
SwitchIframe(this);
}).find(".closeTab").click(function() {
if (frameTabCount > 1) {
var mainRightFrame = jQuery("#main_right_frame iframe[tabid='" + tabId + "']");
var bClose = mainRightFrame[0].contentWindow.OnCloseTab ? mainRightFrame[0].contentWindow.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);
}

function SwitchIframe(iFrameTab, url) {
var tabId = jQuery(iFrameTab).attr("id").replace("iFrameTab", "");
if (currentFrameTabId == tabId) { return false; }
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 + "']");
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": url, "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();
}
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() {
AddNewFrameTab();
});
}

function AddNewFrameTab(url){
url=url||"about:blank";
var btn=jQuery("#newFrameTab");
jQuery('(无标题)


')
.insertBefore(btn).iFrameTab();
frameTabCount++;
SwitchIframe(jQuery("#iFrameTab" + lastFrameTabId)[0],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();
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;
}
}

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);
}
}

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);
});
}

function 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();
});
本文地址: 发一个基于jQuery的多标签浏览插件 本文作者：QLeelulu 转载请标明出处，首发于博客园！ 注：该插件提取于动易CMS系统管理后台。 该插件适用于使用框架页的管理系统后台。

该插件只能应用于同域的URL，跨域的URL由于Javascript的安全限制，会出错。

不说废话，先看Demo，点击下面的链接将在下面的iFrame中打开（指定了target="main_right"）：

jQuery Ajax 全解析 ASP.NET MVC 入门系列教程
博客园(在新标签中打开)

(无标题)



下面是代码，有注释，就不多说了。

/*
*
* 该插件只能应用于同域的URL，跨域的URL由于Javascript的安全限制，会出错。
*
* 新建一个标签：PE_FrameTab.AddNew(url)
; 如果url为空则是新开一个空白的标签页。
* 关闭当前标签：PE_FrameTab.CloseCurrentTab()
* 从当前标签切换到其他标签时触发：BeforeSwitch(); 如果该函数存在并返回false则不切换标签.该函数直接写在当前页面中.
* 从其他标签切换到当前标签时触发：SwitchInto(); 如果该函数存在则执行.该函数直接写在要切换到的页面.
* 在关闭当前标签页的时候触发：OnCloseTab(); 如果该函数存在存在则执行.该函数直接写在当前页面中.
*/
var lastFrameTabId = 1; //最后新建的FrameTabId，用于新建FrameTab
var currentFrameTabId = 1; //当前显示的FrameTab
var 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].contentWindow.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);
}

///切换tab
function 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设为空，使<a target="main_right" />只对当前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，使<a target="main_right" />有效
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('<li id="iFrameTab' + (++lastFrameTabId) + '" ><a href="javascript:"><span id="frameTabTitle">(无标题)</span><a class="closeTab"><img border="0" src="' + StyleSheetPath + 'images/tab-close.gif"/></a></a></li>')
.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参数为目标iframe
function 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