Jquery Tools的使用说明文档

转自： http://hi.baidu.com/%E9%E4%C8%F4%CB%AE%BA%AE/blog/item/a7fd596110c56dd1e6113a24.html

Jquery Tools是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools，网站前端开发无疑会变得更加高效。值得注意的是，Jquery Tools的gzip压缩版本仅有5.8k，如此轻量级而且功能实用的UI组件绝对值得我们关注。

下面是Jquery UI包含的工具列表：

1. 选项卡功能(Tabs)
2. 提示工具条功能(ToolTips)
3. 信息滚动功能(Scrollable)
4. 遮罩效果(overlay)
5. 突出效果(expose)
6. Flash嵌入

在进入正题前，还是想啰嗦一些东西，也许对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开发时经常会用到

  具体效果请参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-2#third

  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’}，更改默认的点击事件为鼠标划过事件，这里你可以改为自定义事件。

  示例三：创建折叠效果（手风琴效果)

  具体效果请参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-2#third

  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中Tabs选项卡的用法和示例，本篇继续以示例的形式讲解Jquery Tools中的另两个组件tooltips（提示工具条）和expose（突出效果）。

• Tooltips（提示工具条）

  Tooltips（提示工具条），就是当把鼠标放在网页某个元素上时，显示某个提示信息，用以解释或提示当前操作。它是改善用户体验的一种方式，也是网页设计中经常用到的。

  下面首先看一个最简单的应用示例（将鼠标移动到下面图片上）：

  具体效果参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-3

  HTML代码:

  <!-- 提示工具条的触发元素 --> <div id="trigger">     将鼠标移动到我的上面可以看到提示条 </div>  <!-- 定义提示工具条的内容 --> <div class="tooltip">     <h3>The Tooltip</h3>     提示内容 </div>

  Javascript代码：

  $("#trigger").tooltip();   //为页面中id为trigger的区域添加tooltip效果

  示例说明：

  1. CSS样式完全由你控制，这里是上面提示条的css，供你参考
  2. 上面是tooltip最简单的调用方法，没有配置任何参数。默认情况下：使用$(elements).tooltip();为页 面所有elements元素绑定tooltip效果；tooltip显示的内容为elements后面紧跟的节点元素；提示条默认在触发元素的上方中央位 置，以向上滑动的效果出现；
  3. 第二条中所提到的参数都是可以配置的，用以改变tooltip效果

  下面再来看一个在表单中应用Tooltip的示例：

  具体效果参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-3

  HTML代码：

  <form id="myform">     <h3>注册表单</h3>     <!-- username -->     <label for="username">用户名</label>     <input id="username" />     <div class="tooltip">用户名至少8个字母</div><br/>     <!-- password -->     <label for="password">密码</label>     <input id="password" type="password" />     <div class="tooltip">密码强度不够</div><br />     <!-- email -->     <label for="username">邮箱</label>     <input id="email" />     <div class="tooltip">请输入合法格式Email</div><br /> </form>

  Javascript代码

  // 在id为myform元素中的所有input输入框上应用tooltip效果 $("#myform :input").tooltip({     // 设置tooltip出现的位置     position: ['center', 'right'],     // 进一步微调tooltip的位置     offset: [-2, 10],     // 设置tooltip的显示/消失效果     effect: 'toggle',     // 设置tooltip透明度     opacity: 0.7 });

  使用方法比较简单，示例说明见代码注释。

• Expose（突出效果）

  Expose（我把它翻译成突出效果，可能不准确），好像在网页设计中比较少见，但用好了也是个相当人性化的设计。

  下面先用一个最简单的例子看它是怎么回事：

  具体效果参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-3

  在我看来，Expose效果的应用是为了让用户专注于页面的某个区域，浏览信息或完成某项工作，而不受其它干扰。例如，填写某个重要表单

  HTML代码：

  <!--定义一个要用Expose效果的区域，并声明ID--> <div id="test">     鼠标点击这个区域看Expose效果点击方框以外区域或Esc键取消Expose效果 </div>

  Javascript代码

  // 在要添加效果元素的点击事件中调用expose的load方法，绑定效果。     $("#test").click(function() {         // 在点击事件中绑定expose效果，{api: true}是允许访问expose api，以在后面调用load()方法         $(this).expose({api: true}).load();     });

