超级简单:使用JQUERY Tabs插件宿主IFRAMES-阿里云开发者社区

开发者社区> 技术mix呢> 正文

超级简单:使用JQUERY Tabs插件宿主IFRAMES

简介:
+关注继续查看

 /Files/zhuqil/HomeSite.zip 

   

     这篇文章提供了一个使用asp.net和JQuery UI Tabs plug-in用IFRAME元素去宿主web页面。

    必备的东西:

  •  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文件的格式如下:

    代码

     参数描述:

  • 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,甚至一些链接或菜单项。一个更好的需求,我想要头部能够折叠,能使每个标签宿主的页面能有一个最大的视觉效果。

  •    最终的设计布局如下:

  • 代码/开发

  • 我们从内容加载器开始,下面是标记:

    代码

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

        只要你将querystring的ID和Path参数传递给它,装载的页面能够单独的运行。通过VS2005浏览网页,有URL的示例:http://localhost:49573/ContentLoader.aspx?ID=1234&Path=www.amazon.com.

  • 代码

        请注意页面实例必须提供LoadConfiguration方法来正确引入TabConfig.xml的位置。我本可以使用XmlTextReader,但选择使用StreamReader读取整个配置文件的内容和使用XmlDocument对象解析tab的配置信息。因为我觉得快速转储整个配置文件比通过流程解析打开配置文件要好很多。使用XmlTextReader正属于这种情况。

        现在,让我们看看Home Site 的主页的标记

    代码

         这些代码标记非常的繁琐,我用了很多内部的注释来解释他们。请注意出现在标头区的左上角的箭头按钮,其实就是来自我选择的JQuery的主题中的图像文件,使用ui-icon 和ui-icon-circle-triangle-n causes 设置collapseArrow span ,造成JQuery 显示一个名字为ui-icon-circle-triangle-n的ico的图像。在文档头部的脚本区中,我创建一个函数,当我们单击它的时候,改变向上箭头图标为向下箭头图标,此外,同样的单击事件处理程序将显示或隐藏标头部域的div(menuDiv)。

    Home Site 页面的隐藏代码如下:

    代码

    隐藏代码不需要做过多的解释,关键的动作是创建和设置HtmlGenericControl列表项,最后它通过编程被添加tab panel中。

  • 遇到的问题

  • 我遇到的主要的问题是跨浏览器的情况下自动适应IFRAME的大小,该方案在IE 8,Firefox v3.5.6,和谷歌v3.0.195.38浏览器进行测试。

  • 我必须进行浏览器检测,根据IFRAME在三个浏览器测试的尺寸,调整相应的宽度和高度。当浏览器改变大小的时候,Chrome 和FireFox看起来IFRAME有个固定的高度。 但是, IE8看来来会丢失在IFRAME和浏览器顶部之间的padding。调整宽度和高度特别是IE似乎应该尽可能的减少IFRAME到IE浏览器窗口的底部“蜷缩”影响。

  • 限制

  • 1、以下JavaScript将使你加载的网页跳出IFRAME,我不知道任何解决办法此(如果存在)。Code Project 网站上目前拥有类似下面的代码,这样配置选项指向http://www.codeproject.com/非常的容易,这里重现描述的动作。

    <script type="text/javascript" language="javascript">
        
    if (top!=self) top.location.href = location.href;
    </script>

    2、在浏览器中,Web网页被迫改变页面本身的大小,有可能跳出IFRAME窗体,从而取代了前父窗口。

    3、我没有使用Safari,Opera,早期版本的IE浏览器,或任何其他浏览器的早期版本测试的此解决方案,所以要在Home Site中适当地调整heightAdjust和widthAdjust变量,适应没有测试的IE浏览器或低于IE8浏览器的版本。

  • 总结和兴趣点
  • 虽然这种解决方案不是很复杂,通过一个标签界面宿主外部网站内容。这是我所见过的许多网络论坛和博客要求的功能。请注意:您也可以配置标签可显示自己相关的域名或网站(在同一台服务器)。
  • 原文连接:http://www.codeproject.com/KB/aspnet/Homesite.aspx

  •  

 




本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2009/12/29/1635075.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
TaggingJS – 可以灵活定制的 jQuery 标签系统插件
  TaggingJS 是一款 jQuery 插件,用来创建高度可定制的前端标签系统。这款插件不到3KB ,支持主流浏览器。有几种方法来定制 TaggingJS 的默认行为:一是使用  custom_options 定制全局的 TaggingJS 行为;二是给标签框加上 data 属性;三是结合前面两种方式。
746 0
uwp - 解决使用EntityFramework时报错“unable to load dll 'sqlite3':the specified module could not be found”
原文:uwp - 解决使用EntityFramework时报错“unable to load dll 'sqlite3':the specified module could not be found” 在使用uwp的ef过程中碰到一万个问题快折腾死我了,好在最后终于解决掉所有问题,但愿如此,因为在这之前先后发生不同的报错,不知道后面还会碰到新的问题不。
1028 0
JQuery爱好者们的福音:jQuery EasyUI 开源插件套装 完全替代ExtJS
前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好。   我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比:   上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~     漂亮的消息弹出,支持遮罩效果。
995 0
jQuery遮罩插件jQuery.blockUI.js简介
      本文链接:http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/
803 0
一起谈.NET技术,分享在MVC3.0中使用jQuery DataTable 插件
  前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。
765 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载