星期一, 6月 25, 2012

PhoneGap 教學 - jQuery Mobile 簡單版型 (Android)

Photobucket

在 前一篇文章 Hello World (Android)教學裡,我們了解了如何使用PhoneGap 來打包我們用JavaScript、Html或是jQuery寫好的程式。



而我們今天要來簡單寫一個最基本 jQuery Mobile 的程式或網頁版型。

而我們要使用jQuery Mobile,想當然即是要去jQuery Mobile官網下載js檔。

然後在程式開啟時,載入此js檔,即可使用jQuery Mobile強大的框架。

Photobucket


而一個最基本 jQuery Mobile版型,即是在body標籤裡面,


宣告一個頁面(page),且將這個頁面,切割出三部分,
分別是頭(head)、身體(content)和腳(footer):


Photobucket



大部分,
頭:放標題、導覽工具
身體:放主要內容
腳:放工具按鈕或次標題



執行起來的畫面:
Photobucket

這時你會發現腳的位置,並未理想的貼在此頁的的底部。
這時我們可以將腳的部分增加:

Photobucket



此時再重新執行一次,即可以發現腳的部分,則如期的貼黏在底部。
Photobucket

以上即是,jQuery Mobile 最簡單的版型。

範例程式碼下載:


相關文章:
jQuery 教學目錄

1 則留言 :

  1. Mr.都不太懂

    你好!我最近才開始接觸Phomegap的東西
    有很多東西都不太懂
    不知道有沒有推薦的書籍或是網路參考資料是循序漸進教學
    (像你的文章就都還不賴!!從安裝到樣板到一些input原件使用!!!)

    回覆刪除

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]