司法考试证书查询:jQuery Tools——不可错过的jQuery UI库（四）

来源：百度文库编辑：偶看新闻时间：2024/04/28 14:41:26

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

　　接上篇，继续jQuery Tools的讲解。本篇讲解jQuery Tools中十分有用的一个组件——遮罩效果（overlay）。遮罩效果的实现包含两个部分：触发遮罩效果的元素（触发器），及事件触发后，页面上方弹出的遮罩层元素。

　　下面看一个最简单的例子（点击关闭按钮或触发按钮或esc键，关闭overlay）：

　　HTML Code:

 

 
 
 
 
  
 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.

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

关于表示不可错过,不能错过的成语 06年不可错过的电影是? 美女不可错过哈日族不可错过的重要论坛有哪些? 五一不可错过的国内18处风景走过、路过！不可错过啊！高IQ者不可错过！！宁肯做过，不可错过。为什么35J以下的法师不可以用? 五天的海南游有什么不可错过的地方和好吃的地吗我的火车票错过了当日的车次可以不可以做下一班的火车？再送大家一个迷宫的C代码吧。学C的不可错过。我要去上海旅游`有没有什么不可错过的地方有哪些网站咨讯多,内容丰富,知识面多,是不可错过的呢? 请问武汉和长沙特色旅游？比如文化古迹，特色食品，或者不可错过的其他？请介绍一下无锡或附近有什么不可错过的地方走过，路过，千万不要错过，重大奖的机会，不可失！！！！！！！！ <<非你不可>>里j结局是怎样的? 关于《完全娱乐》跟《J—STAR》的所有网站~？！中国真的有J—14战斗机吗？错过的美丽错过的爱就难再回吗？错过的爱就难再回吗？关于“错过”的文章