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）
很多情况下，你可能想要把网页上的一类东西放在一起，例如图片，但是它们又会占据太多的空间。为什么不只放置一张图片，而让用户使用一个开关在图片之间切换呢？如下：
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++; } }

Image 1Image 2Image 3

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

function ShowImage(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 >
< tr valign ="top" >
< td >
< div style ="display:block" id ="image1" >
< img src ="/onlamp/2007/08/23/graphics/pic1.jpg" />
</ div >
< div style ="display:none" id ="image2" >
< img src ="/onlamp/2007/08/23/graphics/pic2.jpg" />
</ div >
< div style ="display:none" id ="image3" >
< img src ="/onlamp/2007/08/23/graphics/pic3.jpg" />
</ div >
</ td >
< td width ="100%" align ="right" >
< select onchange ="ShowImage(parseInt(this.value),'image');" >
< option selected ="selected" value ="1" > Image1 </ option >
< option value ="2" > Image2 </ option >
< option value ="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代码：

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

< div style ="display:none" id ="tab2" >
< ul class ="tab" >
< li onclick ="ShowImage(1,'tab');" >
Summary
</ li >
< li class ="tab_selected" onclick ="ShowImage(2,'tab');" >
Details
</ li >
< li onclick ="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 >

< div style ="display:none" id ="tab3" >
< ul class ="tab" >
< li onclick ="ShowImage(1,'tab');" >
Summary
</ li >
< li onclick ="ShowImage(2,'tab');" >
Details
</ li >
< li class ="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

源代码如下：

< div style ="display:block;" id ="colors1" >
< table style ="background:#eeeebb" >
< tr >
< td >
< img src ="/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 >
< div style ="display:none;" id ="colors2" >
< table style ="background:#eeeebb" >
< tr valign ="top" >
< td >
< img src ="/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;

var lastobj; // Lastdraggableobjectwehoveredover
var isdrag; // Trueifdragginganobject

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

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

window.onload = function ()
... {