基于jQuery类库的通用网页滑动门技术实现Word下载.docx

基于jQuery类库的通用网页滑动门技术实现Word下载.docx

《基于jQuery类库的通用网页滑动门技术实现Word下载.docx》由会员分享，可在线阅读，更多相关《基于jQuery类库的通用网页滑动门技术实现Word下载.docx（14页珍藏版）》请在冰豆网上搜索。

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，但是直到今天，网页设计中仍然是以至少1024×

768像素的支持为主，也就是说，每一屏页面只有区区955×

600像素的安全尺寸可以用而已。

于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。

通过滑动门技术，可以在同一块页面区域内放置数倍的内容。

根据用户的选择来决定显示哪一部分。

最近我在实际应用中，逐步完善出一种基于jQuery类库，但是比jQueryUITabs插件更小巧也更通用的简单Tabs实现。

本文将结合web标准化思想和网页重构的方法，介绍这种小巧而通用的网页滑动门实现技术。

本文中的部分内容已经以《简单、通用的JQueryTab实现》为题发表到作者的个人博客以及“博客园”网站。

互联网上有部分该文的转载。

研究背景

网页滑动门技术，是指当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容，该技术的最早起源已不可考证，但是这种网页设计技巧之所以为世界所知并广泛采用，则是由亚马逊网上书店在1999-2000年率先使用的结果。

如今已广泛应用于各类网站。

其中尤其以内容丰富的门户网站和新闻网站为甚。

滑动门技术的出现和广泛应用，是由于信息爆炸时代的网页内容日益丰富和网页尺寸限制造成的。

它的主要任务就是为了让有限的网页空间能够容纳更多的信息内容。

滑动门技术如今已经非常普及，有各种各样的实现方式。

但无论是哪一种的实现，基本上都脱离不了由JavaScript控制CSS样式，从而造成网页样式随着用户的行为改变这个基本原理和思路。

2008年，我所在公司的网站进行全面改版，改版的其中一项内容就是大量采用滑动门技术，以便网站首页能够容纳更多栏目的推荐内容。

网页设计师很好地贯彻了这一理念，改版设计稿中的每个网页都至少包含了5种以上的滑动门。

在实现这些网页设计的过程中，我由改造原来的纯JavaScript滑动门开始，后来引入jQueryUI中的Tabs插件，最后不断精简代码和进行重构。

得出了本文将要介绍的滑动门实现技术。

早期滑动门

最早的滑动门的技术，一般都是利用链接元素的onclick或者onmouseover事件，传递一个表示当前正与用户交互的链接元素的参数给JS函数，JS函数根据传递的参数来决定改变哪一个滑动门标签，显示哪一个滑动门内容。

比如：

