jQuery Tools——不可错过的jQuery UI库（二）
在上篇对jQuery Tools做了总体的介绍，从本篇起开始介绍jQuery Tools的各个工具组件。
在进入正题前，还是想啰嗦一些东西，也许对jQuery Tools的理解会有所帮助。
- jQueryTools的功能侧重于信息展示和视觉效果，从网页常用的功能点上改善用户体验和可阅读性。这一点与其它一些JavascriptUI库不同，它们可能会侧重于一些桌面应用程序效果，诸如拖拽、滑动、排序等，这在富应用程序（RIA）中的应用可能会更多些。而jQueryTools可用于广泛的网站设计中；
- jQueryTools并不是一个框架性的东西，不具有什么学习难度，在掌握一些使用规则后，在页面中引用了它的脚本文件就可以立即使用了。虽然它是基于jQuery的，但是并不意味着你需要掌握jQuery才能使用它。当然如果你能了解jQuery的诸如选择器的简单使用，更有助于掌握jQuery Tools；
- jQuery Tools的使用严格遵循了javascript代码不与css定义混合的原则。它在使用时仅仅是通过预定义的class来控制html，CSS样式定义完全由你来控制。
- 类似于google提供了jquery的CDN服务，jQuery Tools也提供了它的CDN免费服务至2010年底，你可以使用以下方式引用它：
可惜的是该CDN目前没有在亚洲设立服务器，官方说要到2009年秋，所以暂时就不建议用了。<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
不再啰嗦，言归正传看使用：
示例一：选项卡效果在Web开发时经常会用到，下面先来看最简单的实现
上面是最终要实现的效果。看一下代码：
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’}，更改默认的点击事件为鼠标划过事件，这里你可以改为自定义事件。
示例三：创建折叠效果（手风琴效果），看效果先：
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为横向滑动 });
说明：
Tabs选项卡总结：
- 从上面几个示例的用法可以看到，调用Tabs效果的关键在于HTML的预定义。我们应当为选项卡区域设定一个id或者为每一个选项卡设定相同class，然后为每一个pane区域设定class。在调用tabs方法的时候，关键在于传入上面定义的这两个对象集合。了解到这一点，其余都就可以自由发挥了。
- Tabs工具本身不具备任何CSS，CSS需要完全由你来控制，希望不会因为这种自由而难住你。
- 在官方示例中还有不少是上面没有提到的，例如tabs中通过ajax填充pane、通过选项卡制作导航器等，这里去查看更多
通过Tabs的学习，想必大家对jquery tools有了进一步的了解。有什么要说的么，可以再下面留言讨论。
在后面的文章中会继续探讨其它工具的使用示例，欲知后事如何，请坐好沙发，搬好小马扎，且听下回分解。