Javascript公共脚本库系列(一): 弹出层脚本

核心提示： 接下来我们创建HTML页面演示如何使用此脚本.此实例是一个菜单,当点击时显示子菜单图层.1.引用脚本文件 将上面的代码保存在ScriptHelper.js文件中.在页面中添加引用:<script src="http://files.cnblogs.com/zhangziqi

接下来我们创建HTML页面演示如何使用此脚本.此实例是一个菜单,当点击时显示子菜单图层.

1.引用脚本文件

将上面的代码保存在ScriptHelper.js文件中.在页面中添加引用:

<script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript" defer="defer"></script>2.编写子菜单

先编写两个子菜单图层.

　　<!-- Sub Menu 1 -->
　　<div id="subMenu1" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; margin:0px; padding:5px; height:100px;">
　　　　<div>1-1</div>
　　　　<div>1-2</div>
　　</div>
　　<!-- Sub Menu 2 -->
　　<div id="subMenu2" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; padding:5px;" >
　　　　<div>2-1</div>
　　　　<div>2-2</div>
　　</div>


对于子菜单, 最重要的就是要设置两个样式:position和display.

position:absolute 让此图层能够精确定位显示.从而控制他的显示位置.

display:none 让图层在加载时不显示.

3.编写主菜单

主菜单代码如下:

　　<!-- Main Menu -->
　　<div >
　　　　<a class="cursorHand" onclick="ScriptHelper.showDivCommon(this,'subMenu1', 20, 0, 100)">Menu1</a>
　　　　<a class="cursorHand" onclick="ScriptHelper.showDivCommon(this,'subMenu2', 20, 0)">Menu2</a>
　　　　<a class="cursorHand" href="http://p5s8.ddvip.com/index.php#">NoSubMenu</a>
　　</div>