在上篇对jQuery Tools做了总体的介绍，从本篇起开始介绍jQuery Tools的各个工具组件。

在进入正题前，还是想啰嗦一些东西，也许对jQuery Tools的理解会有所帮助。

1. jQuery Tools的功能侧重于信息展示和视觉效果，从网页常用的功能点上改善用户体验和可阅读性。这一点与其它一些Javascript UI库不同，它们可能会侧重于一些桌面应用程序效果，诸如拖拽、滑动、排序等，这在富应用程序（RIA）中的应用可能会更多些。而jQuery Tools可用于广泛的网站设计中；
2. jQuery Tools并不是一个框架性的东西，不具有什么学习难度，在掌握一些使用规则后，在页面中引用了它的脚本文件就可以立即使用了。虽然它是基于jQuery的，但是并不意味着你需要掌握jQuery才能使用它。当然如果你能了解jQuery的诸如选择器的简单使用，更有助于掌握jQuery Tools；
3. jQuery Tools的使用严格遵循了javascript代码不与css定义混合的原则。它在使用时仅仅是通过预定义的class来控制html，CSS样式定义完全由你来控制。
4. 类似于google提供了jquery的CDN服务，jQuery Tools也提供了它的CDN免费服务至2010年底，你可以使用以下方式引用它：

   <script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>

   可惜的是该CDN目前没有在亚洲设立服务器，官方说要到2009年秋，所以暂时就不建议用了。

不再啰嗦，言归正传看使用：

• 选项卡应用(Tabs)

  示例一：选项卡效果在Web开发时经常会用到，下面先来看最简单的实现
  

  • 选项卡1
  • 选项卡2
  • 选项卡3
  第一个选项卡内容，跳转至选项卡2

  第二个选项卡内容，跳转至选项卡3

  第三个选项卡内容，跳转至选项卡1

  上面是最终要实现的效果。看一下代码：

  HTML:

  <!-- 定义选项卡按钮，注意最外层的class定义为tabs --> 
  <ul class="tabs"> 
      <li><a href="#first">选项卡1</a></li> 
      <li><a href="#second">选项卡2</a></li> 
      <li><a href="#third">选项卡3</a></li> 
  </ul> 
  <!-- 定义选项卡切换的每个区域，注意最外层的class定义为panes --> 
  <div class="panes"> 
      <div>第一个选项卡内容，<a href="#second">跳转至选项卡2</a></div> 
      <div>第二个选项卡内容，<a href="#third">跳转至选项卡3</a></div> 
      <div>第三个选项卡内容，<a href="#first">跳转至选项卡1</a></div> 
  </div>

  Javascript：

  $(function() { 
      // 将ul.tabs区域设定为选项卡，用来控制div.panes区域中最近一层的各div区域
     // 注意tabs和panes与html中class的对应关系
      $("ul.tabs").tabs("div.panes > div",{history: true}); 
  });

  说明：

  • CSS代码，也就是整个样式完全是由你来控制的。这里是上面选项卡用到的css，供你参考。使用css控制样式时，需注意的一点是当前选项卡的class为“current”。
  • 可设定选项卡锚点，通过链接在选项卡中切换
  • tabs中的参数{history: true}，使得选项卡与浏览器历史的前进后退关联在一起。不用的话可以不要这个参数。

  示例二：通过鼠标滑过事件切换选项卡，看效果先：

  
  .. 产品介绍一 ..

  .. 产品介绍二 ..

  .. 产品介绍三 ..

  HTML:

  <!--定义选项卡区域，用id为products的div包起来-->
  <div id="products">
  <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
  <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
  <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
  </div>  
  <!--定义pane区域，为每个区域定义相同的class：description-->
  <div class="description" id="free"><div class="arrow"></div> .. 产品介绍一 .. </div> 
  <div class="description" id="commercial"><div class="arrow"></div> .. 产品介绍二 .. </div> 
  <div class="description" id="multidomain"><div class="arrow"/></div> .. 产品介绍三 .. </div>

  Javascript:

  $("#products").tabs("div.description", {event:'mouseover'});

  说明：

  • CSS代码，也就是整个样式完全是由你来控制的。这里是上面选项卡用到的css，供你参考。
  • tabs中的参数{event:’mouseover’}，更改默认的点击事件为鼠标划过事件，这里你可以改为自定义事件。

  示例三：创建折叠效果（手风琴效果），看效果先：

  First pane

  … 内容一 …

  Second pane

  …内容二 …

  Third pane

  … 内容三 …

  

  .. pane content1 ..

  内容一

  

  .. pane content2 ..

  内容二

  

  .. pane content3 ..

  内容三

  HTML

  <div id="accordion"> 
      <h2>First pane</h2> 
      <div class="pane">... pane content1 ...</div> 
   
      <h2>Second pane</h2> 
      <div class="pane">... pane content2 ...</div> 
   
      <h2>Third pane</h2> 
      <div class="pane">... pane content3 ...</div> 
  </div>

  Javascript

  //上面第一个效果的
  $("#accordion").tabs("#accordion div.pane", { 
      tabs: 'h2',     //确定哪些区域为选项卡
      effect: 'slide'     //展开效果，slide为纵向滑动
  });
   
  //上面第二个效果的
  $("#accordion").tabs("#accordion div", { 
      tabs: 'img',    //确定哪些区域为选项卡
      effect: 'horizontal'  //展开效果，horizontal为横向滑动
  });

  说明：

  • 这里是上面第一个效果用到的css，这里是第二个的，供你参考。
  • 与前两个示例的声明方式不同，上面两个效果在tabs方法的第二个参数的tabs属性中确定哪些区域为选项卡。

Tabs选项卡总结：

1. 从上面几个示例的用法可以看到，调用Tabs效果的关键在于HTML的预定义。我们应当为选项卡区域设定一个id或者为每一个选项卡设定相同class，然后为每一个pane区域设定class。在调用tabs方法的时候，关键在于传入上面定义的这两个对象集合。了解到这一点，其余都就可以自由发挥了。
2. Tabs工具本身不具备任何CSS，CSS需要完全由你来控制，希望不会因为这种自由而难住你。
3. 在官方示例中还有不少是上面没有提到的，例如tabs中通过ajax填充pane、通过选项卡制作导航器等，这里去查看更多

通过Tabs的学习，想必大家对jquery tools有了进一步的了解。有什么要说的么，可以再下面留言讨论。
在后面的文章中会继续探讨其它工具的使用示例，欲知后事如何，请坐好沙发，搬好小马扎，且听下回分解。

Jquery Tools系列文章导航：

1. Jquery Tools——不可错过的Jquery UI库（一）：简介
2. Jquery Tools——不可错过的Jquery UI库（二）：Tabs选项卡
3. Jquery Tools——不可错过的Jquery UI库（三）：提示工具条
4. Jquery Tools——不可错过的Jquery UI库（四）：遮罩效果
5. Jquery Tools——不可错过的Jquery UI库（五）：滚动效果
6. Jquery Tools——不可错过的Jquery UI库（六）：综合示例

延伸阅读:

1. Jquery Tools——不可错过的Jquery UI库（一）
2. Jquery Tools——不可错过的Jquery UI库（三）
3. jQuery Tools——不可错过的jQuery UI库（六）
4. jQuery Tools——不可错过的jQuery UI库（五）
5. Jquery Tools——不可错过的Jquery UI库（四）
6. jQuery 1.4正式发布：一起来看有哪些新变化（下篇）
7. 实现文字高亮功能的两种解决方案（Javascript/Jquery）
8. 强大的Jquery图表绘制插件 —— jqPlot

---