您的位置:知识库 » Web前端

jQuery Tools——不可错过的jQuery UI库(四)

作者: IIduce  来源: css9  发布时间: 2009-12-23 21:31  阅读: 13215 次  推荐: 2   原文链接   [收藏]  

  接上篇,继续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'} //设置消失方向
});
});

 

2
0
 
标签:jQuery

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