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

▲jQuery Mobile

　　新特性總述

　　在jQuery Mobile 1.1中有如下值得關注的八大新特性：

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

　　工具條方面的改良

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

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

　　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 )

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

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

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

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

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

　　更流暢的頁面過渡效果

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

　　1. 用戶觀看當前頁面時，先滾動到頁面最底部

　　2. 點擊一個鏈接，表示要查看新的頁面

　　3. jQuery mobile的做法是，先滾動到當前頁面的頂端

　　4. jQuery mobile使用過渡效果來跳轉到新的頁面

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

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

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

　　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 )

　　也可以看官方網站上關于兩個版本的頁面過渡的效果：

　　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版本中，其中新的一個過渡效果沒有使用新的上述的機制的，這個過渡效果是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的版本中，“加載中”這個效果已經重新設計，缺省的效果依舊沒有文字。用戶可以設置更多選項：

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

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

　　$mobile.pageLoadErrorMessageTheme：使用錯誤信息的主題,默認使用的是預定義的”e”主題顯示樣式

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

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

　　$.mobile.loadingMessageTextVisible = true;

　　} );

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

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

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

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

　　· 是否隱藏表示加載進度的圖片，缺省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”屬性到表單中的任何元素中,其作用為可以將某些表單中的元素設置一個小一點尺寸的版本,叫”迷你”版本.比如如下圖:

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

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

?

　　更漂亮的開關設置

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

　　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

　　更好的滑動條的設計

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

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

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

　　禁止jQuery Mobile針對元素的改動

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

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

　　并且在全局選項中指定：

　　$(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 中看到

　　針對整個容器關閉AJAX處理

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

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

　　請運行下面地址的示例，以觀察效果：

　　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這個工具，主要是給開發者通過可視化的方法，快速定制不同的主題的(地址：http://jquerymobile.com/themeroller/ )。現在支持從1.0版本中直接導入到1.1版本的ThemeRoller。

　　3、支持jQuery 1.7.1

　　4、AMD模塊支持

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

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

　　5、解決縮放的bug

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

　　6、可搜索的文檔支持

　　在1.1版本中，

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

　　展望jQuery mobile 1.2

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

　　1、彈出組件

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

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

　　2、加載外部頁面的鏈接

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

　　3、下載管理器

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

　　更多關于jQuery Mobile 1.2期望的新特性，請關注jQuery Mobile的blog:

　　http://jquerymobile.com/blog

　　小結

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

轉載于:https://www.cnblogs.com/huidaoli/p/3549731.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。