<a href="javascript:myFunction();">clickme</a>
而必须采取象下面的做法:
<a href="#" onclick="myFunction();
return false;">clickme</a>
实际上,这也是确保您的脚本在不能运行这些函数的浏览器上自然退化的好方法。请注意“return false”这行代码,它使浏览器停止装载 href 参数指定的URL。这样,如果浏览器中 JavaScript 被关闭,或者浏览器不能处理 JavaScript,则您可以提供一个不同的页面;但是如果这里的函数可以运行,则连接不会被打开。
在这个演示中,我们讨论的更深一些:
<a href="#" onclick="return
!showPopup(nameFieldPopup, event);">
clickme</a>
我们不去深入到所有的细节,只是大概看看这行代码,它的意思是运行 showPopup 函数,然后返回该函数返回值的非。那样,如果 showPopup 返回 true(意思是它成功显示了弹出层),我们就把 false 返回给连接,这样连接就不会改变页面。另外一方面,如果 showPopup 返回 false(意思是它不能显示弹出层),则我们就继续执行脚本,跟着连接进入到一个独立的页面,该页面具有和弹出层相同的信息。这个逻辑看起来可能有点混淆,但是只要记住一条就可以了:如果您返回 false,连接就不起作用了。
使用脚本
如果要使用这些脚本来实现弹出机制,请按照如下这些步骤来进行:
- 如果要进行层的弹出,则需要把层工具和实现弹出机制的脚本文件都包含进您的页面。这可以通过把下面两条语句包含到您的文档头部来实现:
<script src="utility.js"></script>
<script src="popup.js"></script>
- 确保有可以被弹出的
DIV。这些 DIV 必须被绝对定位,并且在开始是应该被隐藏。例如: <DIV onclick="event.cancelBubble = true;"
class=popup id=nameOfPopup>
Popup text goes here.<br>
<a href="#" onclick="hideCurrentPopup();
return false;">
You can include a link like this to
close the DIV if you like
</a>
</DIV>确保在DIV中包含onclick="event.cancelBubble = true;"这行代码。它告诉JavaScript在您点击DIV时不要把点击事件传递给页面中的其它对象。如果省略这行代码,则弹出层在被点击时就会关闭(对于大多数浏览器来说),因为我们已经设定了一个关闭弹出层的事件处理函数。把这行代码包含到页面中的基本目的是告诉浏览器“当人们点击除了弹出层自身(或者打开弹出层的原始连接)之外的任何地方时,关闭弹出层”。
- 如果要改变弹出层的外观,请编辑风格表单中的
.popup的风格规则。
- 在每一个应该触发弹出层的地方调用
showPopup函数,把nameOfPopup改为您希望显示的弹出层名称(但是把它放在单引号中): <a href="http://url.for.older.browsers"
onclick="return !showPopup
(nameOfPopup, event);">
clickme</a>如果您希望当鼠标在连接上滚动时出发弹出层,则只要修改触发事件就可以了: <a href="http://url.for.older.browsers"
onmouseover="showPopup(nameOfPopup, event);"
onmouseout="hideCurrentPopup();">clickme
</a>
- (可选)修改
popup.js文件中的两个变量,这两个变量用来控制弹出层出现的位置,该位置是相对于当前光标位置的: var xOffset = 30;
var yOffset = -5;
下面对相关的函数逐一进行说明:
changeObjectVisibility(objectId, newVisibility):调用这个函数时,objectId 应该是您希望显示或者隐藏的对象名称。函数希望这个参数是文本类型的,因此您需要把它包含在引号中。newVisibility 参数的值或者是 visible(可视)或者是 hidden(隐藏)。再次说明一下,这个值是一个字符串类型的,因此需要把它包含在引号中。下面这个实例把一个名为 myBigLayer: 的对象隐藏起来: changeObjectVisibility(myBigLayer, hidden)
moveObject(objectId, newXCoordinate, newYCoordinate):同样的,objectId 应该是您希望移动的对象名称。它是一个文本类型的参数,因此应该放在引号里面。newXCoordinate 和 newYCoordinate a 是数字类型的(因此没有引号),描述您希望把对象移动到什么地方。因此,如果要把 myBigLayer 对象移动到距离窗口左边 300 p 像素,距离窗口上边10像素的位置,书写如下代码就可以了: moveObject(myBigLayer, 300, 10)
getStyleObject(objectId):上述两个函数都使用这个函数来把对象的名称转变为属于该对象的风格对象的引用。对于 Netscape 4+ 和 IE 4+ 两款浏览器来说,这个函数都能返回正确的引用,因此您不必担心浏览器在工作方式上的差别。(请注意:有一种情况在 Netscape 4 上处理不了,那就是聚集层,因此您必须避免把层放到其它层上)。
在您需要改变对象的 CSS 属性的任何时候,您都可以脱离这里描述的上下文来使用这个函数。例如,假定我们要给 myBigLayer 设定一个绿的背景色,可以书写如下代码:
ar myBigLayerStyleObject =
getStyleObject(myBigLayer);
myBigLayerStyleObject.backgroundColor =
green;
Or, for shorthand, you could just do this:
getStyleObject(myBigLayer).backgroundColor
= green;
查看实例:
下载脚本