基于jQuery类库的通用网页滑动门技术实现.docVIP

基于jQuery类库的通用网页滑动门技术实现 吴康瑞 云南爱因森软件职业学院 （昆明，651701） Email：wukangrui@ 摘要：本文介绍了作者在实际项目中逐步开发和完善出来的一种简单、通用的网页滑动门技术实现方法。相比互联网上已有的各种实现，本文所介绍的滑动门技术基于著名JavaScript类库——jQuery实现，网页的结构、行为、样式分别由xhtml、JavaScript、CSS承担，彻底实现了三者的分离。论文采用渐进式重构的方法，在介绍滑动门技术实现的同时，对web标准化思想也进行了一定的阐述。 关键词：web标准、jQuery、滑动门、网页设计、CSS、JavaScript、XHTML Abstract: This essay introduces a universal simple method to implement web-tabs technology, which was developed and improved during the progress of an real project. The new method is based on jQuery library and w3c web-standard. Keywords: web standard, jQuery, tabs, webpage design, CSS, JavaScript, XHTML 目录 前言 2 研究背景 3 早期滑动门 4 jQuery UI Tabs 5 小巧、通用的jQuery Tabs 8 效果演示 12 总结 14 参考文献 14 前言 网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基jQuery类库，但是比 jQuery UI Tabs插件更小巧也更通用的简单 Tabs 实现。以及“博客园”网站。互联网上有部分该文的转载。 研究背景 网页滑动门技术，是指当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容，该技术的最早起源已不可考证，但是这种网页设计技巧之所以为世界所知并广泛采用，则是由亚马逊网上书店在1999-2000年率先使用的结果。如今已广泛应用于各类网站。其中尤其以内容丰富的门户网站和新闻网站为甚。 滑动门技术的出现和广泛应用，是由于信息爆炸时代的网页内容日益丰富和网页尺寸限制造成的。它的主要任务就是为了让有限的网页空间能够容纳更多的信息内容。 滑动门技术如今已经非常普及，有各种各样的实现方式。但无论是哪一种的实现，基本上都脱离不了由JavaScript控制CSS样式，从而造成网页样式随着用户的行为改变这个基本原理和思路。 2008年，我所在公司的网站进行全面改版，改版的其中一项内容就是大量采用滑动门技术，以便网站首页能够容纳更多栏目的推荐内容。网页设计师很好地贯彻了这一理念，改版设计稿中的每个网页都至少包含了5种以上的滑动门。在实现这些网页设计的过程中，我由改造原来的纯JavaScript滑动门开始，后来引入jQuery UI中的Tabs插件，最后不断精简代码和进行重构。得出了本文将要介绍的滑动门实现技术。 早期滑动门 最早的滑动门的技术，一般都是 onclick 或者 onmouseover 事件传递一个参数给 JS 函数，根据传递的参数来决定显示哪一个。比如： 有这样的一个函数，就可以在按钮中设置 onclick = “showTabs(1)”来设置第二块内容显示，而其它块隐藏。 这种方式最大的缺点是： HTML代码和JS代码混合 可扩展性差； 尽管可以通过window.onload绑定事件等方式来实现JS代码从HTML中分离，也可以把函数改得更复杂以实现通用性。但是总的来说，还是很难做到一处定义到处引用。 后来随着各种JS类库的出现，更强大的Tabs出现了，最出名的就是jQuery UI中的tabs插件。一旦加载了jQuery框架和jQuery UI插件，那么要在页面中实现Tabs，就变得简单了许多。首先我们的页面中的Tabs代码这样写： 注意：这里的代码非常干净，不含任何的JS代码或者与文档结构无关的定义。然后，在head区域，或者在页面任何地方增加一段代码： 就实现了Tabs功能，这行JS代码执行后，HTML代码就会