functionshowTabs（n）{

vartabsNumber=3;

for（i=0;

i<

tabsNumber;

i++）{

if（i==n）{

document.getElementById（"

tabPanel-"

+i）.style.display="

block"

;

}else{

none"

}

}

代码1

假如网页中有这样的一个函数，就可以在滑动门标签的链接按钮中设置onclick=“showTabs

（1）”来设置第二块内容显示，而其它块隐藏。

这种方式最大的缺点是：

1.HTML代码和JS代码混合，例如（<

ahref="

#"

onclick="

showTabs

（1）"

>

文字<

/a>

）；

2.可扩展性差；

每次增加滑动门标签，都要改动代码，放到别的网页中，还需要修改代码和网页内容。

尽管可以通过window.onload绑定事件等方式来实现JS代码从HTML中分离，也可以把函数改得更复杂以实现通用性。

但是总的来说，还是很难做到一处定义到处引用。

jQueryUITabs

后来随着各种JS类库的出现，更强大的Tabs出现了，最出名的就是jQueryUI中的tabs插件。

一旦加载了jQuery框架和jQueryUI插件，那么要在页面中实现Tabs，就变得简单了许多。

首先我们的页面中的Tabs代码这样写：

<

divclass="

tabs"

<

ul>

li>

#panel-1"

标签A<

/li>

#panel-2"

标签B<

/ul>

divid="

panel-1"

区域A<

/div>

panel-2"

区域B<

代码2

注意：

这里的代码非常干净，不含任何的JS代码或者与文档结构无关的定义。

然后，在head区域，或者在页面任何地方增加一段JS代码：

$（function（）{

$（"

.tabs"

）.tabs（）;

}）;

代码3

就实现了Tabs功能，这行JS代码执行后，代码2里的HTML代码就会变成：

ulclass="

ui-tabs-nav"

jquery1239647486215="

2"

liclass="

ui-tabs-selected"

8"

9"

>

class="

ui-tabs-panel"

4"

区域A

ui-tabs-panelui-tabs-hide"

5"

区域B

代码4

结合我们自己编写的CSS，或者jQueryUI自带的CSS，就可以实现滑动门效果。

并且，由于jQuery的强大，我们可以在页面中放置多组滑动门，然后一次性设定。

要说明的是，这个地方由于只启用了jQueryUI中的Tabs插件，因此生成的代码还是比较干净的，只增加了ui-tabs-xxxx这几个相关的CSS类。

如果你同时包含了jQueryUI的其它插件，那么即使不启用，也会添加一堆的CSS定义。

而且，jQueryUITabs还提供了非常强大的控制功能，你可以动态地添加tab，可以随意更改激活事件，可以定义切换效果，还可以设置默认激活状态和禁用等。

这种滑动门的优点在于：

1、原始XHTML简洁明了；

2、文档结构清晰；

3、符合web标准。

但是我在实际应用中遇到了一些问题，除了jQueryUI自带的JS脚本很大，CSS不符合实际应用需求外，还有一个最大的问题，你可能已经注意到了，在作为导航的标签定义中，标签和目标区域的对应是用链接目标来定义的。

比如<

和<

对应，如果你的标签和区域没有对应起来，绑定tabs（）就不起作用了。

而且，这种方式来带来另一个麻烦，就是当我们需要给标签加上链接的时候，没办法加。

即使你将标签的激活事件设置为onmouseover而不是onclick，链接也不能实现，因为链接用于指定目标了。

这种需求在我们的实际应用中并不是不存在的。

图1

图2

这两个图片中的tabs标签，都要添加到对应的新闻类别或者论坛板块的链接。

这时候jQueryUI的默认绑定就带来了麻烦。

所以这种滑动门的缺点是：

1、JS代码和XHTML代码的耦合度依然很高——在JS中必须指定滑动门的容器元素；

而在XHTML代码中必须设置指向内容元素ID的链接目标。

2、滑动门标签的链接必须指定目标内容元素的ID，导致滑动门标签不能含有链接。

3、标签和内容紧密联系，改动其中一项必然影响另一项。

4、页头必须包含jQueryUI的类库JS引用，该文件尺寸很大，将造成网页打开速度的下降，占用更多带宽。

仅仅为了一个Tabs而引用整个UI类库，非常浪费。

小巧、通用的jQueryTabs

其实分析一下，我们在实现滑动门的时候，用以下HTML结构就可以满足需要：

div>

代码6

借助jQuery库，我们可以通过$（“.tabs”）找到要实现的标签，然后.find（“li”）来找到要添加事件的元素，绑定事件的时候，我们可以通过该元素在$（“.tabsli”）集合中的索引值来明确是哪一个标签被激活，然后对应索引值的panel显示。

代码类似这样：

scripttype="

text/javascript"

$（function（）{

）.find（"

li"

）.mouseover（function（e）{

if（e.target==this）{

vartabs=$（this）.parent（）.children（"

）;

varpanels=$（this）.parent（）.parent（）.children（"

div"

varindex=$.inArray（this,tabs）;

if（panels.eq（index）[0]）{

tabs.removeClass（"

）

.eq（index）.addClass（"

panels.addClass（"

ui-tabs-hide"

.eq（index）.removeClass（"

}）;

/script>

代码7

这段代码只使用了两个CSS类来处理，并且，自动判断tabs（标签）和panels（内容面板）的对应状态，假如你有4个标签，但是只有前三个启用了，那么你只需要写三个panel就可以，第四个panel不存在，则第四个tab自动不生效。

在实际使用中，会遇到一个问题，一般我们会给tab中的文字加链接，那么当鼠标滑过这个tab的时候，如果指到了文字，那么激发事件的对象有可能是a元素而不是li元素，则事件就不能正确激发。

所以我们改进代码如下：

$（function（）{

.ui-tabs-nav>

li>

a"

vartabs=$（this）.parent（）.parent（）.children（"

varpanels=$（this）.parent（）

.parent（）

.children（"

.ui-tabs-panel"

代码8

注意重构前后的代码，功能上是完全一样的，但是把事件由li元素移到了a元素。

与此对应的HTML结构是：

/bbs"

论坛新帖<

/blog"

最新博文<

!

--这里调用最新论坛文章-->

--这里调用最新博客文章-->

代码9

在上面的代码中，我们使用了一些CSS类，但是这些类跟我们的滑动门在事实上是不相互依赖的，也就是说，只要具备ui-tabs-nav，就会自动实现滑动门功能，其它的CSS样式只是为了实现滑动门和内容的具体显示。

我们有以下的CSS类定义：

.ui-tabs-nav

{

/*导航容器定义*/

.ui-tabs-navli

/*默认标签样式*/

.ui-tabs-navli.ui-tabs-selected

/*激活的标签样式*/

.ui-tabs-panel

/*默认的显示区域样式*/

.ui-tabs-hide

display:

none;

代码10

这样，就可以根据你的需要，结合自己的CSS，定制不同样式的滑动门了。

把相应的JS代码放到页面中，那么在页面里任何地方只要你按照HTML结构编写了一段html，这段html就会自动变成滑动门。

而不用在每个页面里单独指定特定的selector来应用滑动门的tabs（）方法。

并且，根据需要给你的滑动门标签添加需要的链接，或者不要链接（href=”#”或者href=”javascript:

void（0）”）。

这种实现的优点是：

1.代码短小精干，除了jQuerycore以外，不依赖其它组件，对网页打开速度和带宽占用降到了最低。

2.非常通用，只要把代码8里的JS嵌入页面或者放置到单独的JS文件中，并在页面中引入，就能全自动检查页面上所有的.ui-tabs-nav元素，并把找到的结构转化为滑动门。

3.只要编写符合web标准的XHTML，指定一个.ui-tabs-nav即可实现，没有任何其它限制和要求。

效果演示

在我前文所提到的那次改版中，光网站首页一个页面上，就应用了5个不同样式共10组滑动门，而代码则整个网站共享一份——代码8。

这里列举四个不同样式的滑动门效果截图：

图3-滑动门一（多个搜索表单，暂时只实现两个，后面三个由于没有对应的ui-tabs-panel，自动禁用，但是链接可以点击。

图4-滑动门二（多块商务信息区域，其中第三个由于没有对应的ui-tabs-panel，自动禁用。

图5-滑动门三：

新闻栏目切换，标签中的文字链接到对应的新闻栏目。

图6-滑动门四：

论坛分板块帖子调用。

标签中的文字链接到对应的论坛板块。

总结

通过本文所介绍的滑动门技术开发可以发现，大型的、功能强大的框架并不总是适应我们的实际需求。

几乎所有的通用框架，为了实现复杂的功能和通用型，都会包含大量代码和设置，而这些东西中我们真正需要和用到的可能只有其中一点点。

本文同时也从一个侧面说明了web标准化的网页并不缺乏表现力，恰恰相反的是，越是标准化的页面，越能够充分利用代码复用、结构行为表现分离的优势，以更少的代码实现更复杂的功能。

参考文献

1.Zakas,N.C.:

ProfessionalJavaScriptforWebDevelopment[M],WileyPublishing,Inc.2006-11;

2.Flanagan,D.:

JavaScript:

TheDefinitiveGuide[M],O'

Reilly&

Associates,Inc.2003-11

3.MeyerE.A.:

CascadingStyleSheets:

Associates,Inc.2007-10-1