使用JQUERY Tabs与IFRAMES实现多页面浏览

需积分: 0 63 浏览量更新于2024-09-01 收藏 232KB PDF 举报

"本文主要介绍如何使用JQUERY Tabs插件来宿主IFRAMES，以实现在一个页面中浏览多个外部网页的功能。文章适用于具备Windows XP/Vista/7/2003/2008系统环境，使用Visual Studio 2005或2008开发，并且需要.NET Framework 2.0和ASP.NET AJAX 1.0支持的开发者。通过这种方法，用户可以在一个页面上方便地切换和浏览不同Web工具或站点，避免了同时打开多个浏览器窗口的困扰。" 在本文中，作者提出了一种解决方案，旨在满足以下需求： 1. 实现一个易于浏览的tab界面，使得用户可以方便地在各个页面间切换。 2. 提供配置方法，允许动态添加新的tab。 3. 每个tab页能够加载并宿主预设的外部网页。技术实现的关键点包括： 1. 只在用户选择特定tab时才加载对应的内容，以优化页面加载性能。 2. 确保页面的垂直滚动条始终显示，并且只在内容超出容器时才启用滚动功能，确保良好的用户体验。 3. 确保解决方案跨浏览器兼容，能在不同浏览器上正常运行。作者选择了JQuery UI Tabs插件作为实现tab功能的基础，因为它轻量级、易于实现，并且免费。尽管IFRAME是宿主外部内容的常见方式，但由于跨站点安全限制，直接用JQuery UI Tabs宿主外部网页并不直接可行。因此，作者需要解决这个问题。设计方案包含三个主要部分： 1. 配置模块：用于管理并添加新的tab，可能包括输入外部URL等操作。 2. Tab界面：由JQuery UI Tabs插件提供，用户可以通过点击不同的tab来查看和切换不同的IFRAME内容。 3. IFRAME内容：每个tab页内嵌的IFRAME将加载配置好的外部网页，以实现跨域内容的展示。这篇文章为开发者提供了一个使用JQUERY UI Tabs和IFRAME实现多网页浏览的方案，解决了跨域问题，并考虑了性能和用户体验。通过这种方式，用户可以在一个单一的页面上享受类似浏览器的多页面浏览体验，特别适合集成多种Web服务和工具的网站设计。

<tr>

<td>

<asp:Literal ID=”Literal1″

runat=”server”></asp:Literal>

</td>

</tr>

</table>

</body>

</html>

真正神奇的地方是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参数。

代码

代码如下:

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>”;

剩余10页未读，继续阅读

weixin_38612437

粉丝: 5
资源: 906

使用JQUERY Tabs与IFRAMES实现多页面浏览

秋天 jQuery tabs 插件.rar

jQuery Tabs插件 (选项卡插件)

jquery 的 Tabs 插件

jquery tabs切换

SpaceVim Tabs 管理插件

html推荐tab样式插件

form和jquery组件

react如何使用ant tabs组件

jquery 选项卡切换注册

html 置顶动画,HTML5顶部横向标签栏滑动切换动画

最新资源