开发学院网页设计JavaScript 使用JQUERY Tabs插件宿主IFRAMES 阅读

使用JQUERY Tabs插件宿主IFRAMES

 2010-01-08 00:00:00 来源:WEB开发网   
核心提示: 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去宿主外部网页将无法直接工作。

设计

这里有一个为客户提供视觉上的最低限度的需求:

使用JQUERY Tabs插件宿主IFRAMES

该解决方案,将需要三种不同的功能模块:

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>

上一页  1 2 3 4 5 6 7  下一页

Tags:使用 JQUERY Tabs

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接