自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

移動開發(fā)必備!15款jQuery Mobile插件

移動開發(fā)
移動互聯(lián)網(wǎng)的發(fā)展,來自PC端的網(wǎng)頁并不能完全自適應(yīng)移動端頁面需求,使得響應(yīng)式設(shè)計體驗產(chǎn)生并成為潮流,也正是這樣一種需求,促成了jQuery Mobile的流行。

移動互聯(lián)網(wǎng)的發(fā)展,來自PC端的網(wǎng)頁并不能完全自適應(yīng)移動端頁面需求,使得響應(yīng)式設(shè)計體驗產(chǎn)生并成為潮流,也正是這樣一種需求,促成了jQuery Mobile的流行。jQuery Mobile這樣一款基于jQuery和jQuery UI的框架,繼承了jQuery的“write less,do more”精髓,具有良好的擴(kuò)展性和可定制性,全面兼容各種平臺設(shè)備,對于不支持的手機(jī)類型,也會予以基礎(chǔ)樣式。


 


 

本文細(xì)數(shù)了15款非常優(yōu)秀而又實用的jQuery Mobile插件,類型甚廣,從日期/時間選擇、即時聲音通知、抽屜式導(dǎo)航菜單、iOS style、手風(fēng)琴導(dǎo)航、隱藏/顯示密碼、燈箱特效,到頗為酷炫的交互式地圖、頁面震動、Native、相冊/畫廊展示等,總有那么一款會讓你著迷。

1. Mobiscroll

對于許多開發(fā)者而言,Mobiscroll并不陌生,甚至可以說是相當(dāng)熟悉。Mobiscroll是一款很不錯的jQuery Mobile插件,主要用于觸屏設(shè)備的旋轉(zhuǎn)滾動/日期和時間選擇。通過它,用戶只需滑動數(shù)字即可進(jìn)行日期和時間選擇(點擊鏈接查看Demo)。


 


 

Mobiscroll不僅支持任意自定義值,讓用戶完全自定義主題,還可用于下拉列表本地選擇控制。此外,使用起來也是非常方便,不僅為開發(fā)者提供了相當(dāng)高大上的配色方案,而且可完全通過CSS文件進(jìn)行樣式修改。支持包括iOS、Android、WP8、Windows 8、BlackBerry等在內(nèi)的所有主流移動及桌面瀏覽器。

2. Ion.Sound

今時今日,無論是Web還是移動網(wǎng)站,都充斥著各種各樣的事件,比如新郵件、新聊天信息、內(nèi)容更新等。但卻常常存在著這樣一個問題,就是即時通知無法立即引起用戶注意。而通過Ion.Sound插件,則可以很好地實現(xiàn)這一任務(wù)。


 


 

Ion.Sound是一款用于播放事件聲音的jQuery插件,采用MIT許可證,包含有25種免費(fèi)聲音。截至目前,Ion.Sound已成功運(yùn)用于Google Chrome、Mozilla Firefox、Opera、Safari、IE(9.0+)等桌面瀏覽器,并支持所有主流移動瀏覽器。

3. jQuery.mmenu

jQuery.mmenu是一款用于創(chuàng)建平滑的抽屜式導(dǎo)航菜單的jQuery插件,只需短短一行JavaScript代碼,即可在移動網(wǎng)站中實現(xiàn)類似于移動App外觀的非??犰诺幕瑒硬藛?。


 


 

通過jQuery.mmenu,開發(fā)者可以將無序列表轉(zhuǎn)換成菜單項,并進(jìn)行自定義設(shè)置。jQuery.mmenu不僅為開發(fā)者提供了諸如打開、關(guān)閉、切換等常用菜單的定制,還提供了菜單位置(居左/居右)、是否顯示菜單項計數(shù)器等選項的設(shè)置。

4. Naver

Naver是一款專門用于創(chuàng)建響應(yīng)式導(dǎo)航的jQuery插件。通過它,開發(fā)者可以輕易地制作出對移動端非常友好的導(dǎo)航效果,還可制作動態(tài)導(dǎo)航。Naver兼容Firefox、Chrome、Safari、IE(7+),基于MIT許可證發(fā)布,無論是個人或商業(yè)項目中,均可自由免費(fèi)使用。


 


 

