所谓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数据对象”这到底是什么东东?需要通过测试来弄清楚。