使用JQUERY Tabs插件宿主IFRAMES

核心提示： 1、仅当tab被选中的时候，加载外部的数据内容2、保证纵向的scrollbars的设置成显示，使用JQUERY Tabs插件宿主IFRAMES(2)，而且仅当需要处理的数据溢出的时候，才显示scrollbars ，虽然我可以更进一步的深入，使tab能的动态增加和删除，3、保证该解决方案是能跨浏览

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　id="TabOne"　displayName="Tab　One"　path="www.msn.com"　/>
　　　　<tab　id="TabTwo"　displayName="Tab　Two"　path="www.amazon.com"　/>
</configuration>