使用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的能力去瀏覽更多的網(wǎng)頁和網(wǎng)站。當然這是一個非常有用的功能來替代同時打開幾個瀏覽器，但如果提供在一個頁面中瀏覽多個網(wǎng)頁也非常的不錯。
例如，如果你的主頁是由很多不同的有用的Web工具或者站點組成，一個tab頁面將可能非常的有用。使用框架集，IFRAME等等，都是宿主外部內(nèi)容的典型方式。這些方法允許你在單個頁面上宿主多個網(wǎng)頁。 但是使他們能正確的布局卻非常不容易。 更不用說去處理頁面和IFRAME的scrollbars等問題。
這篇文章中，嘗試去宿主外部數(shù)據(jù)，提供了一個基本的解決方案,利用ASP.NET，AJAX和javascript 去處理一些遇到的麻煩。
計劃
主旨是提供一個簡單的宿主外部數(shù)據(jù)的方案，這個解決方案有下面這些簡單的需求。
1、提供一個tab界面，方便瀏覽。
2、提供一個配置方法來添加tab
3、使每個tab頁都能宿主配置的頁面
基本的技術需要是：
1、僅當tab被選中的時候，加載外部的數(shù)據(jù)內(nèi)容
2、保證縱向的scrollbars的設置成顯示，而且僅當需要處理的數(shù)據(jù)溢出的時候，才顯示scrollbars 。
3、保證該解決方案是能跨瀏覽器工作
解決方案的名字和主頁面的名字都是 Home Site
分析
對于這個解決方案，我決定使用JQuery UI Tabs 來實現(xiàn)表格式的導航功能。我以前也使用過商業(yè)的開源的tab控件。但是JQuery UI Tabs 是輕量級的，實現(xiàn)非常地簡單，而且是免費的。
除了JQuery 和tab控件以及.net提供的功能，不需要其它的控件。 VS2005 將足以結(jié)合整個項目的開發(fā)環(huán)境，選擇C#作為開發(fā)語言。
我將使用一個IFRAME的宿主網(wǎng)站內(nèi)容，由于跨站點（又名跨域）的安全限制，使用JQuery UI Tabs去宿主外部網(wǎng)頁將無法直接工作。
設計
這里有一個為客戶提供視覺上的最低限度的需求： 
該解決方案，將需要三種不同的功能模塊：
1、配置模塊
2、使用JQuery UI Tabs 插件的tab界面
3、使用IFRAME元素宿主網(wǎng)頁內(nèi)容辦法。
配置模塊：
一個需求的功能是是使tab可配置。 我選擇最低限度，將tab的配置信息放到一個xml文件之中。雖然我可以更進一步的深入，使tab能的動態(tài)增加和刪除，我決定在本文的第二篇中提供此功能。
XML文件的格式如下：
代碼
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<tab id="TabOne" displayName="Tab One" path="www.msn.com" />
<tab id="TabTwo" displayName="Tab Two" path="www.amazon.com" />
</configuration>
參數(shù)描述：
id = tab的唯一ID。這個ID不能包含空格
displayName =顯示在tab頭部的名字
path = 帶查詢參數(shù)的URL，"http://"是可選的。
配置文件的名字是：TabConfig.xml?，F(xiàn)在必須手動添加或刪除tab來更新解決方案的配置文件。
內(nèi)容加載器：
可以說，沒有內(nèi)容加載模塊是需要用IFRAME去為tab頁面設置內(nèi)部的列表項。但是如果IFRAME在一個通過使用錨作為每個tab列表項元素的子元素的獨立的宿主網(wǎng)頁中，我覺得在功能和測試方面沒有比IFRAME的更好的控件了：
如果你愿意,將內(nèi)容裝載器做成一個通用的模塊，它接受查詢字符串參數(shù)，以便正確設置IFRAME元素；參數(shù)為元素的唯一的ID，和源屬性值，也就是加載該網(wǎng)頁的URL。
另一個內(nèi)容加載器的設計要求是，必須使該IFRAME負載整個頁面（scrolling設置為auto）。此外，該網(wǎng)頁body必須隱藏溢出（通過設置樣式屬性），以避免重復滾動條。特別是當改變?yōu)g覽器的大小時。最后，滾動條的處理必須能跨瀏覽器。
tab界面
tab界面代碼非常的簡單，可以從 JQuery UI Tabs documentation說明文檔中得到詳細的演示代碼。JQuery UI Tabs說明文檔中的和我們JQuery UI Tabs具體的實現(xiàn)不同的地方在于：每個tab項錨的href指向內(nèi)容加載頁面，隨后加載所需的網(wǎng)頁到IFRAME里面。
一些額外的東西
上面的標簽，我認為它很方便去用一個div來顯示頭，logo，甚至一些鏈接或菜單項。一個更好的需求，我想要頭部能夠折疊，能使每個標簽宿主的頁面能有一個最大的視覺效果。
最終的設計布局如下：
代碼/開發(fā)
我們從內(nèi)容加載器開始，下面是標記：
代碼
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="ContentLoader.aspx.cs" Inherits="HomeSite.ContentLoader" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ContentLoader</title>
<style type="text/css">
.contentsBody { margin:0; overflow:hidden; }
.contentsTable { width:100%; height:92%; valign:top;
cellspacing:0; cellpadding:0; border:0 }
.contentsIframe { height:100%; width:100%; marginwidth:0;
marginheight:0; scrolling:auto }
</style>
</head>
<body class="contentsBody">
<table class="contentsTable">
<tr>
<td>
<asp:Literal ID="Literal1"
runat="server"></asp:Literal>
</td>
</tr>
</table>
</body>
</html>
真正神奇的地方是css代碼，我設置body 的margin 為0，設置overflow 為hidden。防止scrollbars 出現(xiàn)在頁面的body上。
IFRAME的scrolling設置為auto，因此，如果需要滾動條，也只有IFRAME提供給它。因為在IFRAME的周圍有大量不好看的空白空間，將margins 也設置為0，IFRAME的height和width被設置成100%，來確保網(wǎng)頁內(nèi)容占盡可能多的空間。請注意html標簽中使用了Literal控件。正如你將看到以下的隱藏代碼， 使用Literal的目的是允許后臺代碼注入東西到IFRAME元素中，它能構(gòu)建了正確的querystring的ID和Path參數(shù)。
代碼
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace HomeSite
{
/// <summary>
/// Content Loader code behind class
/// </summary>
public partial class ContentLoader : System.Web.UI.Page
{
/// <summary>
/// On Page Load we need to capture query string parameters, construct
/// an IFRAME element, and inject the IFRAME element into our Literal control
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
string id = "";
string path = "";
// Validate we have valid querystring parameters
// namely "ID" and "Path"
if (HasValue(Request["ID"]) &&
HasValue(Request["Path"]))
{
// Set our local variables
id = Request["ID"].Trim().ToString();
path = Request["Path"].Trim().ToString();
// Prepend the path URL with http:// if needed
if (!path.ToLowerInvariant().StartsWith("http://"))
path = "http://" + path;
// Construct the IFRAME element and set the Text value of the Literal control
Literal1.Text = "<iframe class=\"contentsIframe\" " +
"id=\"contentFrame" + id + "\" " +
"frameborder=\"0\" src=\"" + path +
"\"></iframe>";
}
else
{
// Either query parameter or both are not set or do not
// exist (not passed as request parameters)
Literal1.Text = "<span id=\"contentFrame\">An " +
"error occurred while attempting to load a web page.</span>";
}
}
/// <summary>
/// Simple static class used to validate the value of querystring
/// parameter is not null or an empty string
/// </summary>
/// <param name="o">The object to check</param>
/// <returns>Returns true if the object (string)
/// has a value; false otherwise.</returns>
public static bool HasValue(object o)
{
if (o == null)
return false;
if (o is String)
{
if (((String) o).Trim() == String.Empty)
return false;
}
return true;
}
}
}
只要你將querystring的ID和Path參數(shù)傳遞給它，裝載的頁面能夠單獨的運行。通過VS2005瀏覽網(wǎng)頁，有URL的示例：http://localhost:49573/ContentLoader.aspx?ID=1234&Path=www.amazon.com.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Xml;
using System.Text;
namespace HomeSite
{
/// <summary>
/// Tab configuration static handling class
/// </summary>
public static class TabConfiguration
{
/// <summary>
/// This class returns a collection of TabDefinition classes created from
/// parsing the tab definitions defined in the TabConfig.xml file.
/// </summary>
/// <param name"page">The Page reference
/// calling this class</param>
/// <returns>ArrayList of TabDefinition classes</returns>
public static ArrayList LoadConfiguration(Page page)
{
// Local container for tab definitions
ArrayList tabList = new ArrayList();
try
{
// Read the contents of the TabConfig.xml file
StreamReader reader = new StreamReader(new FileStream(
page.MapPath("./TabConfig.xml"),
FileMode.Open, FileAccess.Read));
string xmlContent = reader.ReadToEnd();
reader.Close();
reader.Dispose();
// Create an XML document and load the tab configuration file contents
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(xmlContent);
// Iterate through each tab definition, create a TabDefinition class,
// and add the TabDefinition to the local ArrayList container
foreach (XmlNode node in xmlDoc.SelectNodes("/configuration/tab"))
{
TabDefinition tab = new TabDefinition();
tab.ID = node.Attributes["id"].Value;
tab.DisplayName = node.Attributes["displayName"].Value;
tab.Path = node.Attributes["path"].Value;
tabList.Add(tab);
}
}
catch
{
// Do nothing
}
// Return the tab definition
return tabList;
}
}
/// <summary>
/// This class serves as the container for a tab definition
/// </summary>
public class TabDefinition
{
/// <summary>
/// Member variable for the Unique ID for the tab
/// </summary>
private string _id;
/// <summary>
/// Member variable for the displayed name of the tab
/// </summary>
private string _displayName;
/// <summary>
/// Member variable for the web page URL to host in the tab (IFRAME)
/// </summary>
private string _path;
/// <summary>
/// Property for the Unique ID for the tab
/// </summary>
public string ID
{
get { return _id; }
set { _id = value; }
}
/// <summary>
/// Property for the displayed name of the tab
/// </summary>
public string DisplayName
{
get { return _displayName; }
set { _displayName = value; }
}
/// <summary>
/// Property for the web page URL to host in the tab (IFRAME)
/// </summary>
public string Path
{
get { return _path; }
set { _path = value; }
}
}
}
請注意頁面實例必須提供LoadConfiguration方法來正確引入TabConfig.xml的位置。我本可以使用XmlTextReader，但選擇使用StreamReader讀取整個配置文件的內(nèi)容和使用XmlDocument對象解析tab的配置信息。因為我覺得快速轉(zhuǎn)儲整個配置文件比通過流程解析打開配置文件要好很多。使用XmlTextReader正屬于這種情況。
現(xiàn)在，讓我們看看Home Site 的主頁的標記
代碼
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="HomeSite._Default" %>
// JQuery scripting
$(document).ready(function()
{
var browser = navigator.appName;
var heightAdjust = 23;
var widthAdjust = 7;
// Make height and width offset adjusts for non-IE browsers
if (browser != "Microsoft Internet Explorer")
{
heightAdjust = 18;
widthAdjust = 9;
}
// Show the panelList UL element so we can setup the tabs
// Please note this approach eliminates Flash of Unstyled Content (FOUC)
$('#panelList').show();
// Setup the jQuery UI tabs
$('#tabPage').tabs({
cache: true, // This ensures selecting a tab does not refresh the page
load: function(event, ui)
{
// Keep links, form submissions, etc. contained within the tab
$(ui.panel).hijack();
// Adjust the IFRAME size correctly in the browser window
$('.contentsIframe').width((ViewPortWidth() - widthAdjust));
$('.contentsIframe').height((ViewPortHeight() -
$('.menuRow').height() - $('.tabs').height() - heightAdjust));
}
});
// Toggle arrow button image and hide/show menu area
$('#collapseArrow').click(function()
{
if ($(this).hasClass('ui-icon-circle-triangle-s'))
{
$(this).removeClass('ui-icon-circle-triangle-s');
$(this).addClass('ui-icon-circle-triangle-n');
$('#menuDiv').show();
}
else
{
$(this).removeClass('ui-icon-circle-triangle-n');
$(this).addClass('ui-icon-circle-triangle-s');
$('#menuDiv').hide();
}
// Adjust the IFRAME size correctly in the browser window
$('.contentsIframe').width((ViewPortWidth() - widthAdjust));
$('.contentsIframe').height((ViewPortHeight() -
$('.menuRow').height() - $('.tabs').height() - heightAdjust));
});
// Adjust tab header width and visible iframe window
// height and width after the window is resized
$(window).resize(function(){
$('.contentsIframe').width((ViewPortWidth() - widthAdjust));
$('.contentsIframe').height((ViewPortHeight() -
$('.menuRow').height() - $('.tabs').height() - heightAdjust));
$('.ui-widget-header').width(ViewPortWidth() - widthAdjust);
});
// Adjust tab header height and width according to the IE client viewing area
$('.ui-widget-header').width(ViewPortWidth() - widthAdjust);
// Adjust the IFRAME height correctly in the browser window
$('.contentsIframe').height((ViewPortHeight() -
$('.menuRow').height() - $('.tabs').height() - heightAdjust));
});
// Returns width of viewable area in the browser
function ViewPortWidth()
{
var width = 0;
if ((document.documentElement) &&
(document.documentElement.clientWidth))
{
width = document.documentElement.clientWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
width = document.body.clientWidth;
}
else if (window.innerWidth)
{
width = window.innerWidth;
}
return width;
}
// Returns height of viewable area in the browser
function ViewPortHeight()
{
var height = 0;
if (window.innerHeight)
{
height = window.innerHeight;
}
else if ((document.documentElement) &&
(document.documentElement.clientHeight))
{
height = document.documentElement.clientHeight;
}
return height;
}
</script>
</head>
<body class="mainBody" style="margin:0">
<form id="form1" runat="server">
<asp:ScriptManager id="ScriptManager1" runat="server" />
<div>
<table id="mainTable" cellpadding="0" cellspacing="0">
<tr class="menuRow">
<td align="left" valign="top">
<span id="collapseArrow"
title="Show/Hide Header"
class="menuSpan ui-icon ui-icon-circle-triangle-n"></span>
<div id="menuDiv"
class="menuDiv">This is the header area.
<br /><i>Please customize this area as you set
fit; i.e. add a logo, menu options, links,
etc.</i><br /><br /></div>
</td>
</tr>
<tr>
<td class="tabPageCell" colspan="2"
valign="top" align="left">
<div id="tabPage" class="contents">
<ul id="panelList"
class="tabs" runat="server" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
這些代碼標記非常的繁瑣，我用了很多內(nèi)部的注釋來解釋他們。請注意出現(xiàn)在標頭區(qū)的左上角的箭頭按鈕，其實就是來自我選擇的JQuery的主題中的圖像文件，使用ui-icon 和ui-icon-circle-triangle-n causes 設置collapseArrow span ，造成JQuery 顯示一個名字為ui-icon-circle-triangle-n的ico的圖像。在文檔頭部的腳本區(qū)中，我創(chuàng)建一個函數(shù)，當我們單擊它的時候，改變向上箭頭圖標為向下箭頭圖標，此外，同樣的單擊事件處理程序?qū)@示或隱藏標頭部域的div（menuDiv）。
Home Site 頁面的隱藏代碼如下：
代碼
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace HomeSite
{
/// <summary>
/// Home Site (default) web page code behind class
/// </summary>
public partial class _Default : System.Web.UI.Page
{
/// <summary>
/// On page load we need to create the tab
/// list items for tab interface construction
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
AddTabsToForm();
}
/// <summary>
/// This method calls to our business logic
/// class to read the tab configuration file,
/// which will return an ArrayList of TabDefinition
/// classes. This method iterates
/// through the ArrayList building HTML controls to add to the tab panel.
/// </summary>
protected void AddTabsToForm()
{
foreach (TabDefinition tab in TabConfiguration.LoadConfiguration(this.Page))
{
HtmlGenericControl tabListItem = new HtmlGenericControl();
tabListItem.TagName = "li";
tabListItem.InnerHtml = "<a title=\"" +
tab.DisplayName + "\" href=\"ContentLoader.aspx?ID=" +
tab.ID + "&Path=" + tab.Path +
"\">" + tab.DisplayName + "</a>";
panelList.Controls.Add(tabListItem);
}
}
}
}
隱藏代碼不需要做過多的解釋，關鍵的動作是創(chuàng)建和設置HtmlGenericControl列表項，最后它通過編程被添加tab panel中。
遇到的問題
我遇到的主要的問題是跨瀏覽器的情況下自動適應IFRAME的大小，該方案在IE 8，F(xiàn)irefox v3.5.6，和谷歌v3.0.195.38瀏覽器進行測試。
我必須進行瀏覽器檢測，根據(jù)IFRAME在三個瀏覽器測試的尺寸，調(diào)整相應的寬度和高度。當瀏覽器改變大小的時候，Chrome 和FireFox看起來IFRAME有個固定的高度。 但是， IE8看來來會丟失在IFRAME和瀏覽器頂部之間的padding。調(diào)整寬度和高度特別是IE似乎應該盡可能的減少IFRAME到IE瀏覽器窗口的底部“蜷縮”影響。
限制
1、以下JavaScript將使你加載的網(wǎng)頁跳出IFRAME，我不知道任何解決辦法此（如果存在）。Code Project 網(wǎng)站上目前擁有類似下面的代碼，這樣配置選項指向http://www.codeproject.com/非常的容易，這里重現(xiàn)描述的動作。
<script type="text/javascript" language="javascript">
if (top!=self) top.location.href = location.href;
</script>
2、在瀏覽器中，Web網(wǎng)頁被迫改變頁面本身的大小，有可能跳出IFRAME窗體，從而取代了前父窗口。
3、我沒有使用Safari，Opera，早期版本的IE瀏覽器，或任何其他瀏覽器的早期版本測試的此解決方案，所以要在Home Site中適當?shù)卣{(diào)整heightAdjust和widthAdjust變量，適應沒有測試的IE瀏覽器或低于IE8瀏覽器的版本。
總結(jié)和興趣點
雖然這種解決方案不是很復雜，通過一個標簽界面宿主外部網(wǎng)站內(nèi)容。這是我所見過的許多網(wǎng)絡論壇和博客要求的功能。請注意：您也可以配置標簽可顯示自己相關的域名或網(wǎng)站（在同一臺服務器）。
相關文章
這篇文章主要介紹了Jquery插件編寫簡明教程,jquery插件開發(fā)實例,需要的朋友可以參考下2014-03-03
基于jquery的兼容各種瀏覽器的iframe自適應高度的腳本
在網(wǎng)上找了很多的iframe自適應高度的腳本，對瀏覽的的兼容性都不好。所以就想利用jquery強大的兼容性，寫一個iframe自適應高度的腳本。2010-08-08
如何在JS中實現(xiàn)相互轉(zhuǎn)換XML和JSON
下面先是跟大家分別介紹了JSON與XML以及它們的區(qū)別比較，后又分享關于JavaScript實現(xiàn)XML與JSON互轉(zhuǎn)例子，希望這些例子能給你帶來幫助。2016-07-07
這篇文章主要為大家詳細介紹了jQuery制作圣誕主題頁面的方法，類似動感影集，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
用jquery中插件dialog實現(xiàn)彈框效果實例代碼
這篇文章介紹了jquery中插件dialog實現(xiàn)彈框效果實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細介紹了layui彈出層效果的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了jQuery中val()方法用法,以實例形式分析了val()方法的兩種常見用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jquery中show()、hide()和toggle()用法實例
這篇文章主要介紹了jquery中show()、hide()和toggle()用法,以實例形式分析了show()、hide()和toggle()在顯示、隱藏及切換等應用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery ajax動態(tài)生成table功能,結(jié)合具體實例形式分析了jQuery基于ajax數(shù)據(jù)交互動態(tài)創(chuàng)建table表格的相關操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了jquery validation驗證表單插件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01