隨著HTML 5時代的來臨,移動開發(fā)開始進(jìn)入了一個新的時代,現(xiàn)在只需要懂得HTML5,配合一定的開發(fā)框架,就可以開發(fā)出十分漂亮的HTML5的移動應(yīng)用。在眾多的 移動HTML5開發(fā)框架中，比較著名的是jQuery Mobile。最近，jQuery Mobile宣布發(fā)布了最新的1.1版本，其中的一些新特性必1.0時代有了很大的提升。在本文中，將會就這些新的特性進(jìn)行介紹，還將討論在1.2版本中 估計會新加入的特性。本文的閱讀對象為對jQuery Mobile開發(fā)有一定認(rèn)識的讀者。

▲jQuery Mobile

　　新特性總述

　　在jQuery Mobile 1.1中有如下值得關(guān)注的八大新特性：

　 　1、改進(jìn)的固定于表頭和頁腳的工具條。2、頁面的過渡效果進(jìn)行了改良，新增兩種過渡效果。3、加載中效果的文字顯示改進(jìn)。4、新增漂亮的迷你表單元素。 5、更漂亮的開關(guān)設(shè)置。6、改進(jìn)的滑動滾動條的效果。7、禁止jQuery Mobile針對元素的改動。8、其他的一些小的改進(jìn)。

　　工具條方面的改良

　　固定的工具條是用來固定頁面頂端和底部的，這可以通過添加data-position="fixed"來添加到頁頭和頁尾。其特點(diǎn)是用戶在翻看頁面到底部或者頂端時，能依然清晰看到頁面頭部和底部的工具條。

　 　最簡單的方式去創(chuàng)建一個固定的頁面元素是使用CSS 3中的 position:fixed 。可惜的是，因為移動瀏覽器對于這個屬性的支持一直都不是很完美，所以在舊版本的jQuery Mobile中，通過動態(tài)的重新定位來實現(xiàn)該功能，但效果不是很好，運(yùn)行下面兩個版本的DEMO，明顯看到，在1.0版本中，當(dāng)用戶滾動鼠標(biāo)到最底部的內(nèi)容時，頁面出現(xiàn)抖動，頭部和底部的工具條出現(xiàn)閃動，但在新的1.1版本中，已經(jīng)是解決了這個問題。

　　jQuery Mobile 1.0演示(http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/fixed-toolbars-1.0.html )

　　jQuery Mobile 1.1演示(http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/fixed-toolbars-1.1.html )

　 　幸運(yùn)的是，隨著現(xiàn)在新型瀏覽器的功能不斷增強(qiáng)，在1.1版本中，jQuery mobile團(tuán)隊對工具條進(jìn)行了重新的設(shè)計，并且盡可能使用了 position:fixed，這樣使得工具條的運(yùn)行更加流暢。對于不支持 position:fixed屬性的瀏覽器，例如，Safari in iOS4.3，則會使用一般的靜態(tài)位置去顯示工具條，比如就是在頂部和底部的固定位置顯示。如果依然希望在iOS上或舊的jQuery版本上，實現(xiàn)在滾動 內(nèi)容頁時，工具條是在頂部和底部固定時，則可以選擇使用如下這個開源的CSS樣式(https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill )。

　 　現(xiàn)在新版本的工具條，還有了一系列的新的選項和方法。例如visibleOnPageShow選項來控制是否頁面初始的時候就顯示工具條。 tapToggle選項來打開或者關(guān)閉"toggle-on-tap"特性。show，hide和toggle方法可以使用代碼控制顯示和隱藏工具條。

　　此外，還有一個很重要的小變動，關(guān)于全屏定位。在jQuery mobile 1.0中可以通過添加data-fullscreen="true“來實現(xiàn)工具條的全屏幕模式。在1.1中，需要將 這個屬性添加到獨(dú)立的header和footer容器中而不是頁面容器。

　　注意，這里有一些已知的關(guān)于position:fixed在Android 2.2/2.3中運(yùn)行的問題。請查看詳細(xì)文檔(http://jquerymobile.com/test/docs/toolbars/bars-fixed.html )。

　　jQMobile1.0使用CSS overflow-scrolling:touch來固定的工具條的位置。1.1使用真正的position:fixed，overflow-scrolling:touch屬性已經(jīng)被刪除了，所以需要修改相關(guān)的代碼。

　　更流暢的頁面過渡效果

　　jQMobile1.1中最大的一個變化在于改善了頁面間的過渡效果，在新的1.1版本中，過渡的效果十分流暢。由于jQuery Mobile框架之前的工作方式，在頁面過渡前，需要先滾動到當(dāng)前頁的頂端，再執(zhí)行頁面過渡效果。下面是一個頁面過渡的整個流程：

　　1. 用戶觀看當(dāng)前頁面時，先滾動到頁面最底部

　　2. 點(diǎn)擊一個鏈接，表示要查看新的頁面

　　3. jQuery mobile的做法是，先滾動到當(dāng)前頁面的頂端

　　4. jQuery mobile使用過渡效果來跳轉(zhuǎn)到新的頁面

　 　這個過程不是很好，特別對于移動瀏覽器，現(xiàn)在，在新版本的1.1中，對于以上的場景，其頁面過渡效果的工作流程有所改變，變成如下步驟：1、用戶向下滾 動到目前頁面。2、點(diǎn)擊一個鏈接，查看新頁面。3、jQuery Mobile開始執(zhí)行過渡效果。4、在一個適當(dāng)?shù)臅r候，jQuery mobile淡出當(dāng)前的頁面，并執(zhí)行滾動到本頁面的頂端(頁面為空)，然后再使用淡入效果顯示新的頁面。5、jQuery mobile完成過渡效果來實現(xiàn)新頁面。

