JavaScript高级编程II

原文地址：http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1

在前面的文章中，我们介绍了两类JavaScript小工具及其源码：浮动文本和弹出菜单。本文中，我们将继续介绍另外几个有用的JavaScript小工具，并着重说明其工作原理，因此你可以简单修改后应用到自己的程序中。本文中的JavaScript代码应该不用做任何修改就可以在当前所有主流浏览器上运行。所以，不用再费周折……
使用div标签的图片切换（Image Toggling with the div Tag）
很多情况下，你可能想要把网页上的一类东西放在一起，例如图片，但是它们又会占据太多的空间。为什么不只放置一张图片，而让用户使用一个开关在图片之间切换呢？如下：
<script language="javascript"> function ShowImage(page, tag) { var i = 1; var el; while (el = document.getElementById(tag + i)) { if (i == page){ el.style.display = 'block'; }else{ el.style.display = 'none'; } i++; } } </script>

Image 1 Image 2 Image 3

其实，这非常简单。注意，浏览器在每次切换时并没有去请求服务器，切换是立即完成。窍门呢？把它们全部放到HTML中，但是每次只显示一个。这个效果可以使用div标签及其样式轻松完成。使用这个技术可以实现很多令人印象深刻的效果，接下来的例子将会看到。但是首先，我们还是了解一下这个例子是如何工作的。使用到的JavaScript函数只有一个：

functionShowImage(page,tag)
...{
vari=1;
varel;
while(el=document.getElementById(tag+i))...{
if(i==page)
el.style.display='block';
else
el.style.display='none';
i++;
}
}

实际的图片被放在HTML中它们应该出现的位置上，每一个都有一个div标签包括，如下：

<table>
<trvalign="top">
<td>
<divstyle="display:block"id="image1">
<imgsrc="/onlamp/2007/08/23/graphics/pic1.jpg"/>
</div>
<divstyle="display:none"id="image2">
<imgsrc="/onlamp/2007/08/23/graphics/pic2.jpg"/>
</div>
<divstyle="display:none"id="image3">
<imgsrc="/onlamp/2007/08/23/graphics/pic3.jpg"/>
</div>
</td>
<tdwidth="100%"align="right">
<selectonchange="ShowImage(parseInt(this.value),'image');">
<optionselected="selected"value="1">Image1</option>
<optionvalue="2">Image2</option>
<optionvalue="3">Image3</option>
</select>
</td>
</tr>
</table>

