發一個基于jQuery的多標簽瀏覽插件
注：該插件提取于動易CMS系統管理后臺。
該插件適用于使用框架頁的管理系統后臺。
該插件只能應用于同域的URL，跨域的URL由于Javascript的安全限制，會出錯。
下面是代碼，有注釋，就不多說了。
/* * * 該插件只能應用于同域的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].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); } ///切換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設為空，使只對當前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參數為目標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
全站熱搜
留言列表
