2009-6
21
接上篇，继续jQuery Tools的讲解。本篇讲解jQuery Tools中十分有用的一个组件——遮罩效果（overlay）。
遮罩效果的实现包含两个部分：触发遮罩效果的元素（触发器），及事件触发后，页面上方弹出的遮罩层元素。
下面看一个最简单的例子（点击关闭按钮或触发按钮或esc键，关闭overlay）：
Here is my overlay
Class aptent taciti sociosqu adlitora torquent per conubia nostra, per inceptos himenaeos. Donec lorem ligula, elementum vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
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'} //设置消失方向 }); });
Jquery Tools系列文章导航：
- Jquery Tools——不可错过的Jquery UI库（一）：简介
- Jquery Tools——不可错过的Jquery UI库（二）：Tabs选项卡
- Jquery Tools——不可错过的Jquery UI库（三）：提示工具条
- Jquery Tools——不可错过的Jquery UI库（四）：遮罩效果
- Jquery Tools——不可错过的Jquery UI库（五）：滚动效果
- Jquery Tools——不可错过的Jquery UI库（六）：综合示例
延伸阅读:
- jQuery Tools——不可错过的jQuery UI库（六）
- Jquery Tools——不可错过的Jquery UI库（一）
- jQuery Tools——不可错过的jQuery UI库（五）
- Jquery Tools——不可错过的Jquery UI库（三）
- Jquery Tools——不可错过的Jquery UI库（二）
- 实现页面不同位置间平滑滚动的两种解决方案
- FullSize：一个新的IMG标签属性（附带JQuery实现）
- 强大的Jquery图表绘制插件 —— jqPlot
版权声明：
本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议；商业网站或媒体未授权不得复制本站内容。
友情提示：
如对本文有任何疑问，或在示例的使用中遇到问题，或有好的建议，欢迎在下面留言共同学习，有问必答。
难道就是传说中的 lightbox效果？
对了，IE7里面遮罩图片上的关闭按钮不管用
IE 7 里面关闭按钮确实失效，偶抽空看一下。
lightbox效果并不稀罕，以前一篇文章也提到过http://css9.net/javascript-lightweight-modal-window/
Jquery Tools里面的overlay效果有几个优势：1.它不是一个单独的（非）模态框解决方案，而是一套Web前端（Jquery Tools）解决方案中的一种，这样就没必要专门为这个小功能加入一个js；2.它这个使用灵活，api丰富；3.它这个样式完全由自己控制。
[...] 接上篇，今天讲解jQuery Tools中另一工具组件——滚动效果（Scrollable）。滚动效果在网页设计中也是经常用到的，例如滚动新闻、幻灯片展示、相册……（发挥想象力吧，用到选项卡的内容切换中是不是会很酷）。 [...]
[...] « Jquery Tools——不可错过的Jquery UI库（二） Jquery Tools——不可错过的Jquery UI库（四） » 2009-6 20 Jquery Tools——不可错过的Jquery UI库（三） 发表于: Jquery, [...]
test
/* 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;
}
Open overlay
Open overlay
Here is my overlay
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.
Here is my overlay
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.
$(function() {
//为页面中所有拥有rel属性的button元素绑定overlay效果
$(”button[rel]“).overlay();
});
我按照你翻译的步骤出不来效果，是不是没有绑定事件，帮我看看
晕，代码都被过滤了
[...] Jquery Tools——不可错过的Jquery UI库（四）：遮罩效果 [...]
[...] Jquery Tools——不可错过的Jquery UI库（四）：遮罩效果 [...]
I totally love this article. I think you could write some other things to make your blog more complete.For example： ed hardy.vibram five fingers.p90x workout schedule. mbt shoes. hardy caps. vibram fivefingers kso trek. mbt chapa dawn shoes.
ghd straightener
ugg ugg boots
replica louis vuitton handbags
edhardyI thought that many people can like.