在本系列文章的前五篇介绍了jQuery Tools中的工具组件使用,阅读过的朋友想必已经对它有所了解。今天这篇是jQueryTools系列文章的最后一篇,来介绍一个综合了jQueryTools中的滚动效果(Scrollable)、遮罩效果(Overlay)、提示工具条(Tooltip)和突出效果(Expose)的综合使用实例,希望能对jQuery Tools的灵活使用有更好的认识。
这个示例应该算是一个图片展示的完整示例,首先看效果:
在上面示例中,首先看到的是缩略图的展示,在缩略图展示上应用了滚动效果,可通过左右导航或键盘左右键滚动缩略图。点击缩略图图片,应用遮罩效果弹出图片的大图,把鼠标放在大图上,应用工具条提示效果展示图片信息。在大图展现时也应用了滚动效果,可通过左右导航或键盘左右键切换图片。
下面我们来看是如何融合jQuery Tools中的工具组件,实现上面实例的:
- HTML包含两部分:缩略图展示和大图展示
缩略图HTML:
<!-- 为滚动效果的导航定义上一页按钮,注意class固定为prevPage -->
<!--导航按钮注意与缩略图滚动区域同级-->
<div class="navi prevPage"></div>
<!-- 定义缩略图滚动区域根节点 -->
<div id="thumbnails">
<!-- 为所有缩略图定义根节点,注意class为items -->
<div class="items">
<div><img src="img/thumb/thumb1.jpg" /></div>
<div><img src="img/thumb/thumb2.jpg" /></div>
<div><img src="img/thumb/thumb3.jpg" /></div>
...
</div>
</div>
<!-- 为滚动效果的导航定义下一页按钮,注意class固定为nextPage -->
<div class="navi nextPage"></div>
<br clear="all" />大图部分HTML也应用了滚动效果,与上面的缩略图在html结构上差不多,不同的是大图多了tooltip提示部分
大图部分HTML:<!-- 为大图overlay效果定义根节点-->
<div id="box">
<!-- 为大图滚动效果区域定义根节点-->
<div id="images">
<!-- 为所有大图定义滚动根节点,class为items -->
<div class="items">
<!-- 定义单张大图 -->
<div>
<!-- 大图图片 -->
<img src="img/image1.jpg" />
<!-- 大图提示区域 -->
<div class="info">
<h3>A Blue Flower</h3>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.</p>
<p class="copy">
Wed Jun 10, 2:35 PM <strong>© John Doe</strong>
</p>
</div>
</div>
<!-- ... 其余大图定义,与上面那个相同 -->
</div>
</div>
<!-- 滚动的导航按钮 -->
<div class="navi prevPage"></div>
<div class="navi nextPage"></div>
</div> - CSS部分:css部分是jquery tools中不涉及的,它允许你发挥想象,灵活定义。但是,在本示例中,css部分可能是编码最困难的。这里是本示例的样式表,供学习参考。
- Javascript部分:这一部分最能体会jquery Tools的灵活使用。
首先设定缩略图的滚动效果:
// 设定缩略图滚动
$("#thumbnails").scrollable({size: 5, clickable: false}).find("img").each(function(index) {
// 为每个缩略图设定overlay效果
$(this).overlay({
target: '#box',
expose: {maskId: 'mask'},
/*
当显示大图区域时,0秒内滚动到当前图片
虽然是0秒,但是仍有一闪而过的问题,这里是个缺陷
*/
onLoad: function() {
//images在下面有定义,是获取到得所有大图对象
images.seekTo(index, 0);
}
});
});然后设定大图的滚动效果及提示效果:
// 设定大图滚动, 并返回了所有大图的jquery object
var images = $("#images").scrollable({size: 1, api:true});
//设定每个图片的提示效果
$("#images img").tooltip({
effect: 'toggle',
position: ['bottom', 'center'],
offset: [-85, -30],
opacity: 0.8,
effect: 'fade'
});上面的代码,如果有不明白的,可以翻看本系列文章的前几篇,这里就不多说了。有问题也可以下面留言讨论。
- 细心的朋友会发现示例中的缩略图使用了倒影特效,这是通过一款jquery插件实现的:reflection,下面这句为所有缩略图实现了倒影特效:
$("#thumbnails img").reflect({height: 0.5, opacity: 0.6});
jQuery Tools系列文章到这里就要结束了,相信阅读过文章的朋友已经对这款jQuery UI库有所了解,希望能对大家的学习工作有所帮助,也希望大家能在不断应用jQuery Tools的过程中,发挥创造力,体会它的灵活之处,正如官方主页提到的:
The old UNIX design philosophy “tools, not policy” is very important in web design.
Unix设计理念中的“工具,并非准则”,在web设计中是非常重要的。
特别需要声明的是,本人在对jquery没有系统学习的情况下,就对这样一款jquery ui库做了使用介绍,对于jquery tools的介绍肯定有不周全,甚至谬误之处。并且本人英文水平也很是一般,对于某些词汇的把握可能不甚准确,如有错误或不明之处,望大家一定不吝指出。
本系列文章导航
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.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容