jQuery Mobile 1.2更新一覽 更好的表單調(diào)整機(jī)制
譯文教程說(shuō)明
- 難度級(jí)別: 普通
- 操作時(shí)間: 15 分鐘
【51CTO獨(dú)家譯文】不久前，jQuery開(kāi)發(fā)團(tuán)隊(duì)剛剛發(fā)布jQuery Mobile 1.2，新版本帶來(lái)了多項(xiàng)堪稱(chēng)神奇的變化。在本文中，我將帶大家一起體驗(yàn)新版本給開(kāi)發(fā)者帶來(lái)的新工具，并對(duì)可能給jQuery Mobile應(yīng)用程序帶來(lái)影響的增強(qiáng)功能逐一加以剖析。閑話(huà)少敘，咱們馬上開(kāi)始。
在開(kāi)始之前，進(jìn)行下載自然是首要工作。大家可以訪(fǎng)問(wèn)jQuery Mobile官方下載頁(yè)面，并根據(jù)自己的需求選擇要下載的項(xiàng)目。當(dāng)然，直接使用下文所提供的樣板代碼也是可行的。
另外，我們?cè)陂_(kāi)始之前再聊幾句由jQuery Mobile團(tuán)隊(duì)提供的下載生成器。盡管仍處于測(cè)試階段，但這款工具已經(jīng)允許用戶(hù)任何選擇想要下載的jQuery Mobile項(xiàng)目。無(wú)論是特殊事件、轉(zhuǎn)移、表單元素還是窗口部件，只要大家覺(jué)得用不上，都可以從下載列表中取消掉。這一設(shè)定對(duì)于那些專(zhuān)注于打造高性能應(yīng)用程序的開(kāi)發(fā)者朋友來(lái)說(shuō)還是很有意義的。
各類(lèi)組件
組件是任何一款jQuery Mobile應(yīng)用程序的真正核心，可以說(shuō)正是它們構(gòu)成了最直觀(guān)的的頁(yè)面內(nèi)容以及用戶(hù)交互必不可少的操作內(nèi)容。jQuery Mobile團(tuán)隊(duì)在各類(lèi)組件的創(chuàng)建、測(cè)試及改進(jìn)工作上花費(fèi)了無(wú)數(shù)個(gè)小時(shí)，借以確保這些小工具能夠以***狀態(tài)滿(mǎn)足使用者的需要。在1.2版本中，開(kāi)發(fā)團(tuán)隊(duì)拋出了一款令所有開(kāi)發(fā)者為之瘋狂、同時(shí)也期盼已久的組件：彈出模塊。
彈出模塊
彈出模塊可以被看作是覆蓋于其它頁(yè)面及內(nèi)容之上的一小塊獨(dú)立頁(yè)面，它們一般被用于顯示工具提示、照片、地圖及其它額外內(nèi)容。這類(lèi)信息雖然并沒(méi)有重要到值得額外開(kāi)啟新頁(yè)面，但對(duì)用戶(hù)來(lái)說(shuō)仍然是種不可或缺的描述及說(shuō)明機(jī)制。jQuery Mobile 1.2在彈出模塊的實(shí)現(xiàn)方面堪稱(chēng)***，下面我們將一同學(xué)習(xí)如何快速為應(yīng)用程序添加彈出模塊項(xiàng)目。
提醒各位，為了方便起見(jiàn)，后文中所使用的所有代碼都將使用以下HTML樣板。jQuery Mobile CSS及JS文件（包括jQuery）也通過(guò)jQuery CDN給出了鏈接，目的在于***程度簡(jiǎn)化代碼內(nèi)容。
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile 1.2</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
- </head>
- <body>
- <div data-role="content">
- <!-- your content goes here -->
- </div>
- </body>
- </html>
在應(yīng)用程序中添加彈出頁(yè)面需要分兩個(gè)步驟進(jìn)行。首先，大家需要設(shè)定一些條件來(lái)觸發(fā)彈出模塊，通常情況下我們可以使用鏈接、按鈕或者其它什么能與用戶(hù)交互的視覺(jué)元素。要觸發(fā)對(duì)應(yīng)元素，我們要為其添加以下屬性：
- data-rel="popup"
接下來(lái)，我們還需要設(shè)定顯示內(nèi)容。內(nèi)容多種多樣，從div、菜單、表單甚至是照片都能實(shí)現(xiàn)。內(nèi)容元素也要有自己的屬性：
- data-role="popup"
***，對(duì)于簡(jiǎn)單的鏈接按鈕，其href屬性必須與顯示內(nèi)容的id相吻合。下面我們將以上步驟匯總起來(lái)，看看完整的實(shí)現(xiàn)過(guò)程：
- <a href="#simplepopup" data-rel="popup">Open Popup</a>
- <div data-role="popup" id="simplepopup">
- <p>This is a completely basic popup, no options set.<p>
- </div>
通過(guò)上述代碼，大家應(yīng)該會(huì)看到的頁(yè)面：
工具提示
現(xiàn)在大家已經(jīng)學(xué)會(huì)了如何創(chuàng)建彈出模塊，接著咱們?cè)賮?lái)嘗試其它一些可能性。最常見(jiàn)的形式當(dāng)然要數(shù)工具提示了：用戶(hù)點(diǎn)擊對(duì)應(yīng)按鈕、應(yīng)用即彈出與之相關(guān)的說(shuō)明或補(bǔ)充文字。代碼設(shè)置與之前一樣：
- <a href="#tooltip" data-rel="popup" data-role="button">Find out more</a>
- <div data-role="popup" id="tooltip" data-theme="e">
- <p>You found out more!.</p>
- </div>
這一次，我們使用jQuery Mobile中的e樣式來(lái)打造更為美觀(guān)的界面造型。這有助于大家理解彈出模塊在jQuery Mobile中的優(yōu)先級(jí)別，我們可以將其像頁(yè)面中的任何其它元素一樣進(jìn)行處理。
菜單
接下來(lái)我們?cè)賮?lái)嘗試一些更復(fù)雜的內(nèi)容：菜單。利用菜單實(shí)現(xiàn)頁(yè)面導(dǎo)航是目前***的開(kāi)發(fā)模式，用戶(hù)能夠通過(guò)觸控隨意實(shí)現(xiàn)需要的功能。那么菜單與彈出模塊相結(jié)合會(huì)迸發(fā)出怎樣的火花？
- <a href="#menu" data-rel="popup" data-role="button">Menu</a>
- <div data-role="popup" id="menu" data-theme="a">
- <ul data-role="listview" data-theme="c" data-inset="true">
- <li data-role="divider" data-theme="a">My Menu</li>
- <li>Unlinked</li>
- <li><a href="methods.html">Linked</a></li>
- <li><a href="methods.html">With count</a><span class="ui-li-count">42</span></a></li>
- </ul>
- </div>
得到的輸出效果應(yīng)該如下圖所示：
大家也可以利用1.2版本中新加入的的可折疊列表功能，下面列舉一個(gè)簡(jiǎn)單實(shí)例：
- <a href="#nestedmenu" data-rel="popup" data-role="button">Nested Menu</a>
- <div data-role="popup" id="nestedmenu" data-theme="none">
- <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
- <div data-role="collapsible" data-inset="false">
- <h2>Colors</h2>
- <ul data-role="listview">
- <li><a href="#">Red</a></li>
- <li><a href="#">Blue</a></li>
- </ul>
- </div>
- <div data-role="collapsible" data-inset="false">
- <h2>Shapes</h2>
- <ul data-role="listview">
- <li><a href="#">Circle</a></li>
- <li><a href="#">Square</a></li>
- </ul>
- </div>
- </div>
- </div>
輸出結(jié)果如下所示：
這里需要注意的是listview或者列表邊角必須符合data-inset="true"，否則結(jié)果將無(wú)法正確顯示。大家親自嘗試就會(huì)明白其中的區(qū)別。
表單
另一套頗為流行的UX方案是在手勢(shì)懸念在特定頁(yè)面元素上方時(shí)顯示登錄表單，現(xiàn)在有了彈出模塊的支持，我們也能夠在jQuery Mobile的幫助下實(shí)現(xiàn)這類(lèi)設(shè)計(jì)。下面列出的是一套簡(jiǎn)單的用戶(hù)名/密碼輸入表單：
- <a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a>
- <div data-role="popup" id="login" data-theme="a">
- <form style="padding:10px 20px;">
- <h3>Please sign in</h3>
- <label for="un" class="ui-hidden-accessible">Username:</label>
- <input type="js" name="user" id="un" placeholder="username" />
- <label for="pw" class="ui-hidden-accessible">Password:</label>
- <input type="password" name="pass" id="pw" placeholder="password" />
- <button type="submit" data-theme="b">Sign in</button>
- </form>
- </div>
其輸出效果如下所示：
在默認(rèn)情況下，彈出模塊會(huì)居于屏幕正中、覆蓋掉觸發(fā)新框體的頁(yè)面元素。在接下來(lái)的三個(gè)實(shí)例中，我將具體解釋另一項(xiàng)可選屬性的作用——這就是data-position-to="window"，它作用于觸發(fā)彈出模塊的元素。大家可以將該屬性添加到上圖的Login按鈕當(dāng)中，看看結(jié)果會(huì)有怎樣的變化。
對(duì)話(huà)框
Web應(yīng)用通常需要具備與用戶(hù)交互的能力。我們剛剛討論了一種常見(jiàn)的實(shí)現(xiàn)方式：登錄表單。但在某些情況下，我們還需要為有疑問(wèn)的用戶(hù)提供一些文字說(shuō)明。面對(duì)這類(lèi)需求，對(duì)話(huà)框就成了最***的解決方案；所有必要的提示信息都能以此為載體向用戶(hù)發(fā)布。那么對(duì)話(huà)框的代碼要如何編寫(xiě)呢？下面咱們一起來(lái)看：
- <a href="#dialog" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Dialog</a>
- <div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c">
- <div data-role="header" data-theme="a">
- <h1>Delete Page?</h1>
- </div>
- <div data-role="content" data-theme="d">
- <h3>Are you sure you want to delete this page?</h3>
- <p>This action cannot be undone.</p>
- <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No</a>
- <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Yes, Delete it</a>
- </div>
- </div>
在彈出內(nèi)容容器當(dāng)中，大家要注意我們所用到的另一項(xiàng)新屬性：data-overlay-theme="a"。該屬性適合使用在背景圖案色調(diào)較暗的對(duì)話(huà)框當(dāng)中。由于對(duì)當(dāng)前桌面主題影響較大，因此各位在將該屬性對(duì)話(huà)框與由ThemeRoller創(chuàng)建的主題相結(jié)合時(shí)一定要謹(jǐn)慎。
圖片
我已經(jīng)無(wú)數(shù)次聽(tīng)到j(luò)Query Mobile開(kāi)發(fā)人員的抱怨，他們對(duì)于優(yōu)秀圖片庫(kù)功能的渴望給我留下了深刻印象。盡管1.2版本中的彈出模塊還不足以***承擔(dān)少量圖片的處理工作，但它在圖片縮放及詳細(xì)瀏覽方面的功能已經(jīng)相當(dāng)令人滿(mǎn)意。更重要的是，其實(shí)現(xiàn)方式極為簡(jiǎn)單；請(qǐng)看下列代碼：
- <a href="#photo" data-rel="popup" data-position-to="window" data-role="button" data-transition="fade">Photo</a>
- <div data-role="popup" id="photo" data-overlay-theme="a" data-theme="d" data-corners="false">
- <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="nojs" class="ui-btn-right">Close</a><img src="http://lorempixel.com/450/300/food/" />
- </div>
以上代碼為我們提供了一套居中式圖片顯示模塊，窗口關(guān)閉按鈕也已經(jīng)包含在內(nèi)。
這到底是如何實(shí)現(xiàn)的？在彈出模塊范疇內(nèi)，anchor標(biāo)簽所代表的屬性在運(yùn)行中與其它頁(yè)面位置屬性略有不同。具體而言，ui-btn-right類(lèi)會(huì)將其它圖形元素放置于圖片的四角而非側(cè)面位置，同時(shí)data-icon與data-iconpos兩種屬性則允許我們把按鈕設(shè)定為類(lèi)似于其它常用按鈕的外觀(guān)風(fēng)格。
如果大家有心，彈出模塊的功能還具備相當(dāng)大的挖掘潛力——包括顯示內(nèi)嵌視頻甚至互動(dòng)地圖在內(nèi)的一系列視覺(jué)特性都能夠?qū)崿F(xiàn)。要了解詳細(xì)信息，大家不妨閱讀jQuery Mobile說(shuō)明文檔中關(guān)于彈出模塊的具體解釋。
可折疊式列表視圖
1.2版本的另一項(xiàng)偉大特性就是賦予開(kāi)發(fā)者將可折疊集合與列表視圖相結(jié)合的能力。我們將其稱(chēng)為“可折疊式列表視圖”，jQuery Mobile團(tuán)隊(duì)還為大家?guī)?lái)了全新的配套工具。這些新玩意要怎么用？問(wèn)得好，下面我就向各位展示如何輕松創(chuàng)建列表并將其包含在可折疊集合當(dāng)中。可折疊式列表視圖還支持多種列表——相信大家一定迫不及待了，咱們馬上開(kāi)始！
- <div data-role="collapsible" data-theme="b" data-content-theme="c">
- <h2>Favorite Spice Girl?</h2>
- <ul data-role="listview">
- <li><a href="index.html">Posh</a></li>
- <li><a href="index.html">Scary</a></li>
- <li><a href="index.html">Sporty</a></li>
- <li><a href="index.html">Baby</a></li>
- <li><a href="index.html">Ginger</a></li>
- </ul>
- </div>
上述代碼所輸出的可折疊式列表視圖如下所示：
增強(qiáng)功能
除了新的功能組件，jQuery Mobile 1.2還對(duì)原有功能進(jìn)行了一系列卓有成效的增強(qiáng)。下面我們就一起來(lái)看看其中***價(jià)值的主要內(nèi)容。
jQuery支持變化
1.2版本中幅度***的改進(jìn)當(dāng)數(shù)添加進(jìn)了對(duì)jQuery 1.8的支持。通過(guò)對(duì)Sizzle.js（jQuery選擇器引擎）的全面重寫(xiě)，新版本獲得了顯著的性能提升，其它多個(gè)方面也得到相應(yīng)增強(qiáng)。
但jQuery Mobile團(tuán)隊(duì)最終決定放棄對(duì)jQuery 1.6的支持可能會(huì)給許多用戶(hù)帶來(lái)困擾。對(duì)于某些還在使用舊版本jQuery的開(kāi)發(fā)者而言，這無(wú)疑是個(gè)壞消息。不過(guò)有得必有失，我們也沒(méi)必要對(duì)此過(guò)分耿耿于懷。
列表視圖自動(dòng)分配器
如果大家所管理的列表在人物、地點(diǎn)或其它事物等內(nèi)容方面不斷進(jìn)行變化，那么肯定會(huì)對(duì)動(dòng)態(tài)列表視圖標(biāo)題所帶來(lái)的編碼難題感到頭痛。好消息來(lái)了，jQuery Mobile為我們帶來(lái)了列表視圖自動(dòng)分配器，大家從此得以遠(yuǎn)離耗時(shí)而無(wú)聊的枯燥工作。一個(gè)屬性，簡(jiǎn)單搞定：
- data-autodividers="true"
屬性添加前的列表：
屬性添加后的列表
請(qǐng)注意，該屬性并不會(huì)進(jìn)行排序、分組或過(guò)濾等操作。這方面的功能可以借助插件來(lái)實(shí)現(xiàn)，感興趣的朋友可以訪(fǎng)問(wèn)以下鏈接：http://andymatthews.net/code/jqm-tinysort/。
只讀列表
jQuery Mobile提供“只讀”列表視圖，但所謂只讀倒不能簡(jiǎn)單理解成無(wú)法進(jìn)行互動(dòng)操作。1.2版本刪除了列表漸變這一功能，每行內(nèi)容都采用平滑彩色方案，這應(yīng)該會(huì)給用戶(hù)帶來(lái)更好的視覺(jué)感受。
更好的表單元素寬度調(diào)整機(jī)制
1.2版本修復(fù)了表單元素方面的一個(gè)小問(wèn)題，這樣子元素將不再會(huì)在某些情況下錯(cuò)誤占用母元素的全部寬度。
添加額外設(shè)備
大家可能已經(jīng)注意到，幾乎每一天都有新設(shè)備被添加到支持列表當(dāng)中。jQuery Mobile團(tuán)隊(duì)始終兢兢業(yè)業(yè)地對(duì)這類(lèi)新設(shè)備進(jìn)行測(cè)試。新添加的A級(jí)平臺(tái)列表包含以下設(shè)備/操作系統(tǒng)/瀏覽器：iOS 6、Android 4.1（果凍豆）、Tizen、Android版火狐以及Kindle Fire HD。
全部升級(jí)內(nèi)容清單
大家可以在jQuery Mobile的官方博客中找到關(guān)于此次升級(jí)的全部?jī)?nèi)容清單（網(wǎng)址為：http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/#changelog）。
希望這一次的大規(guī)模更新有助于改善大家的應(yīng)用程序產(chǎn)品。請(qǐng)記住，jQuery Mobile團(tuán)隊(duì)就在各位身邊！如果朋友們?cè)谑褂眠^(guò)程中需要某些額外功能，可以在下面的網(wǎng)址中創(chuàng)建話(huà)題、直接與項(xiàng)目開(kāi)發(fā)人員們交涉（https://github.com/jquery/jquery-mobile）。當(dāng)然，能在他們提供的反饋資料中加入我們自己編寫(xiě)的實(shí)用代碼就更好啦！
原文鏈接：
http://net.tutsplus.com/tutorials/javascript-ajax/the-latest-updates-to-jquery-mobile/
原文標(biāo)題：The Latest Updates to jQuery Mobile
【51CTO.com獨(dú)家特稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請(qǐng)發(fā)轉(zhuǎn)載郵件至zhousn#51CTO.com】