5. iosOverlay.js

iosOverlay.js是一款用于創(chuàng)建iOS風(fēng)格的提示/通知效果的jQuery插件,支持IE7+、Google Chrome、Firefox、Opera、Safari(桌面版及移動版)。需要提醒的是,如果想要防止圖標(biāo)在加載時閃爍,開發(fā)者需要預(yù)加載圖像資源。


 


 

此外,iosOverlay.js還存在兩個可選的依賴項,即Spin.js和jQuery。如果開發(fā)者想使用其下拉列表對象,就必須要用到Spin.js,而對于不兼容CSS動畫的瀏覽器,則需jQuery提供支持。

6. Easy Responsive Tabs

Easy Responsive Tabs是一款輕量級的響應(yīng)式Tab選項卡/手風(fēng)琴導(dǎo)航j(luò)Query插件,支持同一頁面使用多個范例,跨平臺支持Web、平板電腦及移動設(shè)備。該插件能夠自適應(yīng)屏幕大小,默認(rèn)樣式為水平/垂直Tab選項卡,隨著窗口變小,會自動切換為手風(fēng)琴樣式。


 


 

7. Hide/Show Password

Hide/show Password插件可以讓你輕易隱藏和顯示密碼輸入框中的內(nèi)容。該插件最酷的地方就是“innerToggle”選項。當(dāng)設(shè)置為開時,開發(fā)者可以自定義創(chuàng)建非常漂亮的隱藏/顯示控件。而且在觸屏瀏覽器中進(jìn)行滑動時還可保持輸入焦點。


 


 

8. Swipebox

Swipebox是一款精美的jQuery燈箱特效插件,可用于桌面、移動和平板設(shè)備。在移動設(shè)備上,支持滑動手勢導(dǎo)航,而在桌面上則可使用鍵盤導(dǎo)航。不支持CSS3過渡特性的瀏覽器可使用jQuery降級處理,支持視網(wǎng)膜顯示,能夠通過CSS輕松定制。


 


 

當(dāng)用戶點擊目標(biāo)圖片時,照片將會以全尺寸的方式展示,此外,用戶還可對同組的圖片進(jìn)行左右切換來進(jìn)行查看,非常適合用于做照片畫廊以及查看大尺寸圖片。

9. App Folder

如果你是一名iOS狂熱分子,那么對于iOS風(fēng)格的文件夾一定非常熟悉。“點擊文件夾,通過加深透明度將周圍的元素虛化,然后顯示文件夾中的內(nèi)容。”App Folders正是這樣一款能夠?qū)崿F(xiàn)iOS文件夾效果的jQuery插件。該插件可同時在桌面及移動瀏覽器上工作,適配性非常好。


 


 

App Folders的文件夾元素可包含任何HTML元素,比如圖像、文本、視頻等,并且每個文件夾都有專屬于自己的URL實現(xiàn)直接點擊。當(dāng)然,開發(fā)者也無需拘泥于和iOS文件夾一樣的效果,通過App Folders,開發(fā)者可以自定義出更富有創(chuàng)意的布局和特效。

10. jQuery Flip

jQuery Flip是一款能夠讓任意HTML、文本或jQuery元素產(chǎn)生非常漂亮的類似于Flipboard的翻轉(zhuǎn)效果的jQuery插件,基于MIT許可發(fā)布。使用CSS 3D轉(zhuǎn)換,翻轉(zhuǎn)速度也可進(jìn)行設(shè)置,完全支持Chrome、Safari等WebKit瀏覽器以及Firefox 11。


 


 

11. jQuery UI Map

對于地圖應(yīng)用開發(fā)者而言,jQuery UI Map絕對是開發(fā)的必備利器。這樣一款輕量級jQuery插件,不同于Google Map API,通過jQuery UI Map,開發(fā)者不僅能在針對諸如點擊等簡單事件時使用Google事件監(jiān)聽器,而且還可在地圖和標(biāo)記上使用jQuery點擊事件。


 


 

 

