应用jQuery Mobile快速开发手机站点

2013-03-19

使用jQuery Mobile快速开发手机站点幾個重點：將文件以 !DOCTYPE html 宣告成 HTML5 的格式在 header 中

使用jQuery Mobile快速开发手机站点

幾個重點：

data-role=”page”

data-role=”header”

data-role=”content”

data-role=”footer”

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

应用jQuery Mobile快速开发手机站点

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” 主要指定這個 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 的說明。這裡簡單介紹三種常用的變化：

List views with Count Bubbles
应用jQuery Mobile快速开发手机站点

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

Navigation Bar
just 將 <ul> & <li> 放在一個 data-role=”navbar” 的 div 裡面，就可以馬上做出一個 navigation bar, 還可以更簡單嗎 
幾個重點：
jQuery Mobile 裡面原本就有很多內建的 icon 可以使用，你可以用 data-icon=”xxx” 將 icon 加到 navigation bar 裡面（詳細有哪些 icon 可參考 icon 列表），並用 data-iconpos 指定 icon 的位置 (分成 left, right, top, bottom, notext, default 設成 left)如果你想要的話，只要稍微多做一些設定，你也可以使用自己的 icon :)
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 裡就可以了，如：?
SummaryjQuery Mobile 提供了許多開發 mobile app 的工具。這篇文章帶大家簡單認識了 jQuery Mobile Progressive Enhancement 為不同裝置提供不同工具的哲學、知道 jQuery mobile 設定的定程，也認識了 jQuery Mobile 所提供的工具，包括：list view , navigation bar, form elements 等等。希望能夠讓大家體會到 jQuery mobile 的便利性，讓我們一起來 “write less, do more” 
ReferenceHow to Build an RSS Reader with jQuery Mobile
一篇內容簡單易懂的教學。使用 jQuery mobile List view ，並用 Yahoo! YQL 來實做一個簡單的 RSS readerjQuery Mobile Framework – A Forms Tutorial
用一個表單的程式示範 jQuery mobile 如何用在典型透過 Ajax 與 server 端程式的串接jQuery Mobile: What Can It Do for You? 
very detailed explaination for different components of jQuery Mobile几个不错的 jQuery Mobile 页面设计及样例参考站点：
?
http://www.jqmgallery.com/
http://view.jquerymobile.com/master/demos/
?
附几个简单的例子：
?

热点排行

移动开发

应用jQuery Mobile快速开发手机站点