接 上篇，继续jQuery Tools的讲解。本篇讲解jQuery Tools中十分有用的一个组件——遮罩效果（overlay）。

遮罩效果的实现包含两个部分：触发遮罩效果的元素（触发器），及事件触发后，页面上方弹出的遮罩层元素。

下面看一个最简单的例子（点击关闭按钮或触发按钮或esc键，关闭overlay）：

具体效果参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-4

HTML Code:

<!-- 定义一个按钮作为触发器. 这里通过rel属性，指定遮罩层元素的id --> <button type="button" rel="#overlay">Open overlay</button>     <!-- 遮罩元素，你可以通过样式表定义样式 --> <!-- 遮罩元素可以使任何html元素，一般我们用div，注意id的设定 --> <div class="overlay" id="overlay">     <!--这里是遮罩层里面要放的东西 -->     <h2 style="margin:10px 0">Here is my overlay</h2>     <p style="float: left; margin:0px 20px 0 0;">         <img src="http://static.flowplayer.org/img/title/eye192.png" />     </p>     <p>          Class aptent taciti sociosqu ad litora torquent per conubia nostra,          per inceptos himenaeos. Donec lorem ligula, elementum vitae,          imperdiet a, posuere nec, ante. Quisque mattis massa id metus.     </p> </div>

Javascript Code：

