為(wèi)了讓用戶更好地了解您的産品功能，您在發布新産品或者升級産品功能的時(shí)候，不妨使用一個(gè)産品介紹的向導，引導用戶熟悉産品功能和(hé)流程。本文将給您介紹一款優秀的用于産品介紹的WEB應用。

就像微博或郵箱這類WEB産品升級一樣，使用Guiders.js構建的應用，用戶将會(huì)看到一些(xiē)列的彈出層，這些(xiē)彈出層可(kě)以定位到頁面上(shàng)的任意位置，引導用戶一步步浏覽，最後退出向導。Guiders.js是一款基于jquery的web應用插件。下面我們來(lái)介紹如何在實際項目中應用。

準備

加入有(yǒu)一款WEB産品，需要向新用戶做(zuò)功能介紹，就要在首頁先引入jquery庫和(hé)guiders插件以及相關樣式。

應用

調用guiders插件，創建一個(gè)彈出層向導，設置相關屬性，代碼如下：

如果要創建多(duō)個(gè)彈出層，可(kě)以複制(zhì)多(duō)個(gè)以上(shàng)代碼，通(tōng)過使用id和(hé)next屬性來(lái)關聯多(duō)個(gè)層的彈出順序。

說明(míng)

Guiders提供了多(duō)個(gè)屬性參數(shù)設置，以下是常用的屬性說明(míng)：

attachTo：彈出層關聯的html元素。

buttons：{name: "",onclick:function}，設置按鈕，name：按鈕名稱，onclick：單擊按鈕調用的方法，提供兩個(gè)方法可(kě)以調用，guiders.hideAll：關閉彈出層，guiders.next：繼續下一步。

buttonCustomHTML：可(kě)以自定義按鈕層的html內(nèi)容。

description：彈出層主體(tǐ)內(nèi)容，支持html标簽。

id：設置當前層的id。

next：設置下一個(gè)彈出層的id。

offset：設置彈出層的相對位移，如：{ left:0, top: -10 }

overlay：是否使用遮罩層，如果設置為(wèi)true，則會(huì)在彈出層和(hé)底層之間(jiān)有(yǒu)一個(gè)灰色的層顯示。

position：彈出層的顯示位置（必需先指定attachTo），Guiders使用時(shí)鍾定位，如position值為(wèi)12，則意思為(wèi)12點鍾方向，指正上(shàng)方。

title：設置彈出層顯示的标題。

width：設置彈出層的寬度，默認為(wèi)400px。

xButton：如果設置為(wèi)true，則會(huì)在彈出層的右上(shàng)角顯示一個(gè)x，可(kě)以點擊x關閉層。