使用HTML5、CSS3和jQuery增強網站使用者體驗

文章目錄

• 表單類
• 導航類
• 使用者介面類

 

記得幾年前如果你需要添加一些互動元素到你的網站中用來改善使用者體驗？是不是立刻就想到了flash實現？這彷佛年代久遠的事了。使用現在最流行的Web技術HTML5，CSS3和jQuery，同樣也可以實作類別似的使用者體驗。而且使用這些特性將會比使用flash更加有效。也許你可能剛知道Adobe停止開發移動版flash的訊息，雖然在案頭中我們還擁有大量的flash的應用，但是隨著HTML標準的完善，可能flash也要退出曆史舞台了。在今天這篇文章中，我們將介紹一些非常實用的教程，技巧和資源來協助大家構建一個更加豐富的使用者介面。請大家給積極我們留言！您的支援是我們的最好的動力！

表單類

jQuery的美化Checkbox

這個教程將協助你構建一個非常動感的checkbox，用來替換預設的checkbox，相信大家會喜歡更富有活力的UI介面

Rethinking forms in HTML5

這是來自Nettus+的超棒教程，將教你如何使用HTML5特性來構建表單

jQuery impromtu

一個alert，對話方塊等組件的替代品，使用者將會更喜歡這種UI元素

jQuery Simple Modal

一個非常靈活的對話方塊架構，提供了非常好的使用者介面設計，能夠協助你產生非常酷的表單

mcDropdown

多層選擇下拉框，非常適合樹狀結構的展現

jQ transform

個人非常喜歡使用的表單美化外掛程式，能夠協助你構建漂亮的UI介面。

Emblematiq niceforms

非常不錯的一款jQUery架構，允許你使用設計的主題將表單轉化成非常酷UI。當然你也可以自己自訂一個主題

Uniform

Uniform將使用自訂的皮膚遮蓋預設的表單，並且可以和你實際的表單元素同步，保證了訪問和相容

image buttons a part of input fields

教你如何產生輸入框中的按鈕

DynamicWP contact form

非常不錯的WP外掛程式，能夠產生一個停靠頁邊的連絡人表單，不使用的時候自動隱藏

jQuery highlight

jQuery高亮顯示功能，能夠讓輸入高亮，提示使用者輸入內容

jQuery inline form validation

個人非常喜歡使用的表單輸入驗證外掛程式，具體使用參考這篇文章：

使用jQuery外掛程式jquery.validationEngine實現表單驗證功能

導航類

White smoke menu style

這個jQuery開發的導覽功能表讓人想起了flash開發的菜單效果，整個移動如此的順暢，讓你感覺它就是flash開發的。 相容所有的瀏覽器，即使javascript被關閉也可以正常工作。

jQuery mb.Menu

如果你想開發一個多層的屬性菜單，那麼這個外掛程式就是你要找的解決方案之一。

Coda Slider

一個非常不錯的滑動面板，非常適合滑動類型面板的應用。 並且可以使用進階特性增強功能

ID Tabs

如果考慮擴充性，這個外掛程式恐怕是你能找到的最好的面板導航標籤頁外掛程式了。

Smooth horizontal sliding menu

這個教程教你如何使用jQuery來建立一個垂直滑動顯示的子功能表

jBreadCrumb Menu

這個可以縮放的當前位置可以自動根據當前位置長度來縮放，非常不錯的創意

jQuery FLOWERNAV

非常動感的一個導航實現， 能夠給你的連結添加一個花朵的效果

jQuery Accordion

一個使用非常簡單的手風琴顯示效果

使用者介面類

jQuery Slide Note

Slide node是一個可以協助你提供一些有效提示或者資訊從而方便你訪問使用者使用網站的外掛程式。

jQuery page peel

一個非常酷的顯示廣告的外掛程式。

jQuery infiniScroll

jQuery的無限滾動效果外掛程式，用來協助你現實大幅的內容

jQuery SliderNav

一個動態垂直滑動顯示導覽功能表的外掛程式

jQuery tipped

一個非常酷的外掛程式允許你添加提示到你的網站。當然提供了可選的皮膚。

Supersized

一個能夠讓你的網站背景幻燈顯示的外掛程式

Imagin8

不是一個簡單的圖片幻燈外掛程式，它能夠讓你指定一個目錄，這個目錄下的所有圖片都能夠顯示，不需要你在HTML代碼中指定，非常實用！

jQuery Lettering

一個可以協助你控制每個單獨字母的外掛程式。 協助你有效建立一些獨特的文字效果

jQuery stylesheet Switcher

這個外掛程式允許你添加連結來修改頁面的樣式表

Flip

Flip是一個協助你實現翻動元素效果的jQuery外掛程式。

文章出自：gbin1.com