JavaScript高级编程II

txf2004

浏览: 7042444 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

编程 JavaScript 网页游戏 CSS 应用服务器

原文地址：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 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

没有什么值得惊奇的，这个例子使用了和上一个完全一样的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

源代码如下：

<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>green</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()

{
http:/

分享到：

FLASH PLYAER UPDATE 3互联网流媒体世界刚 ... | 在Eclipse中使用org.vssplugin_1.6.1（使 ...

2007-08-23 11:25
浏览 1118
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论