1. 程式人生 > >11 個超棒的 jQuery 分步指引插件

11 個超棒的 jQuery 分步指引插件

trap 特定 需要 開發 ews 新功能 com ava 選項

當一個網站或者一個Web應用推出新功能時,為了讓用戶了解你的站點(或應用)如何操作,往往都會在站點(應用)中添加一個分步指引的效果。然而這樣的效果,對於不懂原生JS的同學來說,是件很頭痛的事情。
下面為大家介紹一些可幫助你實現分步指引效果的jQuery插件,你可以根據自己需求定制,它們都具有一個時尚的外觀,而且簡單易用。

1. Intro.js

Intro.js 使用一種引導式的方式來一步步介紹你網站和項目新特性。支持鍵盤+鼠標的導航方式。

技術分享圖片



2. aSimpleTour

aSimpleTour 使用JSON數據進行存儲配置和內容。一個浮動窗幫助管理重點元素的瀏覽、工具提示(可以定位)。

技術分享圖片



3. Pageguide.js

PageGuide.js 是一個利用jQuery 與 CSS3實現的交互式可視化網頁向導組件,通過 PageGuide.js 可制作出友好的幫助提示。

技術分享圖片



4. Joyride

Joyride是一個jQuery插件,可以利用它來創建一個引導用戶如何操作網站功能的向導。通過定義一個操作步驟順序,這個插件會在需要操作的HTML元素旁邊顯示一個幫助說明的Tooltips。

技術分享圖片



5. Website Tour

一個簡單但實用的插件。所有明細和內容都定義在JS中。它還提供選項來定義tooltips的位置和顏色。

技術分享圖片



6. Bootstro.js

這個是Intro.js的Bootstrap版本。

技術分享圖片



7. Bootstrap Tour

這個jQuery網站導航在Bootstrap Popovers中加載內容。導航步驟和內容都定義在JavaScript中,它擁有許多的選項來定義其行為。

技術分享圖片



8. jQuery Site Tour

這個插件擁有許多的選項來定外觀和步驟之間的延遲,設置要初始顯示的項目,等等。

技術分享圖片



9. jQuery TourBus

這個插件采用CoffeeScript+Less + CSS開發,非常易於定制,可手動顯示其他步驟或自動播放。可通過函數來獲得當前的步驟,或者顯示特定的一個步驟。

技術分享圖片



10. Trip.js

所有用引導的步驟和內容都定義在JS中,它擁有一個完整的API,支持callbacks、keyboard,並允許自定義外觀。

技術分享圖片



11. Crumble

Crumble采用冒泡的界面,所有的步驟定義在一個有序的列表。

技術分享圖片 原文來源:http://www.iteye.com/news/27626

11 個超棒的 jQuery 分步指引插件