jQuery Tools——不可错过的jQuery UI库（四）
接上篇，继续jQuery Tools的讲解。本篇讲解jQuery Tools中十分有用的一个组件——遮罩效果（overlay）。遮罩效果的实现包含两个部分：触发遮罩效果的元素（触发器），及事件触发后，页面上方弹出的遮罩层元素。
下面看一个最简单的例子（点击关闭按钮或触发按钮或esc键，关闭overlay）：
HTML Code:
<!-- 定义一个按钮作为触发器. 这里通过rel属性，指定遮罩层元素的id -->
<button type="button" rel="#overlay">Open overlay</button>
<!-- 遮罩元素，你可以通过样式表定义样式 -->
<!-- 遮罩元素可以使任何html元素，一般我们用div，注意id的设定 -->
<div class="overlay" id="overlay">
<!--这里是遮罩层里面要放的东西 -->
<h2 style="margin:10px 0">Here is my overlay</h2>
<p style="float: left; margin:0px 20px 0 0;">
<img src="http://static.flowplayer.org/img/title/eye192.png" />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
Javascript Code：
$(function() {
//为页面中所有拥有rel属性的button元素绑定overlay效果
$("button[rel]").overlay();
});
CSS是可以由你自由定义的，上面示例的效果用的是官方提供的，如下供参考：
/* overlay元素*/
div.overlay {
/* overlay背景图 */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);
/* overlay的最终尺寸，可以由此改变overlay大小 */
width:600px;
height:470px;
/* overlay默认隐藏 */
display:none;
/* 设定内嵌元素padding，获得好的视觉效果 */
padding:55px;
}
/* 关闭按钮样式， 放置在右上角 */
div.overlay div.close {
background-image:url(http://flowplayer.org/tools/img/overlay/close.png);
position:absolute;
right:5px;
top:5px;
cursor:pointer;
height:35px;
width:35px;
}
上面的示例均使用了默认配置，实际上overlay组件有许多参数可配置，所有参数可以参考这里，在下面这个例子中，配置了一些参数：
Javascript Code：
$(function() {
$("button.overlaybutton").overlay({
// 设置参数
expose: { //启用expose效果
color: '#BAD0DB', //expose颜色
opacity: 0.7, //expose透明度
closeSpeed: 1000 //expose关闭速度
},
finish: {top: 'center'} //设置消失方向
});
});
