最新版本的jQuery Mobile 1.1本月13號剛剛發布，帶給我們了最新的強大特和代碼提升。在這篇文章中，我們將要快速的介紹jQuery mobile的新特性及其移動開發人員需要了解的所有內容。准備好和我們一起體驗jQuery mobile吧！
在這個文章中，我們將要介紹如下內容：
- 改良的固定header和footer
- 提高的頁面過渡效果，和倆個新開發的過渡效果
- 加載“spinner”和文本提升
- 漂亮的迷你表單元素
- 更漂亮的翻轉開關切換
- 更好的滑動選擇
- 禁止為整個頁面標簽優化和AJAX處理
- 其它相關的提升和修改
在本篇文章結尾，你會看到一些jQuery Mobile 1.2的新特性和組件。
首先我們開始介紹jQuery mobile的標題特性，大大的提升了header和footer工具條。
Toolbar的巨大改良
固定的toolbar是用來固定頁面頂端和低端的工具條，通過添加data-position="fixed"來添加到頁頭和頁尾。
最簡單的方式去創建一個固定的頁面元素是使用CSS position:fixed 。因為移動瀏覽器對於這個屬性的支持不是很完整，所以在老版本中通過動態的重新定位來實現功能。雖然可以工作，但是不是非常完美。
很 幸運的是，瀏覽器的支持在最近已經被大大的增強了。使用version1.1，jQuery mobile團隊已經完整的重新設計了toolbar，開始使用position:fixed。這樣使得toolbar更加的流暢。對於不支持 position:fixed的瀏覽器，例如，Safari in iOS4.3。整個框架會fallback到一般的靜態位置的toolbar。
如果你希望重新使得它動態，你可以考慮使用一些polyfill。
點擊下面的演示，看看新版本和舊版本的區別吧。如果需要看到效果，請使用現代瀏覽器，或者桌面瀏覽器。
而且toolbar現在擁有了一系列的選項和方法幫助你自定行為。包括visibleOnPageShow選項來控制是否頁面初始的時候顯示toolbar。tapToggle選項來打開或者關閉"toggle-on-tap"特性。show，hide和toggle方法可以使用代碼控制顯示和隱藏toolbar。
這 里還有一個很重要的小變動，關於全屏定位。在jQmobile 1.0中你可以通過添加data-fullscreen="true“來實現toolbar的"fullscreen"模式。在1.1中，你現在需要添加 這個屬性到獨立的header和footer容器中而不是頁面容器。
更多信息：這里有一些已知的position:fixed和Android 2.2/2.3的問題。請查看詳細文檔。
更多信息：jQMobile1.0使用CSS overflow-scrolling:touch來提升固定的toolbar。因為1.1使用真正的position:fixed，overflow-scrolling:touch已經被刪除了。所以這個屬性不再有效。
更流暢，更棒的頁面過渡效果
jQMobile1.1中最好的一個變化在於頁面間更加流暢的過渡效果。因為jQuery Mobile框架工作的方式，需要先滾動到頂端在執行頁面過渡效果。下面是整個流程：
- 用戶向下滾動到目前頁面
- 點擊一個link查看新頁面
- jQuery mobile滾動到本頁面的頂端
- jQuery mobile使用過渡效果來實現新頁面
這個過程比較不完美，特別對於比較慢的移動瀏覽器：
因為無法避免滾動。所以jquery mobile團隊使用了如下方式來處理：
- 用戶向下滾動到目前頁面
- 點擊一個link查看新頁面
- jQuery Mobile開始執行過渡效果
- 在一個合適的時候淡出fadeout頁面，jQuery mobile執行滾動到本頁面的頂端（頁面為空），然后在淡入fadein頁面。
- jQuery mobile完成過渡效果來實現新頁面
大家看到不同的地方在於過渡時機，頁面淡出后內容變少，這個時候滾動速度就更快。因為沒有內容，所以基本用戶看不到滾動效果。
大家可以看看如下的對比演示。
或者到jQuery Mobile網站上看演示：
- jQuery Mobile 1.0's transitions (without the fade)
- jQuery Mobile 1.1's transitions (with the fade)
更多信息：一個使用這種新的fade機制的例外過渡效果是slide，這個過渡效果使用老的非淡出式的方式。因為不使用fade效果更好，所以你可以考慮使用slidefade來得到更好的性能
更多信息：因為一些移動端瀏覽器的限制，例如，Android2.x，fade是唯一支持的特效。
兩個新添加的頁面過渡效果
除了1.0支持的slide, slideup, slidedown, pop, fade, 和 flip，1.1添加了2個過渡效果：
turn 和 flow
效果如下：
更好更靈活的”loading“旋轉效果
"加載中..."效果已經被重新設計，缺省依舊沒有文字。你可以設置更多選項：
$mobile.loadingMessageTextVisible：是否顯示Loading文字（boolean：缺省為false）
$mobile.loadingMessageTheme：是否使用特定的主題顯示信息框。缺省使用”a”，前提是 $.mobile.loadingMessageTextVisible為 true。
$mobile.pageLoadErrorMessageTheme：使用錯誤信息的主題
你可以在mobileinit方法中全局定義，如下：
$(document).bind( "mobileinit", function() {
$.mobile.loadingMessageTextVisible = true;
} );
更多信息：和前面版本一樣，你可以使用$.mobile.loadingMessage顯示加載信息，$.mobile.pageLoadErrorMessage顯示錯誤信息。
如果你調用 $.mobile.showPageLoadingMsg()來顯示加載信息，你可以傳遞3個參數在自定義信息和“加載中”：
- 信息框主題
- 信息框文字
- 是否隱藏圖片，缺省false
toolbar中使用的迷你表單元素
現在你可以添加一些data-mini="true"到表單元素中來創建更小的表單元素，非常適合添加到toolbar中。這個頁面可以查看所有支持的元素及其正常版本。
更漂亮的翻轉開關切換
重新定義了開關的樣式，看起來更緊湊。更接近移動平台上的本地開關樣式。
更好的滑動選擇
區域選擇現在支持了step屬性。你可以添加step=5到<input type="range"/>來生成一個滑動選擇。
另外一個加強是提供了data-hightlight="true"屬性，會提供了一個輸入框告訴用戶選擇的數值，如下圖：
阻止元素被針對移動設備改良
因 為jQuery Mobile缺省會搜索頁面元素，將它們自動改成針對移動或者觸摸設備更有好的元素。例如，滑動選擇，復選框或者list view等。同時也添加AJAX到link和button，但是有的時候我們不希望它這樣處理，例如，我們自己開發自己的頁面組件。
以往我們都用一些小技巧，例如， keepNative 選項，initSelector 屬性等，在jQuery Mobile1.1中，我們可以使用data-enhance="false"來阻止jqMobile處理。
<div id="myContainer" data-enhance="false">
<!-- Enhancement and Ajax handling disabled for all elements inside this div -->
</div>
並且在全局選項中指定：
$(document).bind( "mobileinit", function() {
$.mobile.ignoreContentEnabled = true;
} );
針對整個容器關閉AJAX處理
在過去我們可以針對表單或者鏈接來添加data-ajax="false"屬性，禁止AJAX處理指定的對象表單或者鏈接。在jQuery mobile 1.1中，我們可以針對一個容易處理，如下：
<div id="myContainer" data-ajax="false">
<!-- Ajax handling disabled for all elements inside this div -->
</div>
和data-enhance屬性一樣，你也需要在mobileinit中指定ignoreContentEnabled為true。
其它變化
- 更清楚的缺省主題
- 更容易的主題Roller
- 支持jQuery1.7.1
- AMD模塊支持
- 解決縮放bug
- 可搜索的文檔
jQuery mobile 1.2特性
這里列出計划中的幾個特性：
彈出組件
允許你講一個div轉化為一個彈出組件，data-role="popup"，這里查看演示
無新頁面加載取得頁面內容
幫助你取得鏈接內容加載到本地的容器中
下載Builder
幫助你下載你需要的組件，效果等等。
總價
這篇文章中我們介紹了jQuery mobile 1.1的新特性，你學習了toolbar的加強，過渡效果的加載和新過渡效果等。還介紹了1.2中的一些計划開發的特性。希望對於大家開發jQuery有幫助。