这个table的结构只是为了布局，所以根据本文讨论的目的可以忽略。重要的是，表格的第一个单元格中的三个div标签。注意，第一个div标签的display设置为了block，而其他几个设置为了none。任何display被设为none的内容被隐藏了，也就不会在浏览器窗口中绘制，尽管已经从服务器上取得，并且放到了页面上。因此，刚开始我们只看到pic1.jp，而没有看到另外两张。
然后，我们在下拉框的onchange事件发生时调用上面JavaScript函数。当用户在下拉框选择新的项目时就会触发该事件。我们传递两个参数：下拉框本身的引用和包含了所有图片的div标签id基础部分（注意image1、image2和image3都是以image开头）。
函数先获得表示哪一个图片需要显示的选择值。parseInt用来保证保存的是数字而不是字符串。接下来获得第一个div标签的句柄，本例中是id为image1的div。如果这个图片需要显示，就将它的display样式设置为block，其他的设置为none。然后，接着处理下一个标签（image2），等等，直到没有了需要处理的标签，这是退出函数。
因此，只要下拉框中的新选项被选择，其相应的div区域就会显示，而其他的被隐藏。它们在网页上共享同一块区域，因为在HTML中它们一个个紧挨着的。然而，这当然不是一个限制，如果需要我们可以让它们穿过不同的区域，也可以根据不同的选择出现在网页上不同的位置。相似地，我们也没有限制只能是图片；只要是可以放在div标签中的任何东西都可以使用鼠标点击显示或隐藏。这个功能使你可以在页面放置更多的信息，而不需要用户拖动滚动条。
tab：使用div的更多乐趣（Tabs: More Fun with div）
接下来我们看使用div标签的创造性作用的另外一个例子。有时候，需要在页面包含几个tab页。点击一个tab页面，就会显示其包含的信息，隐藏其他的，很像当前一系列的tab类型的web浏览器（译者注：Firefox和IE7都是这种形式）。但是，通常情况下，点击HTML的tab会引起页面的重载，这肯定会打断界面的连贯性。有没有信息可以立即呈现的方法呢？的确要感谢我们在上个例子中学到的小技巧，它可以完成。试一下吧： <style type="text/css"> ul.tab { margin: 0; padding: 3px 0; border-bottom: 1px solid #778; font-weight: bold; } ul.tab li { display: inline; padding: 3px 0.5em; margin-left: 3px; border-top: 1px solid #778; border-left: 1px solid #778; border-right: 1px solid #778; border-bottom: none; background: top repeat-x #89aac7; white-space: nowrap; color: white; cursor:pointer; } ul.tab li.tab_selected { background: #fff; border-bottom: 1px solid #fff; color: black; }</style>

• Summary
• Details
• Known Issues

Introducing the new, improved multi-widget. It slices, it dices, it even does your taxes! Order yours today! Call now: 555-WIDG

• Summary
• Details
• Known Issues

The multi-widget is a sophisticated piece of complex machinery designed by the country's leading nuclear physicists. Order yours today and you will quickly learn how easy it is to do just about anything in no time, thanks to our patented EZ-Widge technology.

Motor: 5HP
Dimensions: 8" x 5" x 2"
Weight: 212 g
Radioactivity: negligible

• Summary
• Details
• Known Issues

• Do not use multi-widget near open flames
• Do not run while holding multi-widget
• Do not taunt multi-widget
• Multi-widget may, under certain as yet undetermined circumstances, spontaneously explode. We hereby disclaim any libaility for personal injury caused as a result of multi-widget; for your safety, we recommend wearing body armor while handling multi-widget.

---

没有什么值得惊奇的，这个例子使用了和上一个完全一样的JavaScript函数，但是实现了一个完全不同的效果。其余的效果有几条简单CSS规则实现。我们先看一下例子中的HTML代码：

<divstyle="display:block"id="tab1">
<ulclass="tab">
<liclass="tab_selected"onclick="ShowImage(1,'tab');">
Summary
</li>
<lionclick="ShowImage(2,'tab');">
Details
</li>
<lionclick="ShowImage(3,'tab');">
KnownIssues
</li>
</ul>
<p>
Introducingthenew,improvedmulti-widget.Itslices,itdices,itevendoes
yourtaxes!Orderyourstoday!Callnow:555-WIDG
</p>
</div>

<divstyle="display:none"id="tab2">
<ulclass="tab">
<lionclick="ShowImage(1,'tab');">
Summary
</li>
<liclass="tab_selected"onclick="ShowImage(2,'tab');">
Details
</li>
<lionclick="ShowImage(3,'tab');">
KnownIssues
</li>
</ul>
<p>
Themulti-widgetisasophisticatedpieceofcomplexmachinerydesignedbythe
country'sleadingnuclearphysicists.Orderyourstodayandyouwillquickly
learnhoweasyitistodojustaboutanythinginnotime,thankstoourpatented
EZ-Widgetechnology.
</p>
<p>
Motor:5HP<br/>
Dimensions:8"x5"x2"<br/>
Weight:212g<br/>
Radioactivity:negligible
</p>
</div>

<divstyle="display:none"id="tab3">
<ulclass="tab">
<lionclick="ShowImage(1,'tab');">
Summary
</li>
<lionclick="ShowImage(2,'tab');">
Details
</li>
<liclass="tab_selected"onclick="ShowImage(3,'tab');">
KnownIssues
</li>
</ul>

<ul>
<li>Donotusemulti-widgetnearopenflames</li>
<li>Donotrunwhileholdingmulti-widget</li>
<li>Donottauntmulti-widget</li>
<li>
Multi-widgetmay,undercertainasyetundeterminedcircumstances,
spontaneouslyexplode.Weherebydisclaimanylibailityforpersonalinjury
causedasaresultofmulti-widget;foryoursafety,werecommendwearing
bodyarmorwhilehandlingmulti-widget.
</li>
</ul>
</div>

注意，这里有三个div区域（每一个是一个tab），就像上一个例子中每个图片有一个div。再次说明，第一个div被赋予display:block，而其他是display:none，所以刚开始只有第一个div可见。这些区域每一个都是先绘制三个tab，选中的tab和其他的颜色不同。因此，我们实际上在每一个tab上都重新绘制了三个tab。tab的内容可以是任何HTML。注意，内容只出现一次，只不过tab的HTML重复了多次，因此“浪费”的空间是最小的。
每个tab在触发onclick事件时就会调用JavaScript函数ShowImage。就像我们在第一个例子中看到的，这个函数隐藏了除作为参数传递给ShowImage的div之外的其他div区域。因此，我们在这里使用显示点击的tab，隐藏其他的。CSS或者样式用来实际绘制tab。我们定义了两个类：tab和tab_selected。前者应用于整个tab栏，而后者只用于被选择的tab。CSS的代码如下：

ul.tab{...}{
margin:0;
padding:3px0;
border-bottom:1pxsolid#778;
font-weight:bold;
}

ul.tabli{...}{
display:inline;
padding:3px0.5em;
margin-left:3px;
border-top:1pxsolid#778;
border-left:1pxsolid#778;
border-right:1pxsolid#778;
border-bottom:none;
background:toprepeat-x#89aac7;
white-space:nowrap;
color:white;
cursor:pointer;
}

ul.tabli.tab_selected{...}{
background:#fff;
border-bottom:1pxsolid#fff;
color:black;
}

第一部分用于ul标签，也就是整个tab栏。它设置margin和padding属性，指定所有tab靠左排列，并在tab栏的下面绘制一条边线。要让tab排成合适的队列，padding属性是必须设置的。另外，我们把tab栏中的文本加粗。
接下来的部分用在tab栏中的所有li标签上。display:inline可能是最重要的，它让列表横向排列代替纵向。还是margin和padding属性让tab排成一行，并且在相邻tab之间留下一定空隙。border属性设置tab的顶部和两边的边线（底部的边线来自ul标签）。最后，设置背景和前景色，确保文字不会换行。
最后一部分之应用于当前选中的tab，覆盖了第二部分中的一些属性设置。改变了tab的背景和前景色，使其突出，同时使用白色的底线掩盖了ul标签的黑色底线。这样就有了选中的tab在其他tab之前的感觉。
在本例中，tab的所有被加载后保存在网页上，所以点击一个tab时几乎是立即呈现其内容，不会引起页面的任何重载。使用一个十分简单的JavaScript函数和一小段CSS，我们就得到了真正令人印象深刻的效果。
div得更多技巧（And Even More div Tricks）
和上一个例子中我们学到有用的应用程序的技巧一样，尝试下面的例子，可以用来作为文本或列表的总结性区域，允许用户只展开和查看他/她感兴趣的内容：

Choice of four widget colors

blue green red brown

源代码如下：

<divstyle="display:block;"id="colors1">
<tablestyle="background:#eeeebb">
<tr>
<td>
<imgsrc="/onlamp/2007/08/23/graphics/expand.jpg"style="cursor:pointer;"
alt="ClicktoExpand"title="ClicktoExpand"onclick="ShowImage(2,'colors');"/>
</td>
<td>
Choiceoffourwidgetcolors
</td>
</tr>
</table>
</div>
<divstyle="display:none;"id="colors2">
<tablestyle="background:#eeeebb">
<trvalign="top">
<td>
<imgsrc="/onlamp/2007/08/23/graphics/collapse.jpg"style="cursor:pointer;"
alt="ClicktoCollapse"title="ClicktoCollapse"onclick="ShowImage(1,'colors');"/>
</td>
<td>
<ul>
<li>blue</li>
<li>green</li>
<li>red</li>
<li>brown</li>
</ul>
</td>
</tr>
</table>
</div>

如今，这个效果是如何完成的应该相当清楚了。再说一次，这里有两个div块，一个是折叠样式的文本和展开按钮，另一个是展开样式的文本和折叠按钮。最初，我们只看到折叠样式（display:block），接着我们使用图片的onclick回调在两个div之间切换。两个div的id分别为colors1和colors2，这样就便于使用我们前面编写的JavaScript函数ShowImage。
拖拽和切换（Drag and Drop and Swap）
现在，我已经过多的分析和讨论了div标签，下面我们就来看一些不同的东西。在这个例子中，我们展示一个使用鼠标拖拽文本（或图片）的方法。这也可以用来实现JavaScript游戏或者更加重要的目的，例如，允许你更换页面中图片的顺序。在下面的例子中，尝试拖拽三个名字来更换它们的位置。注意，你可以没有任何问题的交换John和Jane，但是却不能交换Bill和另外两个的位置，因为他总是捣乱。

John

Jane

Bill

（译者注：由于blog限制，不能在本页面中演示其效果，可以通过顶部链接进入原文查看其运行结果）
这个例子比至今为止的其他例子包含更多的代码，但是它仍然是相当易于理解的。和其他例子不同，它使用了全局鼠标事件。特别指出，它依赖于三个回调函数：按下鼠标、移动鼠标和释放鼠标。使用这些类别的全局事件缺点是，如果一次触发多个事件，就会变得非常危险。所以，你应该最小化这些事件的同时使用，在每个页面最多使用一个或者两个。对于这样一个特别例子，全局事件是非常必要的。下面我们每一次只看一部分代码：

//Setthecallbacks
document.onmousedown=mousedown;
document.onmousemove=movemouse;
document.onmouseup=mouseup;

varlastobj;//Lastdraggableobjectwehoveredover
varisdrag;//Trueifdragginganobject

此处，我们初始化三个回调函数。mousedown在用户点击鼠标时调用，movemouse在移动鼠标时调用，而mouseup在释放鼠标左键时被调用。我们还需要两个全局变量，第一个跟踪我们最近悬停的对象，第二个是一个标志，表示我们当前是否正在拖动一个对象。

//Thispreventsbrowsersfromhighlightingthedraggabletext
//whenyouclickonit.Thetablecontainingallthedraggable
//texthasiddrag_drop.

window.onload=function()
...{
vare=document.getElementById('drag_drop');
if(e)...{
if(moz)
e.onmousedown=function()...{returnfalse;}//mozilla
else
e.onselectstart=function()...{returnfalse;}//ie
}
}

这个短小的函数在页面一装载时就执行，它确保点击可拖拽对象时，文本不会高亮，就好像点击正常的文本一样。实现原理是使用一个空函数重写了负责高亮显示文本的函数。

//Checkstoseeifaswapisallowedbetweentwoobjectsbasedontheirids.
//Changethisasyouseefittopermitorforbidswappingeachpossiblepair
//ofdraggableitems.
functionallowswap(a,b)
...{
if(a.id=="dragdropa"&&b.id=="dragdropb"||a.id=="dragdropb"&&b.id=="dragdropa")
returntrue;
returnfalse;
}

//Returnstrueifanobjectisdraggable-changethistosuityourneeds.
functionisdraggable(obj)
...{
if(obj.id.substr(0,8)=="dragdrop")
returntrue;
returnfalse;
}

这里是两个我们需要的工具函数；输入两个对象，如果它们可以交换位置，allowswap则返回true，否则返回false。很明显，在这个位置使用一些颇具奥妙的逻辑，你就可以完成一些有趣的事情。如果输入的对象是可以拖拽的，isdraggable返回true。根据本例的目的，我们只判断id以dragdrop开头的对象，当然，你可以根据需要改变。可拖拽性也可以使用其他方式表示，例如一个特别的类（class），但是这里基于我们例子的目的。

//Callbackwhenmousebuttonispressed.Thischecksifanitemisdraggable,and
//ifsoinitiatestheprocess.
functionmousedown(e)
...{
varobj=moz?e.target:event.srcElement;
//TraceupDOMtreetoseeifitemclickedonisdraggable.Thisallows
//forthefactthatyoumayclick,forexample,onaTDwhiletheenclosing
//TRisthedraggableobject.
while(obj.tagName!="HTML"&&obj.tagName!="BODY"&&!isdraggable(obj))...{
obj=moz?obj.parentNode:obj.parentElement;
}
if(isdraggable(obj))...{
//Ifdraggable,setaglobalflagtotrackthis,andsaveapointer
//totheobjectinaglobalvariableaswell(dragobj).
isdrag=true;
dragobj=obj;

//origx,origyisoriginalstartinglocationofdraggedobject
origx=dragobj.style.left;
origy=dragobj.style.top;

//x,yisabsoluteco-ordinateswithinthewindow
x=moz?e.clientX:event.clientX;
y=moz?e.clientY:event.clientY;

//WhileoffsetX,offSetYdependonwhereexactlyyouclickedontheobject.
//Thusifyouclickinthemiddleoftheobject,itwillbe'attached'to
//themouseatthatpoint,andnottheupperleftcorner,forexample.
offsetX=moz?e.layerX+2:event.x+2;
offsetY=moz?e.layerY+2:event.y+2;
}
}

鼠标按下时调用mousedown，这是这段代码里的第一个主要的部分。那么，当点击某个对象时，我们要检查它是否可以拖拽。如果不可以，则检查其父对象是否可以拖拽等等。这是因为当我们点击某个对象时，浏览器往往返回DOM树中最底层、最深层的对象。那么例如，有一个包含了p标签并可以拖拽的span标签，点击p标签中的文字，你将会得到p标签的句柄，但是它并不可拖拽。然而检查其父对象，我们将会发现作为一个可拖拽对象的子对象，它实际上是可以拖拽的。
假设我们点击了一个可拖拽对象，我们要将全局标志设为true，把对象保存在dragobj中。我们还要保存几个坐标：dragobj的原始位置、点击时的鼠标相对位置和点击的绝对位置。

//Callbackwhenmouseismoved.Itwillchangethecursorwhenyoumoveoveranobject
//youcan-orcannot-swapwith.

functionmovemouse(e)
...{
//Checkifwearedragginganobject
if(isdrag)...{
//Ifso,setthedraggedobject'spositionrelativetohowmuchthemousehasmoved
//sincefirstclicked.
dragobj.style.left=moz?origx+e.clientX-x+offsetX+'px':origx+event.clientX-x+offsetX;
dragobj.style.top=moz?origy+e.clientY-y+offsetY+'px':origy+event.clientY-y+offsetY;
varobj=moz?e.target:event.srcElement;

//Ifweareoveranelementthatwecannotswapwith,changeitscursorstyle
//toshowthataswapisforbidden
if(obj!=dragobj&&isdraggable(obj)&&!allowswap(dragobj,obj))...{
obj.style.cursor='wait';
//saveinahandletotheobjectinaglobalsowecanresetthecursorlater
lastobj=obj;
}
elseif(lastobj)//resetthecursorassoonaswemoveoffanon-swappableobject
lastobj.style.cursor='pointer';
returnfalse;
}
else...{
//Sometimescangetstuckwithnodropicon,sorestorecursorjusttobesafe,
//whennotdraggingbutpassingoveradraggableitem
varobj=moz?e.target:event.srcElement;
if(isdraggable(obj))
obj.style.cursor='pointer';
}
}

只要移动鼠标，我们就要首先检查是否有对象被拖动。如果是，我们要计算对象应该被拖拽到的位置（毕竟，它自己不会像被施了魔法一样跟随着鼠标），然后移动对象到相应位置。这个公式主要保证从对象被点击开始，它的移动就要和鼠标的移动保持一致。我们还需要检查是否正悬停在另外一个可拖拽对象上。若是，我们使用allowswap确定是否可以二者是否可以交换位置。如果不可以，就把鼠标指针设为“等待”的形状（可能会由于电脑的不同而呈现不同的形状，但是这里是标准的忙碌指针）。如果可以交换位置或者并不是在一个可拖拽对象上，我们就不管鼠标指针的形状，如果以前改变过就把它恢复原状。
注意，作为额外预防措施，如果没有拖拽任何对象将鼠标悬停在可拖拽对象上时，我们仍然将鼠标指针恢复到正常状态。这是因为有时鼠标指针会停留在“等待”状态，也要依赖于用户移动鼠标、释放鼠标按键有多快速，等等。这就是说，上面提到恢复鼠标指针状态的逻辑不是没有道理的。

//Callbackwhenmouseisreleased-checksifaswapshouldoccurand
//returnsdraggedobjecttoitsstartingpositionifnot.

functionmouseup(e)
...{
if(isdrag)...{//Ifsomethingisbeingdragged

//Gettheobjectoverwhichthemousebuttonwasjustreleased
varobj=moz?e.target:event.srcElement;

//Checkifmousewasreleaseoveranobjectwecanswapwith
if(obj!=dragobj&&isdraggable(obj)&&allowswap(dragobj,obj))...{

//Aswapisallowed-swapcolor,tooltipandcontentsofthe
//draggedobjectwiththatitwasreleasedover
varhtm=obj.innerHTML;
obj.innerHTML=dragobj.innerHTML;
dragobj.innerHTML=htm;

varcol=obj.style.color;
obj.style.color=dragobj.style.color;
dragobj.style.color=col;

vartitl=obj.title;
obj.title=dragobj.title;
dragobj.title=titl;

//Setthepositionoftheobjectweweredragging(dragobj)wherethe
//otherobject(obj)islocatedandmoveobjtotheoriginallocation
//ofdragobjbeforeitwasdragged(origx,origy).
dragobj.style.left=obj.style.left;
dragobj.style.top=obj.style.top;
obj.style.left=origx;
obj.style.top=origy;
}
else...{
//Noswapcanoccursoreturndraggedobjecttoitsstartingposition
dragobj.style.left=origx;
dragobj.style.top=origy;
}

//Restorecursortopointerifitwaschangedinmovemouseabove
if(lastobj)...{
lastobj.style.cursor='pointer';
}
}
isdrag=false;//Nothingisbeingdraggednow
}

如果在拖拽一个对象时释放鼠标，mouseup要做最多的外勤工作。如果在一个可拖拽对象上释放鼠标，我们使用allowswap判断是否可以交换位置。如果可以，我们交换两个对象的文本内容、颜色和提示（title属性）。此时，你可能更愿意交换它们的所有属性，依目的而定。然后，我们移动被拖拽的对象到在其上释放鼠标的对象的位置，然后把该对象移动到被拖拽对象的原始位置。如此，就完成了位置交换。另一方面，如果不允许交换，我们只需要把被拖拽的对象移动到它开始的位置。无论怎样，如果在上面的movemouse中我们把鼠标指针改为了“等待”状态，就要回复正常情况，同时，我们要清除isdrag标志，表示当前没有拖拽任何对象。
最后，初始化对象非常容易。只需要记住，可拖拽对象的id是由dragdrop开头的：

<tableid="drag_drop"align="center"style="font-size:150%;color:green;background-color:#88ccff;white-space:nowrap;">
<tr>
<td>
<spanid="dragdropa"style="cursor:pointer;position:relative;color:#ff0000"title="JohnDoe">John</span>
</td>
</tr>
<tr>
<td>
<spanid="dragdropb"style="cursor:pointer;position:relative;color:#a0522d"title="JaneSmith">Jane</span>
</td>
</tr>
<tr>
<td>
<spanid="dragdropc"style="cursor:pointer;position:relative;color:#00aa00"title="BillSchwartz">Bill</span>
</td>
</tr>
</table>

放在表格中的对象，为了方便又使用不同的颜色表示，但是唯一重要的东西是可拖拽对象的id（它们在allowswap中被引用）以及可拖拽对象的style属性中的position:relative。这个规则在JavaScript中惯于使用对象的相对定位计算它们的位置。还需要注意，外层的表格的id是drag_drop，在刚开始的window.onload函数中引用。
总结
但愿前面的例子已经向你展示了div的一些创造性方式，可以用来切割或选择性的展示网页的部分内容。拖拽的例子只是十分强大的概念的一个基础例子，在今天多数的高级网页上都可以见到。只需再做一点工作，它就可以用来实现一个完全的可定制主页，例如，你可以拖动和交换新闻feed、图像和更多你内心的内容。唯一的限制，就是你的想象力！