8大網(wǎng)頁(yè)前端界面必備jQuery插件
網(wǎng)頁(yè)前端界面經(jīng)歷了各種設(shè)計(jì)革新,從最早簡(jiǎn)單的html網(wǎng)頁(yè)到目前各種創(chuàng)意,創(chuàng)新的網(wǎng)站,簡(jiǎn)直讓人眼花繚亂,但唯一不變的是網(wǎng)站內(nèi)容,和良好的用戶(hù)體驗(yàn)。下邊圖趣網(wǎng)為大家介紹8款增強(qiáng)用戶(hù)體驗(yàn)的jquery插件。
1.Mobiscroll
對(duì)于許多開(kāi)發(fā)者而言,Mobiscroll并不陌生,甚至可以說(shuō)是相當(dāng)熟悉。Mobiscroll是一款很不錯(cuò)的jQuery Mobile插件,主要用于觸屏設(shè)備的旋轉(zhuǎn)滾動(dòng)/日期和時(shí)間選擇。通過(guò)它,用戶(hù)只需滑動(dòng)數(shù)字即可進(jìn)行日期和時(shí)間選擇(查看DEMO)
2. Ion.Sound
今時(shí)今日,無(wú)論是Web還是移動(dòng)網(wǎng)站,都充斥著各種各樣的事件,比如新郵件、新聊天信息、內(nèi)容更新等。但卻常常存在著這樣一個(gè)問(wèn)題,就是即時(shí)通知無(wú)法立即引起用戶(hù)注意。而通過(guò)Ion.Sound插件,則可以很好地實(shí)現(xiàn)這一任務(wù)。
3. jQuery.mmenu
jQuery.mmenu是一款用于創(chuàng)建平滑的抽屜式導(dǎo)航菜單的jQuery插件,只需短短一行JavaScript代碼,即可在移動(dòng)網(wǎng)站中實(shí)現(xiàn)類(lèi)似于移動(dòng)App外觀(guān)的非??犰诺幕瑒?dòng)菜單。
4. Naver
Naver 是一款專(zhuān)門(mén)用于創(chuàng)建響應(yīng)式導(dǎo)航的jQuery插件。通過(guò)它,開(kāi)發(fā)者可以輕易地制作出對(duì)移動(dòng)端非常友好的導(dǎo)航效果,還可制作動(dòng)態(tài)導(dǎo)航。Naver兼容 Firefox、Chrome、Safari、IE(7+),基于MIT許可證發(fā)布,無(wú)論是個(gè)人或商業(yè)項(xiàng)目中,均可自由免費(fèi)使用。
5. iosOverlay.js
iosOverlay.js 是一款用于創(chuàng)建iOS風(fēng)格的提示/通知效果的jQuery插件,支持IE7+、Google Chrome、Firefox、Opera、Safari(桌面版及移動(dòng)版)。需要提醒的是,如果想要防止圖標(biāo)在加載時(shí)閃爍,開(kāi)發(fā)者需要預(yù)加載圖像資源。
此外,iosOverlay.js還存在兩個(gè)可選的依賴(lài)項(xiàng),即Spin.js和jQuery。如果開(kāi)發(fā)者想使用其下拉列表對(duì)象,就必須要用到Spin.js,而對(duì)于不兼容CSS動(dòng)畫(huà)的瀏覽器,則需jQuery提供支持。
6. Easy Responsive Tabs
Easy Responsive Tabs是一款輕量級(jí)的響應(yīng)式Tab選項(xiàng)卡/手風(fēng)琴導(dǎo)航j(luò)Query插件,支持同一頁(yè)面使用多個(gè)范例,跨平臺(tái)支持Web、平板電腦及移動(dòng)設(shè)備。該插件能夠 自適應(yīng)屏幕大小,默認(rèn)樣式為水平/垂直Tab選項(xiàng)卡,隨著窗口變小,會(huì)自動(dòng)切換為手風(fēng)琴樣式。
7. Hide/Show Password
Hide/show Password插件可以讓你輕易隱藏和顯示密碼輸入框中的內(nèi)容。該插件最酷的地方就是“innerToggle”選項(xiàng)。當(dāng)設(shè)置為開(kāi)時(shí),開(kāi)發(fā)者可以自定義創(chuàng)建非常漂亮的隱藏/顯示控件。而且在觸屏瀏覽器中進(jìn)行滑動(dòng)時(shí)還可保持輸入焦點(diǎn)。
8. Swipebox
Swipebox是一款精美的jQuery燈箱特效插件,可用于桌面、移動(dòng)和平板設(shè)備。在移動(dòng)設(shè)備上,支持滑動(dòng)手勢(shì)導(dǎo)航,而在桌面上則可使用鍵盤(pán)導(dǎo)航。不支持CSS3過(guò)渡特性的瀏覽器可使用jQuery降級(jí)處理,支持視網(wǎng)膜顯示,能夠通過(guò)CSS輕松定制。
當(dāng)用戶(hù)點(diǎn)擊目標(biāo)圖片時(shí),照片將會(huì)以全尺寸的方式展示,此外,用戶(hù)還可對(duì)同組的圖片進(jìn)行左右切換來(lái)進(jìn)行查看,非常適合用于做照片畫(huà)廊以及查看大尺寸圖片。
本文地址:http://m.pkvc.cn/tutorial/id1932.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