Joyride 實際執行畫面

 Google 推出新功能的時候第一次使用都會有逐步的提示視窗說明，Joyride 也就是類似這一個功能的 jQuery 套件，利用它來創建一個引導使用者逐步操作您的網站功能，透過定義一個一個步驟的操作順序，可定義提示方塊的位置滾動到下一個步驟的速度等等。綜上所述， Joyride 是一種幫助用戶找到網站功能簡單又有效的方法。

使用方法：
第一步 先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
//Joyride 提示視窗的 CSS 樣式表
<link rel=" stylesheet" type="text/css" href="jquery.joyride-2.0.css">
//Joyride 的主程式碼
<script src="jquery.joyride-2.0.js"></script>

第二步 定義您的步驟
/* 設定一個唯一的ID或者是類別 */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

第三步 建立您要的導覽說明
/* 導覽的推薦格式 */
<ol id="chooseID">
  /* data-id 需要是相同的 */
  <li data-id="newHeader">導覽內容..</li>
  <li>導覽內容...</li>
  /* 可以使用 data-button 改變按鈕文字內容 */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">導覽內容...</li>
  /* 也可以自定義樣式 */
  <li data-id="parentElementID" class="custom-class">內容...</li>
</ol>

第四步 加上 JavaScript 讓網頁讀去完成後執行程式
$(function(){
    $("#chooseID").joyride({
      /* 可加入參數 */
    });
});

附上可加入的參數值
$('#contentID').joyride({
  'tipLocation': 'bottom',         // 提示視窗的位置 top,bottom
  'nubPosition': 'auto',           // 覆蓋的方式
  'scrollSpeed': 300,              // 到下一個提示的速度
  'timer': 2000,                   // 0 = 關閉,其他單位為毫秒
  'startTimerOnClick': true,       // 是否在第一次點值啟動計時器
  'nextButton': true,              // 下一個按鈕是否顯示
  'tipAnimation': 'pop',           // 提示視窗的顯示動畫 pop,fade
  'pauseAfter': [],                // 陣列,暫停之後
  'tipAnimationFadeSpeed': 300,    // fade 過度動畫的時間以毫秒為單位
  'cookieMonster': true,           // 是否啟用 Cookie 紀錄
  'cookieName': 'JoyRide',         // 選擇自己的 Cookie 名稱
  'cookieDomain': false,           // 設定 false 或你的網域
  'tipContainer': body,            // 提示視窗容器
  'postRideCallback': $noop,       // 關閉導覽的方法
  'postStepCallback': $noop        // 每一個步驟都會調用
});

作者網站：http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
檔案大小：96.3 KB(包含範例)
檔案下載：https://github.com/zurb/joyride
檔案備份：下載