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

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

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

在本系列文章的前五篇介绍了jQuery Tools中的工具组件使用,阅读过的朋友想必已经对它有所了解。今天这篇是jQueryTools系列文章的最后一篇,来介绍一个综合了jQueryTools中的滚动效果(Scrollable)、遮罩效果(Overlay)、提示工具条(Tooltip)和突出效果(Expose)的综合使用实例,希望能对jQuery Tools的灵活使用有更好的认识。

这个示例应该算是一个图片展示的完整示例,首先看效果:

在上面示例中,首先看到的是缩略图的展示,在缩略图展示上应用了滚动效果,可通过左右导航或键盘左右键滚动缩略图。点击缩略图图片,应用遮罩效果弹出图片的大图,把鼠标放在大图上,应用工具条提示效果展示图片信息。在大图展现时也应用了滚动效果,可通过左右导航或键盘左右键切换图片。

下面我们来看是如何融合jQuery Tools中的工具组件,实现上面实例的:

  1. 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>&copy; John Doe</strong>
    </p>
    </div>
    </div>
     
    <!-- ... 其余大图定义,与上面那个相同 -->
    </div>
    </div>
     
    <!-- 滚动的导航按钮 -->
    <div class="navi prevPage"></div>
    <div class="navi nextPage"></div>
    </div>
  2. CSS部分:css部分是jquery tools中不涉及的,它允许你发挥想象,灵活定义。但是,在本示例中,css部分可能是编码最困难的。这里是本示例的样式表,供学习参考。
  3. 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'
    });

    上面的代码,如果有不明白的,可以翻看本系列文章的前几篇,这里就不多说了。有问题也可以下面留言讨论。

  4. 细心的朋友会发现示例中的缩略图使用了倒影特效,这是通过一款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的介绍肯定有不周全,甚至谬误之处。并且本人英文水平也很是一般,对于某些词汇的把握可能不甚准确,如有错误或不明之处,望大家一定不吝指出。

1
0
标签:jQuery

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