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