上一篇讲解了jQuery Tools中Tabs选项卡的用法和示例，本篇继续以示例的形式讲解Jquery Tools中的另两个组件tooltips（提示工具条）和expose（突出效果）。

• Tooltips（提示工具条）

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

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

  将鼠标移动到我的上面可以看到提示条

  The Tooltip

  提示内容

  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的示例：
  

  注册表单

  用户名

  用户名至少8个字母

  
  
  密码

  密码强度不够

  
  Email

  请输入合法格式Email

  
  
  

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

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

  鼠标点击这个区域看Expose效果，再点击方框以外区域或Esc键取消Expose效果

  在我看来，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(); 
      });

  使用方法很简单，示例说明看代码注释。

  Expose下面的这个用例你可能不会陌生，就是视频播放时的关灯特效，这样的设计让人感觉相当贴心。下面看效果（点击播放按钮，开始视频并触发expose效果，按Esc键取消Expose效果）：
  
  

  上面播放器用了Flowplayer，使用方法在以前的一篇文章中讲解过。

  代码比较多，这里暂不贴了，可以在这里看到详细代码。

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插件：使用“autoresize”插件自动改变textarea大小
5. Jquery Tools——不可错过的Jquery UI库（一）
6. Jquery Tools——不可错过的Jquery UI库（二）
7. 功能强大易用的Web视频播放器——Flowplayer（使用方法及演示）
8. 推荐一款漂亮的Flash MP3 在线播放器

---