利用jQuery Mobile跨手機平台開發專案

作者/郭凱文

認識 jQuery Mobile 自從行動裝置市場日漸擴大後,行動上網的速率加快,手機功能跟種類也不斷推陳出新,我們可以確信Mobile已經是下一代的平台之一了,而應用程式也從早期Desktop App到Web App時期,到現在已進展到Mobile App的時代;不過隨著行動裝置的普及,發現以往跨瀏覽器問題到了手機上反而比PC上更加嚴重,因為在手機上不單是瀏覽器不同,OS的歧異度也比PC上來得更加嚴重。 目前在Mobile裝置的程式開發大致分為兩種,一種是原生App﹝Native App﹞,簡單來說就是利用該平台上的專用語言寫出此平台的專用應用程式,所以這個App也只能在特定的裝置上執行;另外一種方式雖然也是使用專用語言﹝HTML、JavaScript﹞,但程式實際運作的時候,是透過瀏覽器﹝Browser﹞來讀取寫好的Web Page,因為HTML與JavaScript是一個共通的標準,利用此核心概念,將可以跨不同的行動裝置。 jQuery Mobile推出的目的就是為了讓程式開發人員使用第二種方式﹝透過Browser處理﹞撰寫的一個方案,它為各種不同的Mobile平台提供了統一的UI介面,且使用標準的HTML5來處理,讓不同的裝置讀取到此頁面的時候,能夠有一致的介面,讓程式開發者不需要針對不同手機去設計不同的頁面。jQuery Mobile強調“Write Less,Do More”,也就是只要透過它,使用者不用再擔心惱人的跨瀏覽器問題,只要使用jQuery Mobile這個簡單易用的Framework,即可很快做出跨各個裝置的Mobile Application。 jQuery Mobile特點如下:
  • 使用jQuery核心,語法與jQuery相同,因此學習曲線不會太長,有助於快速上手。
  • 兼容主要的移動和桌面平台,以及所有現代的桌面瀏覽器。
  • 輕量的大小。
  • 使用HTML5的標記驅動﹝Markup-driven﹞來進行配置,所以只需要撰寫少量的Script,有效提升開發效率。
  • 當發現HTML標記中有使用到HTML5的data-role屬性,將自動初始化此標記。
  • WAI-ARIA的輔助功能也包括在內,以確保頁面的螢幕閱讀器和其他輔助技術。
  • 精簡觸控和滑鼠事件,觸控、滑鼠等只需要使用一個簡單的API提供的方法。
跨不同的移動裝置 jQuery Mobile可以提供支援不同的平台,包括:iOS、Android、Blackberry、Palm、WebOS、Symbian、Windows Mobile、Bada以及其他可解析HTML的裝置,jQuery Mobile還另外支援Progressive Enhancement & Graceful Degradation,讓較舊款的手機一樣可以觀看和使用基本的功能﹝即便不支援JavaScript﹞,同時又能讓支援度比較好的瀏覽器享受較進階的功能。 透過設定HTML標籤完成jQuery Mobile的設定 jQuery主要是透過HTML5 data-* tag來達成種種UI的設定,只要認識了大概的語法,不用編寫JavaScript即可快速建造出APP的雛型。對於對JavaScript不熟悉或是UI設計不了解的開發者,jQuery Mobile提供更方便的使用方法可供使用。 jQuery Mobile主要的流程包括三個步驟:
  • 宣告HTML5 document。
  • 需include jQuery Mobile CSS、jQuery Mobile Library﹝可以透過jQuery或是Google code CDN,或是自行下載這些檔案置於本機網站中﹞。
  • 使用jQuery Mobile所定義的語法,例如data-role等來定義page structure。

《圖一》jQuery Mobile Page Structure
重點如下:
  • 將文件以<! DOCTYPE html>宣告成HTML5的格式。
  • 在header標籤內,以<link>與<script> include所需的CSS & JavaScript Library。
  • data-role=“page”、data-role=“header”、data-role=“content”、data-role=“footer”屬於jQuery Mobile所定義的Tags。這裡使用了HTML5 custom data attributes的data-*語法,分別告訴jQuery Mobile哪邊是header、content、footer。其中page與content是必須存在的,header與footer則視需要再新增即可。
設定完成後,在瀏覽器輸入檔案的位址,就可以看到以下畫面:

《圖二》範例畫面in iPad
頁面設定

《圖三》
上圖是一個meta標籤,如果沒有設定此標籤的話,預設會使用“Virtual” page來顯示,而此page的大小為900 pixels,也就等同於桌面大小了,所以官方建議加上此設定。 jQuery Mobile於瀏覽器上的最小單位是“page”,但此“page”不等同於web page,一個web page裡面,可能會有多個jQuery Mobile的page,但經過jQuery Mobile處理過後,於瀏覽器上顯示,只會顯示出一張jQuery Mobile的page,這種做法是因為Mobile上的處理速度和傳輸速度都比較慢,而且Mobile所能顯示的大小也較小,所以jQuery Mobile使用這種方式做處理,如果要跳到其他page,則是要用錨點﹝Anchor﹞的方式去做連結,以下是jQuery Mobile的最小的單位配置,需使用HTML5的data-*的方式來標記“page”,如下圖所示。