jQuery UI Map不僅非常靈活,而且高度可定制。要在地圖上顯示計劃事件,jQuery UI Map會集成Google地圖,從而讓開發(fā)者輕而易舉地創(chuàng)建交互式地圖。jQuery UI Map最大的特點就是,當(dāng)客戶端不支持JavaScript時,開發(fā)者可以在備用站點上使用微格式、RDFa或微數(shù)據(jù)等HTML數(shù)據(jù)格式實現(xiàn)同步。

12. gShake

gShake是一款能夠?qū)崿F(xiàn)震動效果的jQuery插件,只需短短幾行代碼,即可讓導(dǎo)航、圖片,甚至是頁面本身抖動起來,從而讓頁面富有動感、樂趣,支持iOS 4.2+。


 


 

13. jQTouch

相比本文所介紹的許多可用于移動開發(fā)的jQuery插件,jQTouch顯然要更有知名度。通過jQTouch,開發(fā)者僅僅使用HTML、CSS以及jQuery即可創(chuàng)建出非常強(qiáng)大的移動App,更牛叉的是,開發(fā)者只需使用核心CSS文件,即可構(gòu)建一個完全自定義的UI。


 


 

jQTouch可以在移動設(shè)備的WebKit瀏覽器上實現(xiàn)諸如動畫、列表導(dǎo)航、默認(rèn)樣式等常見UI效果,但要想實現(xiàn)更多原生效果,則需額外添加CSS文件。對于iOS開發(fā)者,這點則無需顧慮,因為jQTouch為iOS開發(fā)提供了相當(dāng)豐富的原生效果CSS文件。

14. PhotoSwipe

PhotoSwipe是一個開源且免費(fèi)的專為移動觸屏設(shè)備設(shè)計的相冊/畫廊展示包,兼容iOS、Android、Blackberry等主流平臺及桌面瀏覽器。其底層實現(xiàn)基于HTML、CSS及JavaScript,不依賴任何框架,非常適合想要讓移動站點的相冊體驗和原生App一樣的設(shè)計師和開發(fā)者。


 


 

PhotoSwipe是一個獨(dú)立的JavaScript庫,很容易集成到移動網(wǎng)站中,并對移動瀏覽器進(jìn)行了大量的優(yōu)化。此外,在源碼中,PhotoSwipe還提供了對桌面瀏覽器及使用jQuery Mobile的支持。

15. Touch Gallery

和PhotoSwipe一樣,Touch Gallery也是一款圖片展示插件,通過它,開發(fā)者可以在移動瀏覽器上實現(xiàn)類似于原生相冊應(yīng)用的圖像展示效果。支持手勢瀏覽操作,也可運(yùn)用于桌面版Safari、Firefox、Opera及Chrome等桌面瀏覽器,但某些功能項無法實現(xiàn)。


 


 

責(zé)任編輯:張葉青 來源: eoe Android開發(fā)者社區(qū)
相關(guān)推薦

2011-12-31 10:26:19

jQuery Mobi插件

2014-08-06 10:44:31

WordPress插件

2013-07-16 15:27:14

TooltipJQuery

2012-07-05 15:06:40

PHP

2022-09-15 17:08:20

JavaScripWeb開發(fā)

2011-12-12 10:08:39

jQuery MobiHTML5

2014-03-28 15:36:43

移動WebJavaScript開發(fā)框架

2012-06-04 09:48:04

jQuery

2012-07-04 10:28:36

jQuery

2011-09-05 10:49:14

Sencha ToucjQuery MobiHTML5

2015-09-06 16:22:48

JavaScriptSublimeText

2019-07-05 10:45:27

Java程序員編程語言

2014-09-18 10:43:32

jquery mobi

2011-09-01 10:09:04

2011-08-01 08:51:12

jQuery Mobi插件

2011-06-30 09:46:59

jQuery MobiRails

2010-08-16 08:49:25

jQuery MobijQuery

2015-01-22 16:16:35

AdroidJava工具

2020-02-21 13:22:58

開發(fā)者技能工具

2012-03-27 14:34:07

Visual Stud微軟MVC
點贊
收藏

51CTO技術(shù)棧公眾號