使用HTML5、CSS3和jQuery增强网站用户体验
記得幾年前如果你需要添加一些互動(dòng)元素到你的網(wǎng)站中用來(lái)改善用戶體驗(yàn)？是不是立刻就想到了flash實(shí)現(xiàn)？這彷佛年代久遠(yuǎn)的事了。使用現(xiàn)在最流行的Web技術(shù)HTML5，CSS3和jQuery，同樣也可以實(shí)現(xiàn)類似的用戶體驗(yàn)。而且使用這些特性將會(huì)比使用flash更加有效。也許你可能剛知道Adobe停止開發(fā)移動(dòng)版flash的消息，雖然在桌面中我們還擁有大量的flash的應(yīng)用，但是隨著HTML標(biāo)準(zhǔn)的完善，可能flash也要退出歷史舞臺(tái)了。在今天這篇文章中，我們將介紹一些非常實(shí)用的教程，技巧和資源來(lái)幫助大家構(gòu)建一個(gè)更加豐富的用戶界面。請(qǐng)大家給積極我們留言！您的支持是我們的最好的動(dòng)力！
表單類
jQuery的美化Checkbox
這個(gè)教程將幫助你構(gòu)建一個(gè)非常動(dòng)感的checkbox，用來(lái)替換缺省的checkbox，相信大家會(huì)喜歡更富有活力的UI界面
Rethinking forms in HTML5
這是來(lái)自Nettus+的超棒教程，將教你如何使用HTML5特性來(lái)構(gòu)建表單
jQuery impromtu
一個(gè)alert，對(duì)話框等組件的替代品，用戶將會(huì)更喜歡這種UI元素
jQuery Simple Modal
一個(gè)非常靈活的對(duì)話框框架，提供了非常好的用戶界面設(shè)計(jì)，能夠幫助你生成非?？岬谋韱?/p>
mcDropdown
多層選擇下拉框，非常適合樹狀結(jié)構(gòu)的展現(xiàn)
jQ transform
個(gè)人非常喜歡使用的表單美化插件，能夠幫助你構(gòu)建漂亮的UI界面。
Emblematiq niceforms
非常不錯(cuò)的一款jQUery框架，允許你使用設(shè)計(jì)的主題將表單轉(zhuǎn)化成非?？酻I。當(dāng)然你也可以自己自定義一個(gè)主題
Uniform
Uniform將使用自定義的皮膚遮蓋缺省的表單，并且可以和你實(shí)際的表單元素同步，保證了訪問(wèn)和兼容
image buttons a part of input fields
教你如何生成輸入框中的按鈕
DynamicWP contact form
非常不錯(cuò)的WP插件，能夠生成一個(gè)?？宽?yè)邊的聯(lián)系人表單，不使用的時(shí)候自動(dòng)隱藏
jQuery highlight
jQuery高亮顯示功能，能夠讓輸入高亮，提示用戶輸入內(nèi)容
jQuery inline form validation
個(gè)人非常喜歡使用的表單輸入驗(yàn)證插件，具體使用參考這篇文章：
使用jQuery插件jquery.validationEngine實(shí)現(xiàn)表單驗(yàn)證功能
導(dǎo)航類
White smoke menu style
這個(gè)jQuery開發(fā)的導(dǎo)航菜單讓人想起了flash開發(fā)的菜單效果，整個(gè)移動(dòng)如此的順暢，讓你感覺它就是flash開發(fā)的。 兼容所有的瀏覽器，即使javascript被關(guān)閉也可以正常工作。
?jQuery mb.Menu
如果你想開發(fā)一個(gè)多層的屬性菜單，那么這個(gè)插件就是你要找的解決方法之一。
Coda Slider
一個(gè)非常不錯(cuò)的滑動(dòng)面板，非常適合滑動(dòng)類型面板的應(yīng)用。 并且可以使用高級(jí)特性增強(qiáng)功能
?ID Tabs
如果考慮擴(kuò)展性，這個(gè)插件恐怕是你能找到的最好的面板導(dǎo)航標(biāo)簽頁(yè)插件了。
Smooth horizontal sliding menu
這個(gè)教程教你如何使用jQuery來(lái)創(chuàng)建一個(gè)垂直滑動(dòng)顯示的子菜單
jBreadCrumb Menu
這個(gè)可以縮放的當(dāng)前位置可以自動(dòng)根據(jù)當(dāng)前位置長(zhǎng)度來(lái)縮放，非常不錯(cuò)的創(chuàng)意
jQuery FLOWERNAV
非常動(dòng)感的一個(gè)導(dǎo)航實(shí)現(xiàn)， 能夠給你的鏈接添加一個(gè)花朵的效果
jQuery Accordion
一個(gè)使用非常簡(jiǎn)單的手風(fēng)琴顯示效果
用戶界面類
jQuery Slide Note
Slide node是一個(gè)可以幫助你提供一些有效提示或者信息從而方便你訪問(wèn)用戶使用網(wǎng)站的插件。
jQuery page peel
一個(gè)非?？岬娘@示廣告的插件。
jQuery infiniScroll
jQuery的無(wú)限滾動(dòng)效果插件，用來(lái)幫助你現(xiàn)實(shí)大幅的內(nèi)容
jQuery SliderNav
一個(gè)動(dòng)態(tài)垂直滑動(dòng)顯示導(dǎo)航菜單的插件
jQuery tipped
一個(gè)非常酷的插件允許你添加提示到你的網(wǎng)站。當(dāng)然提供了可選的皮膚。
Supersized
一個(gè)能夠讓你的網(wǎng)站背景幻燈顯示的插件
Imagin8
不是一個(gè)簡(jiǎn)單的圖片幻燈插件，它能夠讓你指定一個(gè)目錄，這個(gè)目錄下的所有圖片都能夠顯示，不需要你在HTML代碼中指定，非常實(shí)用！
jQuery Lettering
一個(gè)可以幫助你控制每個(gè)單獨(dú)字母的插件。 幫助你有效的創(chuàng)建一些獨(dú)特的文字效果
jQuery stylesheet Switcher
這個(gè)插件允許你添加鏈接來(lái)修改頁(yè)面的樣式表
Flip
Flip是一個(gè)幫助你實(shí)現(xiàn)翻動(dòng)元素效果的jQuery插件。
文章出自：gbin1.com
總結(jié)
以上是生活随笔為你收集整理的使用HTML5、CSS3和jQuery增强网站用户体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ADMM算法求解二次项目标函数+l1正则
- 下一篇： HTML5+CSS3+JQuery1.9