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

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