幫助用戶更好的體驗網站：jQuery的頁面功能向導插件Pageguide.js

在線演示  本地下載

大家可能都有過這樣的開發經驗，用戶無法真正的了解如何使用一個設計非常講究並且功能非常炫酷的網站，這樣的情況的確非常讓人沮喪，即使是微軟開發的office，也有同樣的問題，現在的office使用就是一個迷宮游戲，永遠無法第一眼找到自己需要的功能。

為了解決這樣的問題，一個非常好的方案就是形象化的將功能區域有效的展示給用戶，並且添加適當的功能說明。不過這樣的功能自己開發起來可能相對比較麻煩，有沒有更好的方式呢？

今天這里我們介紹一個不錯的jQuery插件 -  Pageguide.js，使用這個插件可以有效的幫助你生成網站使用的向導，用戶可以很直觀的了解網站的內容和相關功能使用，而作為網站來說，我們不需要自己開發相關功能，只需要整合pageguide到我們的網站即可。

使用Pageguide.js將會添加一個“向導”按鈕到你的網站，當你點擊它的時候，將會高亮顯示我們需要說明的網頁元素，並且附帶部分的文字說明。你的用戶可以很容易的了解如何使用這些功能。

主要特性

• 和頁面內容不沖突
• 使用jQuery和CSS3來實現
• 使用簡單，支持自動滾動
• 支持現代瀏覽器 

如何使用

倒入類庫及其CSS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="javascripts/pageguide.js"></script>
<link rel="stylesheet" href="stylesheets/pageguide.css">

指定<ul>來添加需要展示在頁面上的使用向導：

添加如下javascript代碼：

<script type="text/javascript">
    $(document).ready(function() {
        tl.pg.init();
    })
</script>

搞定！現在你可以看到使用向導按鈕了！

是不是非常方便，如果你需要給你的網站添加使用向導的話，Pageguide絕對是一個不錯的選擇！