jQuery Mobile 1.2更新一覽 更好的表單調(diào)整機(jī)制
譯文教程說明
- 難度級別: 普通
- 操作時間: 15 分鐘
【51CTO獨家譯文】不久前，jQuery開發(fā)團(tuán)隊剛剛發(fā)布jQuery Mobile 1.2，新版本帶來了多項堪稱神奇的變化。在本文中，我將帶大家一起體驗新版本給開發(fā)者帶來的新工具，并對可能給jQuery Mobile應(yīng)用程序帶來影響的增強(qiáng)功能逐一加以剖析。閑話少敘，咱們馬上開始。
在開始之前，進(jìn)行下載自然是首要工作。大家可以訪問jQuery Mobile官方下載頁面，并根據(jù)自己的需求選擇要下載的項目。當(dāng)然，直接使用下文所提供的樣板代碼也是可行的。
另外，我們在開始之前再聊幾句由jQuery Mobile團(tuán)隊提供的下載生成器。盡管仍處于測試階段，但這款工具已經(jīng)允許用戶任何選擇想要下載的jQuery Mobile項目。無論是特殊事件、轉(zhuǎn)移、表單元素還是窗口部件，只要大家覺得用不上，都可以從下載列表中取消掉。這一設(shè)定對于那些專注于打造高性能應(yīng)用程序的開發(fā)者朋友來說還是很有意義的。
各類組件
組件是任何一款jQuery Mobile應(yīng)用程序的真正核心，可以說正是它們構(gòu)成了最直觀的的頁面內(nèi)容以及用戶交互必不可少的操作內(nèi)容。jQuery Mobile團(tuán)隊在各類組件的創(chuàng)建、測試及改進(jìn)工作上花費(fèi)了無數(shù)個小時，借以確保這些小工具能夠以***狀態(tài)滿足使用者的需要。在1.2版本中，開發(fā)團(tuán)隊拋出了一款令所有開發(fā)者為之瘋狂、同時也期盼已久的組件：彈出模塊。
彈出模塊
彈出模塊可以被看作是覆蓋于其它頁面及內(nèi)容之上的一小塊獨立頁面，它們一般被用于顯示工具提示、照片、地圖及其它額外內(nèi)容。這類信息雖然并沒有重要到值得額外開啟新頁面，但對用戶來說仍然是種不可或缺的描述及說明機(jī)制。jQuery Mobile 1.2在彈出模塊的實現(xiàn)方面堪稱***，下面我們將一同學(xué)習(xí)如何快速為應(yīng)用程序添加彈出模塊項目。
提醒各位，為了方便起見，后文中所使用的所有代碼都將使用以下HTML樣板。jQuery Mobile CSS及JS文件（包括jQuery）也通過jQuery CDN給出了鏈接，目的在于***程度簡化代碼內(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)用程序中添加彈出頁面需要分兩個步驟進(jìn)行。首先，大家需要設(shè)定一些條件來觸發(fā)彈出模塊，通常情況下我們可以使用鏈接、按鈕或者其它什么能與用戶交互的視覺元素。要觸發(fā)對應(yīng)元素，我們要為其添加以下屬性：
- data-rel="popup"
接下來，我們還需要設(shè)定顯示內(nèi)容。內(nèi)容多種多樣，從div、菜單、表單甚至是照片都能實現(xiàn)。內(nèi)容元素也要有自己的屬性：
- data-role="popup"
***，對于簡單的鏈接按鈕，其href屬性必須與顯示內(nèi)容的id相吻合。下面我們將以上步驟匯總起來，看看完整的實現(xiàn)過程：
- <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>
通過上述代碼，大家應(yīng)該會看到的頁面：
工具提示
現(xiàn)在大家已經(jīng)學(xué)會了如何創(chuàng)建彈出模塊，接著咱們再來嘗試其它一些可能性。最常見的形式當(dāng)然要數(shù)工具提示了：用戶點擊對應(yīng)按鈕、應(yīng)用即彈出與之相關(guān)的說明或補(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樣式來打造更為美觀的界面造型。這有助于大家理解彈出模塊在jQuery Mobile中的優(yōu)先級別，我們可以將其像頁面中的任何其它元素一樣進(jìn)行處理。
菜單
接下來我們再來嘗試一些更復(fù)雜的內(nèi)容：菜單。利用菜單實現(xiàn)頁面導(dǎo)航是目前***的開發(fā)模式，用戶能夠通過觸控隨意實現(xiàn)需要的功能。那么菜單與彈出模塊相結(jié)合會迸發(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版本中新加入的的可折疊列表功能，下面列舉一個簡單實例：
- <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é)果將無法正確顯示。大家親自嘗試就會明白其中的區(qū)別。
表單
另一套頗為流行的UX方案是在手勢懸念在特定頁面元素上方時顯示登錄表單，現(xiàn)在有了彈出模塊的支持，我們也能夠在jQuery Mobile的幫助下實現(xiàn)這類設(shè)計。下面列出的是一套簡單的用戶名/密碼輸入表單：
- <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)情況下，彈出模塊會居于屏幕正中、覆蓋掉觸發(fā)新框體的頁面元素。在接下來的三個實例中，我將具體解釋另一項可選屬性的作用——這就是data-position-to="window"，它作用于觸發(fā)彈出模塊的元素。大家可以將該屬性添加到上圖的Login按鈕當(dāng)中，看看結(jié)果會有怎樣的變化。
對話框
Web應(yīng)用通常需要具備與用戶交互的能力。我們剛剛討論了一種常見的實現(xiàn)方式：登錄表單。但在某些情況下，我們還需要為有疑問的用戶提供一些文字說明。面對這類需求，對話框就成了最***的解決方案；所有必要的提示信息都能以此為載體向用戶發(fā)布。那么對話框的代碼要如何編寫呢？下面咱們一起來看：
- <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)中，大家要注意我們所用到的另一項新屬性：data-overlay-theme="a"。該屬性適合使用在背景圖案色調(diào)較暗的對話框當(dāng)中。由于對當(dāng)前桌面主題影響較大，因此各位在將該屬性對話框與由ThemeRoller創(chuàng)建的主題相結(jié)合時一定要謹(jǐn)慎。
圖片
我已經(jīng)無數(shù)次聽到j(luò)Query Mobile開發(fā)人員的抱怨，他們對于優(yōu)秀圖片庫功能的渴望給我留下了深刻印象。盡管1.2版本中的彈出模塊還不足以***承擔(dān)少量圖片的處理工作，但它在圖片縮放及詳細(xì)瀏覽方面的功能已經(jīng)相當(dāng)令人滿意。更重要的是，其實現(xiàn)方式極為簡單；請看下列代碼：
- <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)。
這到底是如何實現(xiàn)的？在彈出模塊范疇內(nèi)，anchor標(biāo)簽所代表的屬性在運(yùn)行中與其它頁面位置屬性略有不同。具體而言，ui-btn-right類會將其它圖形元素放置于圖片的四角而非側(cè)面位置，同時data-icon與data-iconpos兩種屬性則允許我們把按鈕設(shè)定為類似于其它常用按鈕的外觀風(fēng)格。
如果大家有心，彈出模塊的功能還具備相當(dāng)大的挖掘潛力——包括顯示內(nèi)嵌視頻甚至互動地圖在內(nèi)的一系列視覺特性都能夠?qū)崿F(xiàn)。要了解詳細(xì)信息，大家不妨閱讀jQuery Mobile說明文檔中關(guān)于彈出模塊的具體解釋。
可折疊式列表視圖
1.2版本的另一項偉大特性就是賦予開發(fā)者將可折疊集合與列表視圖相結(jié)合的能力。我們將其稱為“可折疊式列表視圖”，jQuery Mobile團(tuán)隊還為大家?guī)砹巳碌呐涮坠ぞ摺＿@些新玩意要怎么用？問得好，下面我就向各位展示如何輕松創(chuàng)建列表并將其包含在可折疊集合當(dāng)中?？烧郫B式列表視圖還支持多種列表——相信大家一定迫不及待了，咱們馬上開始！
- <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還對原有功能進(jìn)行了一系列卓有成效的增強(qiáng)。下面我們就一起來看看其中***價值的主要內(nèi)容。
jQuery支持變化
1.2版本中幅度***的改進(jìn)當(dāng)數(shù)添加進(jìn)了對jQuery 1.8的支持。通過對Sizzle.js（jQuery選擇器引擎）的全面重寫，新版本獲得了顯著的性能提升，其它多個方面也得到相應(yīng)增強(qiáng)。
但jQuery Mobile團(tuán)隊最終決定放棄對jQuery 1.6的支持可能會給許多用戶帶來困擾。對于某些還在使用舊版本jQuery的開發(fā)者而言，這無疑是個壞消息。不過有得必有失，我們也沒必要對此過分耿耿于懷。
列表視圖自動分配器
如果大家所管理的列表在人物、地點或其它事物等內(nèi)容方面不斷進(jìn)行變化，那么肯定會對動態(tài)列表視圖標(biāo)題所帶來的編碼難題感到頭痛。好消息來了，jQuery Mobile為我們帶來了列表視圖自動分配器，大家從此得以遠(yuǎn)離耗時而無聊的枯燥工作。一個屬性，簡單搞定：
- data-autodividers="true"
屬性添加前的列表：
屬性添加后的列表
請注意，該屬性并不會進(jìn)行排序、分組或過濾等操作。這方面的功能可以借助插件來實現(xiàn)，感興趣的朋友可以訪問以下鏈接：http://andymatthews.net/code/jqm-tinysort/。
只讀列表
jQuery Mobile提供“只讀”列表視圖，但所謂只讀倒不能簡單理解成無法進(jìn)行互動操作。1.2版本刪除了列表漸變這一功能，每行內(nèi)容都采用平滑彩色方案，這應(yīng)該會給用戶帶來更好的視覺感受。
更好的表單元素寬度調(diào)整機(jī)制
1.2版本修復(fù)了表單元素方面的一個小問題，這樣子元素將不再會在某些情況下錯誤占用母元素的全部寬度。
添加額外設(shè)備
大家可能已經(jīng)注意到，幾乎每一天都有新設(shè)備被添加到支持列表當(dāng)中。jQuery Mobile團(tuán)隊始終兢兢業(yè)業(yè)地對這類新設(shè)備進(jìn)行測試。新添加的A級平臺列表包含以下設(shè)備/操作系統(tǒng)/瀏覽器：iOS 6、Android 4.1（果凍豆）、Tizen、Android版火狐以及Kindle Fire HD。
全部升級內(nèi)容清單
大家可以在jQuery Mobile的官方博客中找到關(guān)于此次升級的全部內(nèi)容清單（網(wǎng)址為：http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/#changelog）。
希望這一次的大規(guī)模更新有助于改善大家的應(yīng)用程序產(chǎn)品。請記住，jQuery Mobile團(tuán)隊就在各位身邊！如果朋友們在使用過程中需要某些額外功能，可以在下面的網(wǎng)址中創(chuàng)建話題、直接與項目開發(fā)人員們交涉（https://github.com/jquery/jquery-mobile）。當(dāng)然，能在他們提供的反饋資料中加入我們自己編寫的實用代碼就更好啦！
原文鏈接：
http://net.tutsplus.com/tutorials/javascript-ajax/the-latest-updates-to-jquery-mobile/
原文標(biāo)題：The Latest Updates to jQuery Mobile
【51CTO.com獨家特稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請發(fā)轉(zhuǎn)載郵件至zhousn#51CTO.com】
