天下高月小说,有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

jQueryMobile1.2更新一覽更好的表單調(diào)整機制

教程說明

難度級別: 普通
操作時間: 15 分鐘

【獨家譯文】不久前，jQuery開發(fā)團隊剛剛發(fā)布jQuery Mobile 1.2，新版本帶來了多項堪稱神奇的變化。在本文中，我將帶大家一起體驗新版本給開發(fā)者帶來的新工具，并對可能給jQuery Mobile應(yīng)用程序帶來影響的增強功能逐一加以剖析。閑話少敘，咱們馬上開始。

十余年的曲江網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整曲江建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“曲江網(wǎng)站設(shè)計”,“曲江網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

在開始之前，進行下載自然是首要工作。大家可以訪問jQuery Mobile官方下載頁面，并根據(jù)自己的需求選擇要下載的項目。當(dāng)然，直接使用下文所提供的樣板代碼也是可行的。

另外，我們在開始之前再聊幾句由jQuery Mobile團隊提供的下載生成器。盡管仍處于測試階段，但這款工具已經(jīng)允許用戶任何選擇想要下載的jQuery Mobile項目。無論是特殊事件、轉(zhuǎn)移、表單元素還是窗口部件，只要大家覺得用不上，都可以從下載列表中取消掉。這一設(shè)定對于那些專注于打造高性能應(yīng)用程序的開發(fā)者朋友來說還是很有意義的。

各類組件

組件是任何一款jQuery Mobile應(yīng)用程序的真正核心，可以說正是它們構(gòu)成了最直觀的的頁面內(nèi)容以及用戶交互必不可少的操作內(nèi)容。jQuery Mobile團隊在各類組件的創(chuàng)建、測試及改進工作上花費了無數(shù)個小時，借以確保這些小工具能夠以***狀態(tài)滿足使用者的需要。在1.2版本中，開發(fā)團隊拋出了一款令所有開發(fā)者為之瘋狂、同時也期盼已久的組件：彈出模塊。

彈出模塊

彈出模塊可以被看作是覆蓋于其它頁面及內(nèi)容之上的一小塊獨立頁面，它們一般被用于顯示工具提示、照片、地圖及其它額外內(nèi)容。這類信息雖然并沒有重要到值得額外開啟新頁面，但對用戶來說仍然是種不可或缺的描述及說明機制。jQuery Mobile 1.2在彈出模塊的實現(xiàn)方面堪稱***，下面我們將一同學(xué)習(xí)如何快速為應(yīng)用程序添加彈出模塊項目。

提醒各位，為了方便起見，后文中所使用的所有代碼都將使用以下HTML樣板。jQuery Mobile CSS及JS文件（包括jQuery）也通過jQuery CDN給出了鏈接，目的在于***程度簡化代碼內(nèi)容。

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
         
  
  
      jQuery Mobile 1.2

在應(yīng)用程序中添加彈出頁面需要分兩個步驟進行。首先，大家需要設(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)過程：

 
 
 
 
  
  
  
  Open Popup   
  
  
     
  
  
      This is a completely basic popup, no options set.

通過上述代碼，大家應(yīng)該會看到的頁面：

工具提示

現(xiàn)在大家已經(jīng)學(xué)會了如何創(chuàng)建彈出模塊，接著咱們再來嘗試其它一些可能性。最常見的形式當(dāng)然要數(shù)工具提示了：用戶點擊對應(yīng)按鈕、應(yīng)用即彈出與之相關(guān)的說明或補充文字。代碼設(shè)置與之前一樣：

 
 
 
 
  
  
  
  Find out more   
  
  
     
  
  
      You found out more!.

這一次，我們使用jQuery Mobile中的e樣式來打造更為美觀的界面造型。這有助于大家理解彈出模塊在jQuery Mobile中的優(yōu)先級別，我們可以將其像頁面中的任何其它元素一樣進行處理。

菜單

接下來我們再來嘗試一些更復(fù)雜的內(nèi)容：菜單。利用菜單實現(xiàn)頁面導(dǎo)航是目前***的開發(fā)模式，用戶能夠通過觸控隨意實現(xiàn)需要的功能。那么菜單與彈出模塊相結(jié)合會迸發(fā)出怎樣的火花？

 
 
 
 
  
  
  
  Menu   
  
  
     
  
  
         
  
  
          My Menu   
  
  
          
Unlinked   
  
  
          
Linked   
  
  
          
With count42

得到的輸出效果應(yīng)該如下圖所示：

大家也可以利用1.2版本中新加入的的可折疊列表功能，下面列舉一個簡單實例：

 
 
 
 
  
  
  
  Nested Menu   
  
  
     
  
  
         
  
  
             
  
  
              Colors
   
  
  
                 
  
  
                  
Red   
  
  
                  
Blue

Shapes

Circle

Square

輸出結(jié)果如下所示：

這里需要注意的是listview或者列表邊角必須符合data-inset="true"，否則結(jié)果將無法正確顯示。大家親自嘗試就會明白其中的區(qū)別。

表單

另一套頗為流行的UX方案是在手勢懸念在特定頁面元素上方時顯示登錄表單，現(xiàn)在有了彈出模塊的支持，我們也能夠在jQuery Mobile的幫助下實現(xiàn)這類設(shè)計。下面列出的是一套簡單的用戶名/密碼輸入表單：

 
 
 
 
  
  
  
  Login   
  
  
     
  
  
         
  
  
          Please sign in
   
  
  
          Username:   
  
  
             
  
  
          Password:   
  
  
             
  
  
          Sign in

在默認(rèn)情況下，彈出模塊會居于屏幕正中、覆蓋掉觸發(fā)新框體的頁面元素。在接下來的三個實例中，我將具體解釋另一項可選屬性的作用——這就是data-position-to="window"，它作用于觸發(fā)彈出模塊的元素。大家可以將該屬性添加到上圖的Login按鈕當(dāng)中，看看結(jié)果會有怎樣的變化。

對話框

Web應(yīng)用通常需要具備與用戶交互的能力。我們剛剛討論了一種常見的實現(xiàn)方式：登錄表單。但在某些情況下，我們還需要為有疑問的用戶提供一些文字說明。面對這類需求，對話框就成了最***的解決方案；所有必要的提示信息都能以此為載體向用戶發(fā)布。那么對話框的代碼要如何編寫呢？下面咱們一起來看：

新聞中心

教程說明

各類組件

彈出模塊

工具提示

菜單

Colors

Shapes

表單

Please sign in

對話框

Delete Page?

Are you sure you want to delete this page?

圖片

可折疊式列表視圖

Favorite Spice Girl?

增強功能

jQuery支持變化

列表視圖自動分配器

只讀列表

更好的表單元素寬度調(diào)整機制

添加額外設(shè)備

全部升級內(nèi)容清單

其他資訊