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

星天宇 2010-03-01

展开全文

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年底，你可以使用以下方式引用它：
```
    <script src="http://cdn./1.0.2/jquery.tools.min.js"></script>
    
```
可惜的是该CDN目前没有在亚洲设立服务器，官方说要到2009年秋，所以暂时就不建议用了。

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

选项卡应用(Tabs)

示例一：选项卡效果在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://image7.360doc.com/DownloadImg/2010/03/0117/2435431_2.png" alt="Free version" />
<img src="http://image7.360doc.com/DownloadImg/2010/03/0117/2435431_3.png" alt="Commercial version" />
<img src="http://image7.360doc.com/DownloadImg/2010/03/0117/2435431_4.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为横向滑动
});

说明：

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

Tabs选项卡总结：

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

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