接上篇,继续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'} //设置消失方向
});
});
本系列文章导航
jQuery Tools——不可错过的jQuery UI库(一)
jQuery Tools——不可错过的jQuery UI库(二)
jQuery Tools——不可错过的jQuery UI库(三)
jQuery Tools——不可错过的jQuery UI库(四)
jQuery Tools——不可错过的jQuery UI库(五)
jQuery Tools——不可错过的jQuery UI库(六)
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容