$(function() {    //为页面中所有拥有rel属性的button元素绑定overlay效果     $("button[rel]").overlay(); });

CSS是可以由你自由定义的，上面示例的效果用的是官方提供的，如下供参考：

/* overlay元素*/ div.overlay {     /* overlay背景图 */     background-image:url(http://flowplayer.org/tools/img/overlay/white.png);     /* overlay的最终尺寸，可以由此改变overlay大小  */     width:600px;     height:470px;     /* overlay默认隐藏 */     display:none;     /* 设定内嵌元素padding，获得好的视觉效果  */     padding:55px; }     /* 关闭按钮样式， 放置在右上角 */ div.overlay div.close {     background-image:url(http://flowplayer.org/tools/img/overlay/close.png);     position:absolute;     right:5px;     top:5px;     cursor:pointer;     height:35px;     width:35px; }

上面的示例均使用了默认配置，实际上overlay组件有许多参数可配置，所有参数可以参考这里，在下面这个例子中，配置了一些参数：

具体效果参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-4

Javascript Code：

$(function() {     $("button.overlaybutton").overlay({         // 设置参数         expose: {    //启用expose效果             color: '#BAD0DB',       //expose颜色             opacity: 0.7,            //expose透明度             closeSpeed: 1000     //expose关闭速度         },         finish: {top: 'center'}    //设置消失方向     }); });

接上篇，今天讲解jQuery Tools中另一工具组件——滚动效果（Scrollable）。滚动效果在网页设计中也是经常用到的，例如滚动新闻、幻灯片展示、相册……（发挥想象力吧，用到选项卡的内容切换中是不是会很酷）。

开始前还是要啰嗦几句，jQuery Tools关注的是提供灵活可控的功能，而非展现。虽然官方站点也给我们提供了漂亮的示例，但是那些展现与jQuery Tools的核心功能无关。理解了jQuery Tools的功能使用，展现效果及其扩展任由发挥。例如今天要讲的示例，可能并不好看，也不能直接用到Web设计中，示例仅仅要告诉你的是工具的使用方 法，绝非准则。

先看一个最简单的例子（你可以点击方块或按键盘左右键触发滚动）：

具体效果参考：http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-5

HTML 代码：

<!-- 为scrollable区域定义一个根节点 --> <div class="scrollable">     <!-- 为所有滚动项定义根节点 -->     <div class="items">         <div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>         <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>         <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>     </div> </div>

如上面定义的，必须要给滚动区域定义一个根节点（为它定义一个class或id，方便找到它），还需要在里面为所有滚动项包裹一个根节点（必须为其 定义class=”items”）。最里面的滚动项，你就可以随便定义了，可以使div之类，也可以是图片、flash等等的任意元素。

Javascript Code:

Scrollable的css书写上还真有些地方需要注意，下面看一下：

CSS Code：

/*     滚动区域根元素样式     当滚动发生时，根元素应当是静止的 */ div.scrollable {     /* 必须有的基本设定，大小可以自己设定 */     position:relative;     overflow:hidden;     width: 660px;     height:90px; }     /*     所有滚动项的根节点，必须使用绝对定位（position:absolute）     必须赋予一个足够大的宽度，放下里面的所有元素     它本身不必设定高度，因为在滚动区域根元素中已经设定 */ div.scrollable div.items {     /* this cannot be too large */     width:20000em;     position:absolute; }     /*     滚动区域中的滚动项，在上面的横向滚动例子中至少要设定为左浮动 */ div.scrollable div.items div {     float:left; }     /* 滚动元素点击（active）时的样式 */ div.items div.active {     border:1px inset #ccc;     background-color:#fff; }

纵向滚动与很想滚动的实现差不多，演示效果可以看这里。下面看一下滚动效果初始化的不同：

<script> $(function() {     // 初始化滚动效果     $("div.scrollable").scrollable({         vertical:true,    //设定为纵向滚动         size: 3            //设定滚动显示的滚动项数目，这里注意与高度的设定配合     }); }); </script>

下面这个例子是为滚动效果加上导航，及鼠标滑轮控制滚动的效果：

具体效果参考： http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-5

上面的例子中，可以通过鼠标点击滚动项、左右导航、上方翻页导航、鼠标滑轮滚动（鼠标放在滚动区域）、键盘左右键触发滚动效果。

说明：

1. 通过鼠标滑轮控制滚动的功能，要另外引用jquery的一款插件jquery.mousewheel
2. 左右导航及翻页导航，是通过特定的html定义完成的，不是脚本参数，如下：

   <!--翻页导航，class定义为navi--> <div class="navi"></div>     <!-- 下一项导航链接，class定义为“prev”或“prevPage” --> <a class="prev"></a>     <div class="scrollable">  <div class="items">   <div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>   <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>   <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>  </div>     </div>     <!-- 下一项导航链接，class定义为“next”或“nextPage” --> <a class="next"></a>     <!--清除浮动--> <br clear="all" />

   需要注意的是上一项链接class必须声 明为prev或prevPage，下一项链接必须声明为nextPage或next。并且，上一项与下一项元素必须与滚动区域根节点在dom树的同一级 上，也就是有共同的父节点。（在上面的例子中，上一项与下一项功能失效就是因为wordpress自动为两个链接包裹了P元素，很无奈，不知道该怎么去 掉）

下面这个例子是通过配置参数，使之自动滚动。

具体效果参考： http://www.yybean.com/jquery-tools-not-to-be-missed-jquery-ui-library-5

看一下初始化时的参数配置：

// initialize scrollable       $("div.scrollable").scrollable({     // 设定滚动间隔，单位毫秒         interval: 2000,     // 是否循环，遇到最后一项时，是否从新第一项         loop: true,     // 比正常模式添加一点动画效果         speed: 600,     // 滚动开始时，让滚动项有个适当的透明效果         onBeforeSeek: function() {             this.getItems().fadeTo(300, 0.2);         },     // 滚动结束时，取消透明效果         onSeek: function() {             this.getItems().fadeTo(300, 1);         }     });