[轉貼] 使用 jQuery Mobile 快速開發 mobile 網站

出處：http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/

當你看著 Apple 的 iOS device 和 Android 各自來勢洶洶，不知道到底該讓你的服務選哪邊站的時候，是否曾經偷偷地希望在完成一個平台的開發工作之後，可以將這個 app 也 port 到另外一個平台？ jQuery Mobile 就是一個這麼方便的 framework，尤其是小公司人手不足，jQuery Mobile 更可以大幅省下你將你的 application 發佈不同平台的力氣。

這篇文章會簡單介紹 jQuery Mobile 運作的哲學、jQuery Mobile 所提供的工具、並且會以實際的例子帶大家認識 jQuery Mobile, 以及 jQuery Mobile 所提供種種便利的功能。

認識 jQuery Mobile

使用過 jQuery 的人一定都愛死 jQuery 有名的 “write less, do more” 。只要透過 jQuery, 我們就不用再擔心惱人的跨瀏覽器問題。但隨著手持式裝置的漸漸普及，大家開始發現跨覽器問題到了手機上反而比 PC 上更加嚴重：在手機上不只是瀏覽器不同，OS 的歧異度也比 PC 上來得更加嚴重。於是，在 2010 的 10 月 jQuery 終於在大家的期待之下推出了 jQuery Mobile。只要使用這個簡單易用的 framework, 很快就可以做出跨 device 的 mobile appilcation。jQuery Mobile 幾個重要的 features 包括：

jQuery mobile 可以跨不同的移動裝置
jQuery mobile 可以 support 許多不同的平台，包括：iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo，以及其他可以看得懂 HTML 的devices。詳細的支援狀況可以參考 Mobile Graded Browser Support
Progressive Enhancement & Graceful Degradation
“taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience.”
讓較舊的手機一樣可以看到基本的功能(even 不支援 javascipt !! )，同時又可以讓支援度比較好的瀏覽器享受較先進的功能。
透過設定 HTML 標籤來完成 jQuery Mobile 的設定
jQuery 主要是透過 HTML5 data-* tag 來達成種種 UI 的設定，只要認識了大概的語法，不用寫一行 javascript，就可以快速建出 app 的雛型。對於對JavaSript 不熱的設計師，或是對談到 UI 設計就一個頭兩個大的工程師，jQuery mobile 的方便絕對讓你愛不釋手。

Hello World!

jQuery mobile 運作的方式很簡單，他主要的流程包括三個步驟

宣告 HTML5 documnt
include the the jQuery mobile css, jQuery, jQuery mobile library (你可以透過 jQuery or google code CDN, 或是你也可以自己 download 這些檔案放在自己的 server)
使用 jquery mobile 所定義的語法，如 data-role 等來定義 page structure

下面是一個簡單的範例：

<!DOCTYPE html>
<html>
 <head>
 <title>jQuery Mobile Tutorial on Codeforest.net</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
  
<div data-role="page">
  
 <div data-role="header">
 <h1>Title</h1>
 </div><!-- /header -->
  
 <div data-role="content">
 <p>The content</p>
 </div><!-- /content -->
  
 <div data-role="footer">
 <h4>The Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->
  
</body>
</html>

幾個重點：

將文件以 <!DOCTYPE html> 宣告成 HTML5 的格式
在 header 中間，以 <link>, <script> 將必要的 CSS & javascript library include 進來
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 則視自己的需要。

在瀏覽器輸入這個檔案的位址，就可以看到下面這個畫面：

jquery mobile sample 1 on android

jquery mobile sample 1 on ipad

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" data-theme="c" data-dividertheme="b">
  <li data-role="list-divider">Overview</li>
  <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
  <li><a href="docs/about/features.html">Features</a></li>
  <li><a href="docs/about/accessibility.html">Accessibility</a></li>
  <li><a href="docs/about/platforms.html">Supported platforms</a></li>
</ul>
...

幾個重點：

在 <ul> 上加上 data-role=”listview”
data-inset=”true” 主要指定這個 listview 是不是出現在文中間。如果是的話， jQuery Mobile 會自動幫你在最上面的 item 及最下面的 item 加上圓弧邊
如果你希望幫 list 分成一個個區塊 (有點像 HTML 裡的 <optgroup> tag)，你可以在 li 上面加上一個 data-role=”list-divider” 的 item。如上面這個範例中的 <li data-role=”list-divider”>Overview</li>

Advanced List View

List View 可以有很多種變化，詳細的說明可以參考 jQuery Mobile 上的對 List views 的說明。這裡簡單介紹三種常用的變化：

Nested list：只要將 list 加上多層的結構，jQuery Mobile 就會自動幫 list view 加上切換上下層的效果
List views with thumbnails
在每個 li 的一開始加上一個 <img> , jQuery Mobile 就會自動把它放在最左邊當做縮圖。如：
1
2
3
4
5
6
7
8
<ul data-role="listview">
  <li><a href="index.html">
    <img src="images/album-bb.jpg" />
    <h3>Broken Bells</h3>
    <p>Broken Bells</p>
  </a></li>
  ...
</ul>

List views with Count Bubbles

在 <li> 裡面加上一個 <span>，jQuery Mobile 會把內容包在 bubble 放在每個 item 的最右邊，如：

<h2 style="padding: 1em 0;">A list with count bubbles</h2>
 <ul data-role="listview" data-inset="true">
 <li><a href="#">SuperWidgets</a> <span>14</span></li>
 <li><a href="#">MegaWidgets</a> <span>0</span></li>
 <li><a href="#">WonderWidgets</a> <span>327</span></li>
 </ul>

Navigation Bar

just 將 <ul> & <li> 放在一個 data-role=”navbar” 的 div 裡面，就可以馬上做出一個 navigation bar, 還可以更簡單嗎

<div data-role="footer">
 <div data-role="navbar">
 <ul>
 <li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li>
 <li><a href="#" data-icon="star" data-iconpos="top">Favs</a></li>
 <li><a href="#" data-icon="gear" data-iconpos="top">Setup</a></li>
 </ul>
 </div><!-- /navbar -->
 </div><!-- /footer -->

幾個重點：

jQuery Mobile 裡面原本就有很多內建的 icon 可以使用，你可以用 data-icon=”xxx” 將 icon 加到 navigation bar 裡面（詳細有哪些 icon 可參考 icon 列表），並用 data-iconpos 指定 icon 的位置 (分成 left, right, top, bottom, notext, default 設成 left)

如果你想要的話，只要稍微多做一些設定，你也可以使用自己的 icon :)

<style type="text/css">
  .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
  #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
  #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
  #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
  #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
  #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
  #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
</style>
  
<div data-role="footer" class="nav-glyphish-example">
  <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul>
      <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
      <li><a href="#" id="email" data-icon="custom">Email</a></li>
      <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
      <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
      <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
   </ul>
  </div>
</div>

Form

為觸控設計的 UI (Touch input optimized controls)
為了讓表單在多為觸控操作的 portable device 可以方便地操作，jQuery Mobile 會自動將很多表單的元素轉換為觸控較好操作的形式(可參考完整的 Form elements 列表）。如果不想用 jQuery Mobile 自動幫你轉換的 UI，可以在元件加上 data-role=”none”，便會回到未優化前的形式
除了原本 Form 就有的 text, textarea, radio, checkbox, select menus, jQuery Mobile 也提供了 Slider, Flip, DatePicker (似乎仍在開發中）
彈性化的表單呈現 (Dynamic form layout)
jQuery Mobile 為了讓利用它的 app 可以 port 到不同的平台，會針對不同的螢幕寬度做不同的 layout，其中一個最明顯的例子就是表單 (Form)。如果螢幕是較窄的 (~480px)，jQuery mobile 會將 label 視為 block element; 如果是較寬的螢幕，看起就會是 2-column layout。要利用這個方便的功能，你只要將 data-role=”fieldcontain” 的 div 裡就可以了，如：
1
2
3
4
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>

Summary

jQuery Mobile 提供了許多開發 mobile app 的工具。這篇文章帶大家簡單認識了 jQuery Mobile Progressive Enhancement 為不同裝置提供不同工具的哲學、知道 jQuery mobile 設定的定程，也認識了 jQuery Mobile 所提供的工具，包括：list view , navigation bar, form elements 等等。希望能夠讓大家體會到 jQuery mobile 的便利性，讓我們一起來 “write less, do more

jojo 部落