jQuery插件實現的頁面功能介紹引導頁效果

新產品上線或是改版升級，咱們會在用戶第一次使用產品時創建一個使用嚮導，引導用戶如何使用產品，如使用演示的方式逐一介紹界面上的功能模塊，從而提高了用戶體驗和產品的親和力。

Helloweba.com以前也有相關文章介紹：《構建一個用於產品介紹的WEB應用》，相信對有須要的朋友有幫助。本文將介紹另外一款基於jQuery的頁面引導頁插件：pagewalkthrough.js，來看如何使用它。

先點擊這裏能夠看在線演示效果

HTML

首先記得加載所需的css文件和jQuery庫文件，以及pagewalkthrough插件。

<!-- CSS --> 
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" /> 
 
<!-- jQuery --> 
<script type="text/javascript" src="jquery.min.js"></script> 
<!-- Page walkthrough plugin --> 
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script> 

接着，咱們在頁面的最下部加入引導內容，就是每一步須要展現的內容，默認先隱藏內容，等會用jQuery調用。

<div id="walkthrough-content"> 
    <div id="walkthrough-1"> 
        <h3>歡迎來到Helloweba示例DEMO演示頁</h3> 
 
        <p>頁面功能介紹引導頁的效果是經過一款叫作pagewalkthrough.js的jQuery插件實現的。</p> 
        <p>點擊下一步瞭解更多...</p> 
    </div> 
 
    <div id="walkthrough-2"> 
        這裏是Helloweba網站LOGO，點擊這裏能夠直通網站首頁。 
    </div> 
 
    <div id="walkthrough-3"> 
        點擊這裏能夠直接看插件的使用教程。 
    </div> 
 
    <div id="walkthrough-4"> 
        點擊這裏去下載源碼，免費的哦。。 
    </div> 
 
    <div id="walkthrough-5"> 
        這是頁腳和版權信息。 
    </div> 
</div> 

 

引導內容支持html內容，你能夠在裏面加入連接、圖片等信息。還有就是引導頁所需的箭頭圖片已經打包好，直接用css調用，關於字體，你能夠調用外部字體，如手寫字體可能效果更好。

jQuery

你徹底能夠在頁面底部加入以下代碼來調用pagewalkthrough，關鍵選項steps是一個數組，定義每一步引導調用的內容，參數wrapper定義了當前引導對應的元素位置，參數popup定義彈出提示引導層，參數content定義關聯的內容元素，參數type定義彈出方式，包括tooltip和modal以及nohighlight三種方式，參數position定義了彈出層位置，包括top,left, right or bottom。

$(function() { 
    $('body').pagewalkthrough({ 
        name: 'introduction', 
        steps: [{ 
           popup: { 
               content: '#walkthrough-1', 
               type: 'modal' 
           } 
        }, { 
            wrapper: '#logo', 
            popup: { 
                content: '#walkthrough-2', 
                type: 'tooltip', 
                position: 'bottom' 
            } 
        }, { 
            wrapper: 'h2.top_title a', 
            popup: { 
                content: '#walkthrough-3', 
                type: 'tooltip', 
                position: 'bottom' 
            } 
        }, { 
            wrapper: 'a[href="http://www.helloweba.com/down-286.html"]', 
            popup: { 
                content: '#walkthrough-4', 
                type: 'tooltip', 
                position: 'right' 
            } 
        }, { 
            wrapper: '#footer p', 
            popup: { 
                content: '#walkthrough-5', 
                type: 'tooltip', 
                position: 'top' 
            } 
        }] 
    }); 
 
    // Show the tour 
    $('body').pagewalkthrough('show'); 
}); 

 

保存以後，運行就能看到你要的效果。pagewalkthrough.js插件官方提供了不少參數配置，包括設置彈出層寬度、滾動速度，是否自動滾動，鎖定滾動，以及多種回調函數，定義上一步下一步按鈕，以及方法調用等等，這些本文再也不描述，有興趣的朋友能夠移步到項目官網瞭解更多：https://github.com/jwarby/jquery-pagewalkthrough