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

當一個網站或者一個Web應用推出新功能時,爲了讓用戶瞭解你的站點(或應用)如何操做,每每都會在站點(應用)中添加一個分步指引的效果。然而這樣的效果,對於不懂原生JS的同窗來講,是件很頭痛的事情。 
下面爲你們介紹一些可幫助你實現分步指引效果的jQuery插件,你能夠根據本身需求定製,它們都具備一個時尚的外觀,並且簡單易用。jquery

1.  Intro.js 

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

git



2.  aSimpleTour 

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

github



3.  Pageguide.js 

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

web



4.  Joyride 

Joyride是一個jQuery插件,能夠利用它來建立一個引導用戶如何操做網站功能的嚮導。經過定義一個操做步驟順序,這個插件會在須要操做的HTML元素旁邊顯示一個幫助說明的Tooltips。 

bootstrap



5.  Website Tour 

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

ide



6.  Bootstro.js 

這個是Intro.js的Bootstrap版本。 

函數



7.  Bootstrap Tour 

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

工具



8.  jQuery Site Tour 

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

網站



9.  jQuery TourBus 

這個插件採用CoffeeScript+Less + CSS開發,很是易於定製,可手動顯示其餘步驟或自動播放。可經過函數來得到當前的步驟,或者顯示特定的一個步驟。 

ui



10.  Trip.js 

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



11.  Crumble 

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

相關文章
相關標籤/搜索