必备的东西：
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文件的格式如下：
代码
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<tab displayName="Tab One" path="www.msn.com" />
<tab displayName="Tab Two" path="www.amazon.com" />
</configuration>
参数描述：
id = tab的唯一ID。这个ID不能包含空格
displayName =显示在tab头部的名字
path = 带查询参数的URL，"http://"是可选的。
配置文件的名字是：TabConfig.xml。现在必须手动添加或删除tab来更新解决方案的配置文件。
内容加载器：
可以说，没有内容加载模块是需要用IFRAME去为tab页面设置内部的列表项。但是如果IFRAME在一个通过使用锚作为每个tab列表项元素的子元素的独立的宿主网页中，我觉得在功能和测试方面没有比IFRAME的更好的控件了：
如果你愿意,将内容装载器做成一个通用的模块，它接受查询字符串参数，以便正确设置IFRAME元素；参数为元素的唯一的ID，和源属性值，也就是加载该网页的URL。
另一个内容加载器的设计要求是，必须使该IFRAME负载整个页面（scrolling设置为auto）。此外，该网页body必须隐藏溢出（通过设置样式属性），以避免重复滚动条。特别是当改变浏览器的大小时。最后，滚动条的处理必须能跨浏览器。
tab界面
tab界面代码非常的简单，可以从 JQuery UI Tabs documentation说明文档中得到详细的演示代码。JQuery UI Tabs说明文档中的和我们JQuery UI Tabs具体的实现不同的地方在于：每个tab项锚的href指向内容加载页面，随后加载所需的网页到IFRAME里面。
一些额外的东西
上面的标签，我认为它很方便去用一个div来显示头，logo，甚至一些链接或菜单项。一个更好的需求，我想要头部能够折叠，能使每个标签宿主的页面能有一个最大的视觉效果。
最终的设计布局如下：
代码/开发
我们从内容加载器开始，下面是标记：
代码
复制代码 代码如下: