超級簡單：使用JQUERY Tabs插件宿主IFRAMES

    必備的東西：

 Windows XP/Vista/7/2003/2008

 Visual Studio 2005 or 2008 (download the correct version of Home Site project above)

.NET Framework 2.0 and ASP.NET AJAX 1.0

        今天，很多浏覽器提供了使用tab的能力去浏覽更多的網頁和網站。當然這是一個非常有用的功能來替代同時打開幾個浏覽器，但如果提供在一個頁面中浏覽多個網頁也非常的不錯。

     例如，如果你的首頁是由很多不同的有用的Web工具或者站點組成，一個tab頁面将可能非常的有用。使用架構集，IFRAME等等，都是宿主外部内容的典型方式。這些方法允許你在單個頁面上宿主多個網頁。 但是使他們能正确的布局卻非常不容易。 更不用說去處理頁面和IFRAME的scrollbars等問題。

     這篇文章中，嘗試去宿主外部資料，提供了一個基本的解決方案,利用ASP.NET，AJAX和javascript 去處理一些遇到的麻煩。

計劃

    主旨是提供一個簡單的宿主外部資料的方案，這個解決方案有下面這些簡單的需求。

1、提供一個tab界面，友善浏覽。

2、提供一個配置方法來添加tab

3、使每個tab頁都能宿主配置的頁面

基本的技術需要是：

1、僅當tab被選中的時候，加載外部的資料内容

2、保證縱向的scrollbars的設定成顯示，而且僅當需要處理的資料溢出的時候，才顯示scrollbars 。

3、保證該解決方案是能跨浏覽器工作

解決方案的名字和首頁面的名字都是 Home Site

分析

      對于這個解決方案，我決定使用JQuery UI Tabs 來實作表格式的導航功能。我以前也使用過商業的開源的tab控件。但是JQuery UI Tabs 是輕量級的，實作非常地簡單，而且是免費的。

除了JQuery 和tab控件以及.net提供的功能，不需要其它的控件。 VS2005 将足以結合整個項目的開發環境，選擇C#作為開發語言。

  我将使用一個IFRAME的宿主網站内容，由于跨站點（又名跨域）的安全限制，使用JQuery UI Tabs去宿主外部網頁将無法直接工作。

設計

    這裡有一個為客戶提供視覺上的最低限度的需求：

 該解決方案，将需要三種不同的功能子產品：

1、配置子產品

2、使用JQuery UI Tabs 插件的tab界面

3、使用IFRAME元素宿主網頁内容辦法。

配置子產品：

    一個需求的功能是是使tab可配置。 我選擇最低限度，将tab的配置資訊放到一個xml檔案之中。雖然我可以更進一步的深入，使tab能的動态增加和删除，我決定在本文的第二篇中提供此功能。

XML檔案的格式如下：

代碼

 參數描述：

<code>id</code> =  tab的唯一ID。這個ID不能包含空格

<code>displayName</code> =顯示在tab頭部的名字

<code>path</code> =  帶查詢參數的URL，"http://"是可選的。

配置檔案的名字是：TabConfig.xml。現在必須手動添加或删除tab來更新解決方案的配置檔案。

内容加載器：

    可以說，沒有内容加載子產品是需要用IFRAME去為tab頁面設定内部的清單項。但是如果IFRAME在一個通過使用錨作為每個tab清單項元素的子元素的獨立的宿主網頁中，我覺得在功能和測試方面沒有比IFRAME的更好的控件了：

   如果你願意,将内容裝載器做成一個通用的子產品，它接受查詢字元串參數，以便正确設定IFRAME元素；參數為元素的唯一的ID，和源屬性值，也就是加載該網頁的URL。

另一個内容加載器的設計要求是，必須使該IFRAME負載整個頁面（scrolling設定為auto）。此外，該網頁body必須隐藏溢出（通過設定樣式屬性），以避免重複滾動條。特别是當改變浏覽器的大小時。最後，滾動條的處理必須能跨浏覽器。

