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

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

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

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

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

1. HTML包含两部分：缩略图展示和大图展示

   缩略图HTML：

    
   
    
    
    
    
    
     
    
    
    
    
    
    
    
    
    ... 
    
    
    
    
    
    
   
   

   大图部分HTML也应用了滚动效果，与上面的缩略图在html结构上差不多，不同的是大图多了tooltip提示部分
   大图部分HTML：

    
    
    
     
    
    
    
     
    
    
    
     
    
    
    
     
     
    
     
    
    
    
   A Blue Flower
    
    
    
   Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.
    
    
    
    
    Wed Jun 10, 2:35 PM © John Doe 
    
    
    
    
    
    
    
     
    
    
    
    
    
     
    
    
    
    
   

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的介绍肯定有不周全，甚至谬误之处。并且本人英文水平也很是一般，对于某些词汇的把握可能不甚准确，如有错误或不明之处，望大家一定不吝指出。