最新版本的jQuery Mobile 1.1本月13號剛剛發(fā)布，帶給我們了最新的強(qiáng)大特和代碼提升。在這篇文章中，我們將要快速的介紹jQuery mobile的新特性及其移動開發(fā)人員需要了解的所有內(nèi)容。準(zhǔn)備好和我們一起體驗jQuery mobile吧！

在這個文章中，我們將要介紹如下內(nèi)容：

• 改良的固定header和footer
• 提高的頁面過渡效果，和倆個新開發(fā)的過渡效果?
• 加載“spinner”和文本提升
• 漂亮的迷你表單元素
• 更漂亮的翻轉(zhuǎn)開關(guān)切換
• 更好的滑動選擇
• 禁止為整個頁面標(biāo)簽優(yōu)化和AJAX處理
• 其它相關(guān)的提升和修改

在本篇文章結(jié)尾，你會看到一些jQuery Mobile 1.2的新特性和組件。

首先我們開始介紹jQuery mobile的標(biāo)題特性，大大的提升了header和footer工具條。

Toolbar的巨大改良

固定的toolbar是用來固定頁面頂端和低端的工具條，通過添加data-position="fixed"來添加到頁頭和頁尾。

最簡單的方式去創(chuàng)建一個固定的頁面元素是使用CSS position:fixed 。因為移動瀏覽器對于這個屬性的支持不是很完整，所以在老版本中通過動態(tài)的重新定位來實現(xiàn)功能。雖然可以工作，但是不是非常完美。

很 幸運的是，瀏覽器的支持在最近已經(jīng)被大大的增強(qiáng)了。使用version1.1，jQuery mobile團(tuán)隊已經(jīng)完整的重新設(shè)計了toolbar，開始使用position:fixed。這樣使得toolbar更加的流暢。對于不支持 position:fixed的瀏覽器，例如，Safari in iOS4.3。整個框架會fallback到一般的靜態(tài)位置的toolbar。

如果你希望重新使得它動態(tài)，你可以考慮使用一些polyfill。

點擊下面的演示，看看新版本和舊版本的區(qū)別吧。如果需要看到效果，請使用現(xiàn)代瀏覽器，或者桌面瀏覽器。

jQuery1.0演示? jQuery1.1演示

而且toolbar現(xiàn)在擁有了一系列的選項和方法幫助你自定行為。包括visibleOnPageShow選項來控制是否頁面初始的時候顯示toolbar。tapToggle選項來打開或者關(guān)閉"toggle-on-tap"特性。show，hide和toggle方法可以使用代碼控制顯示和隱藏toolbar。

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

更多信息：這里有一些已知的position:fixed和Android 2.2/2.3的問題。請查看詳細(xì)文檔。

更多信息：jQMobile1.0使用CSS overflow-scrolling:touch來提升固定的toolbar。因為1.1使用真正的position:fixed，overflow-scrolling:touch已經(jīng)被刪除了。所以這個屬性不再有效。

更流暢，更棒的頁面過渡效果

jQMobile1.1中最好的一個變化在于頁面間更加流暢的過渡效果。因為jQuery Mobile框架工作的方式，需要先滾動到頂端在執(zhí)行頁面過渡效果。下面是整個流程：

用戶向下滾動到目前頁面

點擊一個link查看新頁面

jQuery mobile滾動到本頁面的頂端

jQuery mobile使用過渡效果來實現(xiàn)新頁面

這個過程比較不完美，特別對于比較慢的移動瀏覽器：

因為無法避免滾動。所以jquery mobile團(tuán)隊使用了如下方式來處理：

用戶向下滾動到目前頁面

點擊一個link查看新頁面

jQuery Mobile開始執(zhí)行過渡效果

在一個合適的時候淡出fadeout頁面，jQuery mobile執(zhí)行滾動到本頁面的頂端（頁面為空），然后在淡入fadein頁面。

jQuery mobile完成過渡效果來實現(xiàn)新頁面

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

大家可以看看如下的對比演示。

jQuery1.0演示? jQuery1.1演示

或者到j(luò)Query Mobile網(wǎng)站上看演示：

• jQuery Mobile 1.0's transitions (without the fade)
• jQuery Mobile 1.1's transitions (with the fade)

更多信息：一個使用這種新的fade機(jī)制的例外過渡效果是slide，這個過渡效果使用老的非淡出式的方式。因為不使用fade效果更好，所以你可以考慮使用slidefade來得到更好的性能

更多信息：因為一些移動端瀏覽器的限制，例如，Android2.x，fade是唯一支持的特效。

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

除了1.0支持的slide, slideup, slidedown, pop, fade, 和 flip，1.1添加了2個過渡效果：

turn 和 flow

效果如下：

過渡效果turn演示? 過渡效果flow演示

更好更靈活的”loading“旋轉(zhuǎn)效果

"加載中..."效果已經(jīng)被重新設(shè)計，缺省依舊沒有文字。你可以設(shè)置更多選項：

$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顯示錯誤信息。

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

• 信息框主題
• 信息框文字
• 是否隱藏圖片，缺省false

下面是演示

loading演示

toolbar中使用的迷你表單元素

現(xiàn)在你可以添加一些data-mini="true"到表單元素中來創(chuàng)建更小的表單元素，非常適合添加到toolbar中。這個頁面可以查看所有支持的元素及其正常版本。

更漂亮的翻轉(zhuǎn)開關(guān)切換

重新定義了開關(guān)的樣式，看起來更緊湊。更接近移動平臺上的本地開關(guān)樣式。

jQuery1.0演示? jQuery1.1演示

更好的滑動選擇

區(qū)域選擇現(xiàn)在支持了step屬性。你可以添加step=5到<input type="range"/>來生成一個滑動選擇。

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

查看演示

阻止元素被針對移動設(shè)備改良

因 為jQuery Mobile缺省會搜索頁面元素，將它們自動改成針對移動或者觸摸設(shè)備更有好的元素。例如，滑動選擇，復(fù)選框或者list view等。同時也添加AJAX到link和button，但是有的時候我們不希望它這樣處理，例如，我們自己開發(fā)自己的頁面組件。

以往我們都用一些小技巧，例如， 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;
} );

查看演示

針對整個容器關(guān)閉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轉(zhuǎn)化為一個彈出組件，data-role="popup"，這里查看演示

無新頁面加載取得頁面內(nèi)容

幫助你取得鏈接內(nèi)容加載到本地的容器中

下載Builder

幫助你下載你需要的組件，效果等等。

總價

這篇文章中我們介紹了jQuery mobile 1.1的新特性，你學(xué)習(xí)了toolbar的加強(qiáng)，過渡效果的加載和新過渡效果等。還介紹了1.2中的一些計劃開發(fā)的特性。希望對于大家開發(fā)jQuery有幫助。

轉(zhuǎn)載于:https://www.cnblogs.com/gbin1/archive/2012/04/19/2457278.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的jQuery Mobile 1.1 : 更流畅，更快捷，更实用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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