上一篇講解了jQuery Tools中Tabs選項(xiàng)卡的用法和示例，本篇繼續(xù)以示例的形式講解Jquery Tools中的另兩個(gè)組件tooltips（提示工具條）和expose（突出效果）。

• Tooltips（提示工具條）

  Tooltips（提示工具條），就是當(dāng)把鼠標(biāo)放在網(wǎng)頁某個(gè)元素上時(shí)，顯示某個(gè)提示信息，用以解釋或提示當(dāng)前操作。它是改善用戶體驗(yàn)的一種方式，也是網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的。

  下面首先看一個(gè)最簡(jiǎn)單的應(yīng)用示例（將鼠標(biāo)移動(dòng)到下面圖片上）：

  

  The Tooltip

  提示內(nèi)容

  HTML代碼:

  <!-- 提示工具條的觸發(fā)元素 --> 
  <div id="trigger"> 
   將鼠標(biāo)移動(dòng)到我的上面可以看到提示條
  </div> 
   <!-- 定義提示工具條的內(nèi)容 --> 
  <div class="tooltip"> 
   <h3>The Tooltip</h3> 
   提示內(nèi)容
  </div>

  Javascript代碼：

  $("#trigger").tooltip(); //為頁面中id為trigger的區(qū)域添加tooltip效果

  示例說明：

  1. CSS樣式完全由你控制，這里是上面提示條的css，供你參考
  2. 上面是tooltip最簡(jiǎn)單的調(diào)用方法，沒有配置任何參數(shù)。默認(rèn)情況下：使用$(elements).tooltip();為頁面所有elements元素綁定tooltip效果；tooltip顯示的內(nèi)容為elements后面緊跟的節(jié)點(diǎn)元素；提示條默認(rèn)在觸發(fā)元素的上方中央位置，以向上滑動(dòng)的效果出現(xiàn)；
  3. 第二條中所提到的參數(shù)都是可以配置的，用以改變tooltip效果

  下面再來看一個(gè)在表單中應(yīng)用Tooltip的示例：

  注冊(cè)表單

  
  HTML代碼：

  <form id="myform"> 
   <h3>注冊(cè)表單</h3> 
   <!-- username --> 
   <label for="username">用戶名</label> 
   <input id="username" /> 
   <div class="tooltip">用戶名至少8個(gè)字母</div><br/> 
   <!-- password --> 
   <label for="password">密碼</label> 
   <input id="password" type="password" /> 
   <div class="tooltip">密碼強(qiáng)度不夠</div><br /> 
   <!-- email --> 
   <label for="username">郵箱</label> 
   <input id="email" /> 
   <div class="tooltip">請(qǐng)輸入合法格式Email</div><br /> 
  </form>

  Javascript代碼

  // 在id為myform元素中的所有input輸入框上應(yīng)用tooltip效果
  $("#myform :input").tooltip({ 
   
   // 設(shè)置tooltip出現(xiàn)的位置
   position: ['center', 'right'], 
   
   // 進(jìn)一步微調(diào)tooltip的位置
   offset: [-2, 10], 
   
   // 設(shè)置tooltip的顯示/消失效果
   effect: 'toggle', 
   
   // 設(shè)置tooltip透明度
   opacity: 0.7 
  });

  使用方法比較簡(jiǎn)單，示例說明見代碼注釋。

• Expose（突出效果）

  Expose（我把它翻譯成突出效果，可能不準(zhǔn)確），好像在網(wǎng)頁設(shè)計(jì)中比較少見，但用好了也是個(gè)相當(dāng)人性化的設(shè)計(jì)。

  下面先用一個(gè)最簡(jiǎn)單的例子看它是怎么回事：

  鼠標(biāo)點(diǎn)擊這個(gè)區(qū)域看Expose效果，再點(diǎn)擊方框以外區(qū)域或Esc鍵取消Expose效果

  在我看來，Expose效果的應(yīng)用是為了讓用戶專注于頁面的某個(gè)區(qū)域，瀏覽信息或完成某項(xiàng)工作，而不受其它干擾。例如，填寫某個(gè)重要表單，更例如觀看視頻（下面的例子介紹）。

  HTML代碼：

  <!--定義一個(gè)要用Expose效果的區(qū)域，并聲明ID-->
  <div id="test"> 
   鼠標(biāo)點(diǎn)擊這個(gè)區(qū)域看Expose效果點(diǎn)擊方框以外區(qū)域或Esc鍵取消Expose效果
  </div>

  Javascript代碼

   // 在要添加效果元素的點(diǎn)擊事件中調(diào)用expose的load方法，綁定效果。
   $("#test").click(function() { 
   // 在點(diǎn)擊事件中綁定expose效果，{api: true}是允許訪問expose api，以在后面調(diào)用load()方法
   $(this).expose({api: true}).load(); 
   });

  使用方法很簡(jiǎn)單，示例說明看代碼注釋。