tab界面

 一些額外的東西

   上面的标簽，我認為它很友善去用一個div來顯示頭，logo，甚至一些連結或菜單項。一個更好的需求，我想要頭部能夠折疊，能使每個标簽宿主的頁面能有一個最大的視覺效果。

   最終的設計布局如下：

代碼/開發

我們從内容加載器開始，下面是标記：

   真正神奇的地方是css代碼，我設定body 的margin 為0，設定overflow 為hidden。防止scrollbars 出現在頁面的body上。

IFRAME的scrolling設定為auto，是以，如果需要滾動條，也隻有IFRAME提供給它。因為在IFRAME的周圍有大量不好看的空白空間，将margins 也設定為0，IFRAME的height和width被設定成100%，來確定網頁内容占盡可能多的空間。請注意html标簽中使用了Literal控件。正如你将看到以下的隐藏代碼， 使用Literal的目的是允許背景代碼注入東西到IFRAME元素中，它能建構了正确的querystring的ID和Path參數。

    請注意頁面執行個體必須提供LoadConfiguration方法來正确引入TabConfig.xml的位置。我本可以使用XmlTextReader，但選擇使用StreamReader讀取整個配置檔案的内容和使用XmlDocument對象解析tab的配置資訊。因為我覺得快速轉儲整個配置檔案比通過流程解析打開配置檔案要好很多。使用XmlTextReader正屬于這種情況。

    現在，讓我們看看Home Site 的首頁的标記

     這些代碼标記非常的繁瑣，我用了很多内部的注釋來解釋他們。請注意出現在标頭區的左上角的箭頭按鈕，其實就是來自我選擇的JQuery的主題中的圖像檔案，使用<code>ui-icon</code> 和<code>ui-icon-circle-triangle-n</code> causes 設定collapseArrow <code>span</code> ，造成JQuery 顯示一個名字為ui-icon-circle-triangle-n的ico的圖像。在文檔頭部的腳本區中，我建立一個函數，當我們單擊它的時候，改變向上箭頭圖示為向下箭頭圖示，此外，同樣的單擊事件處理程式将顯示或隐藏标頭部域的div（menuDiv）。

Home Site 頁面的隐藏代碼如下：

隐藏代碼不需要做過多的解釋，關鍵的動作是建立和設定HtmlGenericControl清單項，最後它通過程式設計被添加tab panel中。

遇到的問題

我遇到的主要的問題是跨浏覽器的情況下自動适應IFRAME的大小，該方案在IE 8，Firefox v3.5.6，和谷歌v3.0.195.38浏覽器進行測試。

我必須進行浏覽器檢測，根據IFRAME在三個浏覽器測試的尺寸，調整相應的寬度和高度。當浏覽器改變大小的時候，Chrome 和FireFox看起來IFRAME有個固定的高度。 但是， IE8看來來會丢失在IFRAME和浏覽器頂部之間的padding。調整寬度和高度特别是IE似乎應該盡可能的減少IFRAME到IE浏覽器視窗的底部“蜷縮”影響。

限制

&lt;script type="text/javascript" language="javascript"&gt;

    if (top!=self) top.location.href = location.href;

&lt;/script&gt;

2、在浏覽器中，Web網頁被迫改變頁面本身的大小，有可能跳出IFRAME窗體，進而取代了前父視窗。

3、我沒有使用Safari，Opera，早期版本的IE浏覽器，或任何其他浏覽器的早期版本測試的此解決方案，是以要在Home Site中适當地調整heightAdjust和widthAdjust變量，适應沒有測試的IE浏覽器或低于IE8浏覽器的版本。

總結和興趣點

雖然這種解決方案不是很複雜，通過一個标簽界面宿主外部網站内容。這是我所見過的許多網絡論壇和部落格要求的功能。請注意：您也可以配置标簽可顯示自己相關的域名或網站（在同一台伺服器）。

本文轉自麒麟部落格園部落格，原文連結：http://www.cnblogs.com/zhuqil/archive/2009/12/29/1635075.html，如需轉載請自行聯系原作者