DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> jQuery Mobile開發HTML5移動應用
jQuery Mobile開發HTML5移動應用
編輯:HTML5教程     

隨著移動互聯世界的到來,目前已發展到多種移動操作系統割據的局面,而開發者則急需要能運用原有的開發知識和技能,快速方便地構建移動應用程序,並期望能運行在不同的手機操作平台上,比如Android,iOS,黑莓等。

而目前,出現了一批十分優秀的支持HTML5/CSS3的移動應用開發框架,其中最為大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以讓熟悉jQuery框架的開發者快速開發出基於HTML5的移動應用,而且直接通過手機的浏覽器即可浏覽。除此以外,jQuery Mobile也有很好的擴展性,用戶可以很好地對其進行定制修改,本文將指導讀者對jQuery Mobile的提供的主題樣式進行自定義,從而創建符合用戶需要的樣式。

本文假設讀者已具備初步的jQuery Mobile相關知識,如果讀者不大了解jQuery Mobile,可以通過如下幾篇文章進行學習,文章鏈接地址為:

統一接口工具JQuery Mobile簡介

http://tech.it168.com/a2010/1210/1136/000001136835.shtml

使用JQuery Mobile實現手機新聞浏覽器

http://tech.it168.com/a2011/0321/1168/000001168231.shtml

JQuery Mobile實現手機新聞浏覽器(2)

http://tech.it168.com/a2011/0323/1169/000001169682.shtml

使用jQuery Mobile實現新聞浏覽器(3)

http://tech.it168.com/a2011/0324/1170/000001170077.shtml

jQuery Mobile中的主題

在jQuery Mobile中,有一個建議的頁面模版結構,其中包含了比如頁面頭部,頁面主體和頁腳等部分。jQuery Mobile使用HTML5中的data-role屬性進行定義,下面的代碼中就顯示了一個主體頁面的框架:

<div data-role=”page”> 

 

<div data-role=”header”>
<h1>Page Title</h1>
</div>

<div data-role=”content”>
<p>Page content goes here.</p>
</div>

<div data-role=”footer”>
<h4>Page Footer</h4>
</div>

</div>

而另外一個建議使用的元素是標簽,這個標簽的作用是指定浏覽器以何種方式在手機上顯示網頁,代碼如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<meta viewport>標簽對於在移動設備上正確顯示移動網頁是十分重要的,如果不使用該標簽,則頁面內容在顯示時可能會失真或者變形,或者是根本不能適合移動設備浏覽。在下圖中,顯示了一個使用標簽的頁面,可以看到,頁面內容的顯示能適合移動設備的大小。

 

jQuery Mobile框架中,包含了一個頁面主題的框架,它提供了對頁面樣式的相關控制功能。通過使用HTML5的data-theme屬性標簽,能輕易為某一個 頁面元素應用已有的jQuery Mobile的樣式。默認的主題樣式有5種,使用英文字母去區分,比如A-E開頭的都內置的樣式,開發者可以通過下載jQuery Mobile的代碼中去學習了解這樣樣式文件是如何編寫的。假如開發者要編寫新的樣式,可以使用F-Z字母中的任意一個去命名新建立的樣式,然後就可以編 寫相關的代碼。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved