認識 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。

重點如下：

• 將文件以＜! 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則視需要再新增即可。

設定完成後，在瀏覽器輸入檔案的位址，就可以看到以下畫面：



頁面設定



上圖是一個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算是手機上經常使用的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，如下圖。

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