HTML 5 前端架構jQuery Mobile使用教程

1. 簡介

jQuery Mobile是由（MT）Media Temple聯合多家行動裝置廠商以及軟體企業共同發起的針對觸屏智能手 機與平板電腦的Web應用的前端開發架構。

jQuery Mobile構建於大名鼎鼎的jQuery 以及 jQuery UI類庫之上，為前 端開發人員提供了一個相容所有主流行動裝置平台的統一UI介面系統。擁有出色的彈性，輕量化以及漸進增強特性與可訪問 性。

jQuery Mobile架構遵循"write less, do more"思想來設計，通過該架構，使用者可以開發跨平台、 跨裝置的統一的HTML5應用，無需針對每個裝置和作業系統分別開發應用代碼。目前jQuery Mobile支援的的系統和裝置有： iOS, Android, BlackBerry, Tizen, Bada, Windows Phone, WebOS, Symbian。

2. 下載和使用

jQuery Mobile強調語義標註，非常便於使用。只要會使用基本的HTML，就可以基於jQuery Mobile快速構建Web應用。目前JQuery Mobile最新的穩定版本為V1.2.0, 可以通過jQuery Mobile 官方網站http://jquerymobile.com/ 下載源碼。

jQuery Mobile使用非常簡單，開啟任何你所喜好的文字編輯器，建立一個檔案並命名為：test.html, 在該檔案開始處添加jQuery Mobile架構代碼：

<!DOCTYPE html>    <html>    <head>         <title>My Page</title>         <meta name="viewport" content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.css" />         <script src="http://code.jQuery.com/jQuery-1.8.2.min.js"></script>         <script src="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.js"></script>    </head>    <body>    Add your content here.             </body>    </html>

儲存檔案，並在瀏覽器中開啟，即可瀏覽。

下面我們來實現一個Hello World例子， <body> 標籤中的內容用下面代碼替換。

<body>             <center data-role="page">                  <center data-role="header">             <h1>hello</h1>         </center><!-- /header -->                  <center data-role="content">               <p>Hello world</p>             </center><!-- /content -->             </center><!-- /page -->             </body>

在這段代碼中，我們首先使用一個data-role來描繪該頁面，同時使用hello作為我們的header data-role。在content標籤裡面，我們填入了<p>Hello world</p>。 這些特定的data-role定義的HTML5屬性 ，在JQuery Mobile中用於快速構建增強風格的使用者介面。

儲存代碼並在瀏覽器中開啟，效果如下：

圖1 Hello world運行效果