jQuery Tools——不可错过的jQuery UI库（三）

本篇讲解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'}    //设置消失方向
    }); 
});