jquerytools之overlay

所谓overlay，就是浮层。就是那种在当前页面弹出的一个新的层。它可以作为对话框的容器、图片展示容器、播放器容器等等。

废话少说，直接切入正题。

使用：

// select one or more elements to be overlay triggers
$(".my_overlay_trigger").overlay({

	// one configuration property
	color: '#ccc',

	// another property
	top: 50

	// ... the rest of the configuration properties
});

上面这段代码，在拥有.my_overlay_trigger的元素上绑定了overlay特性，使它们成为了overlay的触发器。

触发器是有着落了，可是还没有用于显示的内容啊，即overlay的载体本身还没有的。默认，jquerytools会找触发器元素中是否指定了rel属性（值为jquery选择子，指向另一个元素），如果指定了，就自动将那个元素做为overlay的容器。而如果没有rel属性的话，就得在上面的代码中指定target属性了，需给target赋予一个jquery对象。

[b]overlay属性[/b]

[table]
|属性名称|属性值|解释|
|close|jquery对象值。可省|指定用于关闭的元素，给自动给那个元素绑定一个鼠标单击事件，点击之后，关闭此overlay。当此属性省略时，会自动在overlay容器里面找有.class类的元素。|
|closeOnClick|true or false，默认为true|指定当点击overlay的外部区域时，是否自动关闭这个overlay，默认是关闭。设置为false的话，就定义了一个modal overlay|
|closeOnEsc|true or false，默认为true|指定当按了键盘上的esc键时，是否关闭当前这个overlay。如果设置为false，按esc将不起作用。|
|effect|特效名，目前可用的有：'default', 'apple'|定义overlay弹出时的动画效果|
|fixed|true or false，默认为true|指定overlay是不是相对于浏览器可见容器固定，默认为固定。设置为false的话，当页面可以向下滚动时，overlay的显示位置将不再固定|
|mask|遮罩参数，详见expose说明文档|指定是否带一个遮罩。如果不指定此属性，就没有遮罩。遮罩能带来比较好的视觉效果|
|left|'center' or 具体数值，单位是px|指定overlay弹出后，放的位置|
|load|true or false，默认为false|指定，当在触发子上进行绑定overlay之后，是否立即执行显示效果，即把overlay弹出来|
|oneInstance|true or false，默认为true|指定当前页面是否只允许有一个overlay出现，jquerytools overlay本身是支持多个overlay在同一个页面出现的情况的|
|speed|'norma', 'slow', 'fast' 或 一个数值（以毫秒为单位）|指定overlay弹出的速度，指定为0后，就立即弹出|
|target|一个jquery对象|指定承载这个overlay的容器，一般是一个<div>|
|top|数值、或百分比字符串 'n%'，或'center'|用于指定当overlay弹出时，在浏览器可见区域内的位置|
[/table]

[b]事件回调函数[/b]

[table]
|回调函数名称|调用时机|
|onBeforeLoad|overlay显示之前调用。不过这个时候，overlay本身的位置已经确定下来了|
|onLoad|当overlay已经完全被显示出来之后调用|
|onBeforeClose|在此overlay被关闭之前调用|
|onClose|在此overlay被关闭之后调用|
[/table]
每个回调函数都会收到一个jQuery.Event对象作为第一个参数传入。

[b]对象编程API[/b]
被绑定的trigger，将会拥有一套API可以使用。这个API可以通过

var api = $(".my_overlay_trigger").data("overlay");

获得。

对于overlay来讲，它可以赋予触发器如下API。

[table]
|方法名称|返回值|功能|
|close()|此overlay数据对象|关闭本overlay|
|getClosers()|jquery对象|获得本overlay中的close对象|
|getConf()|js对象|获得本overlay的配置属性|
|getOverlay()|jquery对象|得到overlay容器对象|
|getTrigger()|jquery对象|得到此overlay的触发器对象，一般就是自己了|
|isOpened()|true or false|检测当前overlay是打开的，还是关闭的|
|load()|此overlay数据对象|打开此overlay|
[/table]

如上，即是overlay的基本的参考内容了。后面，会补上一些经验性质的东西。并且，本身这上面还有几个疑点还没澄清。API中，返回“overlay数据对象”这到底是什么东东？需要通过测试来弄清楚。