　　可以看到不同的地方在于頁面過渡的時機(jī)，頁面淡出后內(nèi)容變少，這個時候滾動速度就更快。因為沒有內(nèi)容，所以用戶基本看不到滾動效果。

　　可以從如下兩個地址對比看出不同的效果。

　　jQuery Mobile 1.0的頁面過渡效果(http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/transitions-1.0.html )

　　jQuery Mobile 1.1的過渡效果(http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/transitions-1.1.html )

　　也可以看官方網(wǎng)站上關(guān)于兩個版本的頁面過渡的效果：

　　jQuery Mobile 1.0的(http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html )

　　jQuery Mobile 1.1的(http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html )

　　注意，在1.1版本中，其中新的一個過渡效果沒有使用新的上述的機(jī)制的，這個過渡效果是slide，這個過渡效果使用舊的淡出方式。如果用戶想獲得更快的slide效果的性能，可以考慮使用slidefade這個效果，來得到更好的性能

　　此外，因為一些移動端瀏覽器的限制，所以只能支持普通的fade淡入淡出效果，例如，Android2.x。

　　兩個新添加的頁面過渡效果

　　除了1.0支持的slide, slideup, slidedown, pop, fade, 和 flip，1.1添加了2個過渡效果，分別為turn和flow，效果分別如下兩個連接

　　turn: http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/transition-turn.html

　　flow: http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/transition-flow.html

　　更好更多的加載效果

　　在1.1的版本中，“加載中”這個效果已經(jīng)重新設(shè)計，缺省的效果依舊沒有文字。用戶可以設(shè)置更多選項：

　　$mobile.loadingMessageTextVisible：是否顯示加載的文字(boolean：缺省為false)

　　$mobile.loadingMessageTheme：是否使用特定的主題顯示信息框。缺省使用”a”，前提是 $.mobile.loadingMessageTextVisible為 true。

　　$mobile.pageLoadErrorMessageTheme：使用錯誤信息的主題,默認(rèn)使用的是預(yù)定義的”e”主題顯示樣式

　　可以在mobileinit方法中全局定義，如下：

　　$(document).bind( "mobileinit", function() {

　　$.mobile.loadingMessageTextVisible = true;

　　} );

　　和舊的版本一樣，可以使用$.mobile.loadingMessage顯示加載信息，$.mobile.pageLoadErrorMessage顯示錯誤信息。

　　如果調(diào)用 $.mobile.showPageLoadingMsg()來顯示加載信息，可以傳遞3個參數(shù)在自定義信息中：

　　· 信息框主題,比如使用名稱為”a”的主題

　　· 信息框文字(默認(rèn)的是”loading”)

　　· 是否隱藏表示加載進(jìn)度的圖片，缺省false.

　　下面的例子,可以看到各種的新的加載效果,如下圖,示例的地址在:

　　http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/loading.html?

　　在工具欄中新增加的迷你表單元素

　　在1.1版本中,可以添加data-mini=”true”屬性到表單中的任何元素中,其作用為可以將某些表單中的元素設(shè)置一個小一點(diǎn)尺寸的版本,叫”迷你”版本.比如如下圖:

　　其中右邊的表單元素,都是設(shè)置了data-mini=true的表單元素,更適合在一些地方小的表單空間中使用迷你表單元素。其示例代碼見：

　　http://jquerymobile.com/demos/1.1.0/docs/forms/forms-all-mini.html

?

　　更漂亮的開關(guān)設(shè)置

　　在新版本中，重新設(shè)計了開關(guān)設(shè)置這個表單元素小功能，使得看起來更緊湊簡潔，更接近很多移動平臺上的開關(guān)樣式設(shè)計，如下圖，左邊的是1.0版本的設(shè)計，右邊是1.1版本的設(shè)計。

　　1.0版本的代碼見：http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/flip-switch-1.0.html

　　1.1版本的代碼見：http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/flip-switch-1.1.html

　　更好的滑動條的設(shè)計

　　區(qū)域滑動條中，現(xiàn)在支持HTML的step屬性，這個屬性可以指定在使用滑動條時，每次增加的范圍步長(默認(rèn)為1)，比如增加step=”5”到中去，則每次拖動時，滑動的范圍為5個單位。

　　另外一個增強(qiáng)的特性，是提供了data-hightlight="true"屬性，提供了一個輸入框告訴用戶選擇的數(shù)值，如下圖：

　　這個效果的示例代碼見：http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/slider.html