《圖四》
兩個page間的切換,可以使用超連結來連結錨點,下圖可以看到,雖然兩個div標籤都是在同一個HTML裡面﹝body標籤內﹞,但透過jQuery Mobile後,一次只會顯示一頁。

《圖五》
List View﹝清單檢視﹞

《圖六》List View範例畫面
List View算是手機上經常使用的UI,在jQuery Mobile要實作這樣的UI非常簡單,只要使用一般HTML常見的Ordered list﹝,<ol><li>﹞,或是Unordered list﹝<ul><li>﹞,並在<ul>屬性加上data-role=“listview”即可,如同上圖的UI顯示,它的HTML代碼如下圖:

《圖七》
重點如下:
  • 在<ul>上加上data-role=“listview”。
  • data-inset=“true”主要指定這個List View是不是出現在文中間。如果是的話,jQuery Mobile會自動在最上面的item及最下面的item設定圓弧邊。
  • 如果list需要分成一個一個區塊(類似HTML裡的<optgroup> tag),則可以設定在<li>上面加上一個data-role=“list-divider”的item。
Advanced List View﹝進階清單檢視﹞ List View可以有很多種變化,詳細的說明可以參考jQuery Mobile上的對List View的說明。這裡簡單介紹三種常用的變化:
    一、Nested List﹝巢狀清單﹞:只要將list加上多層的結構,jQuery Mobile就會自動幫List View加上切換上下層的效果。 二、List View with Thumbnails﹝縮圖顯示﹞:

    《圖八》List View with Thumbnails 範例
    List View with Thumbnail在每個<li>的一開始加上一個<img>,jQuery Mobile就會自動把它放在最左邊當做縮圖。代碼如下:

    《圖九》
    三、List Views with Count Bubbles﹝計數顯示﹞:

    《圖十》List View with Count Bubbles範例
    在<li>裡面加上一個<span>,jQuery Mobile會把內容包在bubble放在每個item的最右邊,代碼如下:

    《圖十一》
Navigation Bar﹝導覽列﹞

《圖十二》導覽列範例
只要將<ul>與<li>放在一個data-role=“navbar”的div裡面,即可做出一個Navigation Bar。

《圖十三》
重點如下:
  • jQuery Mobile裡面有內建的icon提供使用,可以使用data-icon=“xxx”將icon加到Navigation Bar裡面,並用data-iconpos指定icon的位置。
  • 如果有其他需求,可以稍微多做一些設定,即可使用自己的icon,如下圖。

《圖十四》自定導覽列icon

《圖十五》
jQuery Mobile Form的設計優化
  • 專為觸控設計的UI﹝Touch Input Optimized Controls﹞,為了讓表單在多為觸控操作的行動裝置可以方便地操作,jQuery Mobile會自動將很多表單的元素轉換為觸控較好操作的形式。如果不想用jQuery Mobile自動幫你轉換的UI介面,可以在元件加上data-role=“none”,便會回到未優化前的形式。
  • 除了原本Form就有的Text、Textarea、Radio、Checkbox、Select menus這些控制套件,jQuery Mobile也提供了Slider、Flip、DatePicker等其他控制套件。
  • 彈性化的表單呈現﹝Dynamic Form Layout﹞,jQuery Mobile為了讓使用它的Library的APP可以移植到不同的平台,會針對不同的螢幕寬度做不同的layout,其中最明顯的就是表單﹝Form﹞。如果裝置的螢幕是較窄的﹝480px﹞,jQuery Mobile會將Label視為block element;如果是較寬的螢幕,看起就會是2-column layout。要利用這個方便的功能,你只要指定data-role=“fieldcontain”的div裡就可以了,代碼如下:

《圖十六》
總結 jQuery Mobile提供了許多開發Mobile APP的套件。這篇文章主要是讓使用者了解jQuery Mobile的設定步驟與使用方法,如:List View、Navigation Bar、Form Elements等。這些都是最基本的jQuery Mobile使用方法,但如果有需要結合到一些Mobile裝置上的功能﹝例如:GPS定位、攝影鏡頭等…﹞,可能就需要結合其他的Framework搭配使用,例如:PhoneGap或是Titanium,以PhoneGap為例,Framework會負責將程式人員撰寫好的HTML5、JavaScript原始碼轉換成Native Code在裝置上運作,並提供多個API可供程式呼叫並操作裝置上的功能,因為支援JavaScript,所以可以和jQuery Mobile做很好的整合,將提供行動裝置程式開發更大的支援性,也同時降低程式人員重覆開發專案的成本與時程。 參考資料 1.使用jQuery Mobile快速開發Mobile網站 2.跨平台手機服務開發jQuery Mobile 3.jQuery Mobile Framework