overlib简明教程

觉得网上overlib的资料比较少，个人觉得对于项目还是比较有用的，所以决定写一个小的教程

首先，overlib主要是用来给产生tooltips的，也叫popup，就是浮出的提示框。

使用overlib的第一件事就是引入overlib.js的文件（当然如果你用到了plugin就要引用plugin的js文件）

 

<script type="text/javascript" src="overlib.js"></script> OK，现在你就可以开始你的overlib之旅。当然，使用过它的人会觉得有些不对，似乎少了什么准备工作，是的，在4.10以前的版本都要加入这么一句

 

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

但现在的版本不用了，现在我用的是最新的version4.21，当然如果你考虑div的层次性问题，你可以加上。

先来个demo1

 

 

<a href="javascript:void(0);"
             οnclick="return overlib(''很高兴你使用overlib.js'');" 
        οnmοuseοut="return nd();">demo1</a>

在这个a标记里，onclick中的overlib函数，就是产生提示框的根源，我只在里面简单的写了一些文字，用来显示到提示框中。而onmouseout事件对应的nd函数，是用来消失提示框的，这就好比，人是必须经历生死的。当然你可以选择不同的事件来回调这两个函数。

有人会觉得，如果overlib只能做这些，那并不是很有用。其实overlib的功能是很强大的，完全可以实现你想要的90%以上效果，也许你想象力丰富，到了那10%，那你可以完全去定制overlib。

好了，现在时候揭晓谜题了。那就是commands（命令），你可以给overlib的函数（overlib，nd）添加任意数量的参数，如果一个参数是一个命令，而这个命令本身又需要参数，那么他会从他自己开始往右找他要的数目的参数作为它的参数。

说不如做，看看demo2吧

 

 

<a href="javascript:void(0);"
             οnclick="return overlib(''使用overlib的命令'', CAPTION, ''这是Caption命令，就是生成头部'');" 
        οnmοuseοut="return nd();">demo2</a>

哈哈，是不是觉得overlib很好玩呢？如果不是，可能你还没有理解它，请再看一遍。现在我要说的就是，overlib里的所有命令都必须要大写，这一点很重要。

好了，再来一个复杂的，其实就是命令的叠加

 

<a href="javascript:void(0);" οnmοuseοver="return overlib(''使用overlib的命令'', STICKY, CENTER, WIDTH, 300, HEIGHT, 300, CAPTION, ''这是Caption命令，就是生成头部'', FGBACKGROUND, ''你的图片地址'', FGCOLOR, ''#FFFFCC'');" οnmοuseοut="return nd();">demo3</a>

 

好玩吧，我喜欢那个人物，和牛逼。现在这里有你想要的overlib的所有命令集看着需要的，你就自己定制吧，加命令就是。

现在想说下plugin的问题，如果你要使用overlib的插件，不管是官方的还是非官方的，你必须要写引入overlib.js再引用插件的js文件，就像这样

 

<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_你要的插件的名字.js></script>

本人不怎么使用插件，觉得overlib我要的功能都有了，我的原则就是不要让一个东西帮你做太多的事，就像有人一用struts就要全盘都用，我就用它的跳转和lazyFormBean，呵呵。

最后，关于overlib有人说，如果我要字体变大，每个函数里都要写觉得很麻烦，那么你可以改overlib.js的文件，里面注释什么完善，好的代码标准，值得学习。比如你想改字体，那么找到

 

if (typeof ol_textfont == ''undefined'')
...{ var ol_textfont="Verdana,Arial,Helvetica";}

把ol_textfont里面赋值你想要的字体就OK了，其实一切都是那么简单，特别你熟悉了命令后，这些和命令很相似不是吗？

OK，我希望你大概明白你自己在做什么了，希望这个教程对你的WEB UI有些帮助。

 

文章出处：http://www.diybl.com/course/1_web/webjs/20071128/88646.html