　　禁止jQuery Mobile針對元素的改動

　 　jQuery Mobile默認(rèn)會搜索整個頁面的元素，對它們自動進(jìn)行改良，這些改動針對移動或者觸摸設(shè)備。例如，滑動選擇，復(fù)選框或者list view等。比如會添加click事件到鏈接中，為表單自動添加提交的功能，并且增加AJAX功能，但是有的時候我們不希望它這樣處理，例如，我們要開發(fā) 自己的頁面組件。

　　對于屏蔽jQuery mobile針對表單元素的改動，以往我們都用一些小技巧，例如， keepNative 選項，initSelector 屬性等，在jQuery Mobile1.1中，我們可以使用data-enhance="false"來阻止jQuery mobile進(jìn)行處理。應(yīng)用了該屬性后，jQuery Mobile將不會對某個表單中的元素進(jìn)行任何的增強(qiáng)或改動，代碼如下：

　　并且在全局選項中指定：

　　$(document).bind( "mobileinit", function() {

　　$.mobile.ignoreContentEnabled = true;

　　} );

　　示例可以在http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/data-enhance.html 中看到

　　針對整個容器關(guān)閉AJAX處理

　　在舊版本中，我們可以針對表單或者鏈接來添加data-ajax="false"屬性，來禁止使用AJAX處理指定的對象表單或者鏈接。在jQuery mobile 1.1中，我們可以針對一個容器進(jìn)行處理，如下：

　　和data-enhance屬性一樣，你也需要在mobileinit中指定ignoreContentEnabled為true。

　　請運(yùn)行下面地址的示例，以觀察效果：

　　http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-1-1-smoother-faster-nicer/data-ajax.html

　　其他特性的變化

　　在1.1 版本中，一些其他特性的變化包括有：

　　1、更清楚的缺省主題。

　　2、更容易的ThemeRoller。

　　在jQuery Mobile 1.0中，ThemeRoller這個工具，主要是給開發(fā)者通過可視化的方法，快速定制不同的主題的(地址：http://jquerymobile.com/themeroller/ )。現(xiàn)在支持從1.0版本中直接導(dǎo)入到1.1版本的ThemeRoller。

　　3、支持jQuery 1.7.1

　　4、AMD模塊支持

　　現(xiàn)在，1.1版本支持使用requirejs的異步模塊定義API(詳細(xì)請參考：

　　http://requirejs.org/docs/whyamd.html )去按需要加載jQuery Mobile的模塊加載。

　　5、解決縮放的bug

　 　在iOS中的Safari有一個挺惱人的bug，是關(guān)于放大縮小頁面時(這些頁在它們的viewportmeta 標(biāo)記中并沒有maximum-scala=1的屬性設(shè)置)，如果從豎向切換到橫向，會發(fā)現(xiàn)放大有時會失真，并且會偶然看不到頁面右邊部分的內(nèi)容。 Scott Jehl提出了一個解決方案(http://filamentgroup.com/lab /a_fix_for_the_ios_orientationchange_zoom_bug/)，這個方案現(xiàn)在已經(jīng)內(nèi)置在1.1的版本中了。這個方案 并且在當(dāng)用戶將焦點(diǎn)切換到input和select元素時，禁止其放大。當(dāng)然如果用戶要禁止掉這個特性，可以調(diào) 用$.mobile.zoom.disable( true )即可。

　　6、可搜索的文檔支持

　　在1.1版本中，

　　使用http://jquerymobile.com/demos/1.1.0/docs/nav.html 去檢索文檔，十分方便。

　　展望jQuery mobile 1.2

　　這里列出計劃中的幾個特性：

　　1、彈出組件

　　將允許將一個div轉(zhuǎn)化為一個彈出組件，只需要添加data-role=”popup”到div即可，比如可以在一個按鈕中，調(diào)用popup組件的id即可：data-rel=”popup”。可以從這個地址觀看一個演示

　　http://filamentgroup.com/tests/popup/docs/pages/popup/options.html

　　2、加載外部頁面的鏈接

　　在1.2中，可以設(shè)置一個鏈接的data-target屬性，告訴jQuery Mobile去裝載這個鏈接所指向頁面的內(nèi)容，將其放置到一個已經(jīng)存在的頁面容器中。

　　3、下載管理器

　　jQuery Mobile團(tuán)隊希望在1.2版本中，增加一個下載管理器，能讓用戶選擇選用jQuery Mobile的哪些功能和插件，以進(jìn)一步為jQuery 瘦身。

　　更多關(guān)于jQuery Mobile 1.2期望的新特性，請關(guān)注jQuery Mobile的blog:

　　http://jquerymobile.com/blog

　　小結(jié)

　　本文簡單介紹了jQuery Mobile 1.1中新增的一些主要特性及變化，jQuery Mobile的發(fā)展十分迅速，讀者應(yīng)該多查看官方文檔及官方博客以了解更多信息。

轉(zhuǎn)載于:https://www.cnblogs.com/huidaoli/p/3549731.html

總結(jié)

以上是生活随笔為你收集整理的jQuery Mobile 1.1八大新特性介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。