JavaScript高级编程II
2014-07-09 20:46
375 查看
原文地址： 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++;
}
}
在前面的文章中，我们介绍了两类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++;
}
}
| function ShowImage(page, tag) <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">Image 1</option> <option value="2">Image 2</option> <option value="3">Image 3</option> </select> </td> </tr> </table> 这个table的结构仅仅是为了布局，所以依据本文讨论的目的能够忽略。重要的是，表格的第一个单元格中的三个div标签。注意，第一个div标签的display设置为了block，而其它几个设置为了none。不论什么display被设为none的内容被隐藏了，也就不会在浏览器窗体中绘制，虽然已经从server上取得，而且放到了页面上。因此，刚開始我们仅仅看到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会引起页面的重载，这肯定会打断界面的连贯性。有没有信息能够马上呈现的方法呢？的确要感谢我们在上个样例中学到的小技巧，它能够完毕。试一下吧： 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; }
<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');"> Known Issues </li> </ul> <p> Introducing the new, improved multi-widget. It slices, it dices, it even does your taxes! Order yours today! Call now: 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');"> Known Issues </li> </ul> <p> 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. </p> <p> Motor: 5HP<br /> Dimensions: 8" x 5" x 2"<br /> Weight: 212 g<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');"> Known Issues </li> </ul> <ul> <li>Do not use multi-widget near open flames</li> <li>Do not run while holding multi-widget</li> <li>Do not taunt multi-widget</li> <li> 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. </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的代码例如以下： <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="Click to Expand" title="Click to Expand" onclick="ShowImage(2, 'colors');" /> </td> <td> Choice of four widget colors </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="Click to Collapse" title="Click to Collapse" 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块，一个是折叠样式的文本和展开button，还有一个是展开样式的文本和折叠button。最初，我们仅仅看到折叠样式（display:block），接着我们使用图片的onclick回调在两个div之间切换。两个div的id分别为colors1和colors2，这样就便于使用我们前面编写的JavaScript函数ShowImage。 拖拽和切换（Drag and Drop and Swap） 现在，我已经过多的分析和讨论了div标签，以下我们就来看一些不同的东西。在这个样例中，我们展示一个使用鼠标拖拽文本（或图片）的方法。这也能够用来实现JavaScript游戏或者更加重要的目的，比如，同意你更换页面中图片的顺序。在以下的样例中，尝试拖拽三个名字来更换它们的位置。注意，你能够没有不论什么问题的交换John和Jane，可是却不能交换Bill和另外两个的位置，由于他总是捣乱。
这个样例比至今为止的其它样例包括很多其它的代码，可是它仍然是相当易于理解的。和其它样例不同，它使用了全局鼠标事件。特别指出，它依赖于三个回调函数：按下鼠标、移动鼠标和释放鼠标。使用这些类别的全局事件缺点是，假设一次触发多个事件，就会变得很危急。所以，你应该最小化这些事件的同一时候使用，在每一个页面最多使用一个或者两个。对于这样一个特别样例，全局事件是很必要的。以下我们每一次仅仅看一部分代码： // Set the callbacks document.onmousedown = mousedown; document.onmousemove = movemouse; document.onmouseup = mouseup; var lastobj; // Last draggable object we hovered over var isdrag; // True if dragging an object 此处，我们初始化三个回调函数。mousedown在用户点击鼠标时调用，movemouse在移动鼠标时调用，而mouseup在释放鼠标左键时被调用。我们还须要两个全局变量，第一个跟踪我们近期悬停的对象，第二个是一个标志，表示我们当前是否正在拖动一个对象。 // This prevents browsers from highlighting the draggable text // when you click on it. The table containing all the draggable // text has id drag_drop. window.onload = function() // Checks to see if a swap is allowed between two objects based on their ids. // Change this as you see fit to permit or forbid swapping each possible pair // of draggable items. function allowswap(a,b) // Returns true if an object is draggable - change this to suit your needs. function isdraggable(obj) // Callback when mouse button is pressed. This checks if an item is draggable, and // if so initiates the process. function mousedown(e) // Callback when mouse is moved. It will change the cursor when you move over an object // you can - or cannot - swap with. function movemouse(e) // Callback when mouse is released - checks if a swap should occur and // returns dragged object to its starting position if not. function mouseup(e) <table id="drag_drop" align="center" style="font-size:150%; color:green; background-color:#88ccff; white-space: nowrap;"> <tr> <td> <span id="dragdropa" style="cursor: pointer; position: relative; color: #ff0000" title="John Doe">John</span> </td> </tr> <tr> <td> <span id="dragdropb" style="cursor: pointer; position: relative; color: #a0522d" title="Jane Smith">Jane</span> </td> </tr> <tr> <td> <span id="dragdropc" style="cursor: pointer; position: relative; color: #00aa00" title="Bill Schwartz">Bill</span> </td> </tr> </table> 放在表格中的对象，为了方便又使用不同的颜色表示，可是唯一重要的东西是可拖拽对象的id（它们在allowswap中被引用）以及可拖拽对象的style属性中的position:relative。这个规则在JavaScript中惯于使用对象的相对定位计算它们的位置。还须要注意，外层的表格的id是drag_drop，在刚開始的window.onload函数中引用。 总结 但愿前面的样例已经向你展示了div的一些创造性方式，能够用来分割或选择性的展示网页的部分内容。拖拽的样例仅仅是十分强大的概念的一个基础样例，在今天多数的高级网页上都能够见到。仅仅需再做一点工作，它就能够用来实现一个全然的可定制主页，比如，你能够拖动和交换新闻feed、图像和很多其它你内心的内容。唯一的限制，就是你的想象力！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
相关文章推荐
|