jQuery Mobile(1)-行動網頁建立與連結

最近幾年手機與平版等行動裝置風行,為了讓設計師能快速開發行動網頁或是App,jQuery Mobile被發展出來。按照發展的順序應該是JavaScript -> jQuery -> jQuery Mobile,不過撰寫的難易度卻是反過來jQuery Mobile -> jQuery -> JavaScript,只要有網頁概念的人都有辦法撰寫jQuery Mobile的程式。

資料來源:跨裝置網頁設計jQuery Mobile Demos

基本版型

jQuery Mobile 是建立在 jQuery 之下的 API,所以在建立 jQuery Mobile 的網頁時,必須載入 jQuery 與 jQuery Mobile 的JS檔(參考JavaScript載入說明)。另外,jQuery Mobile 有設計一些基本的CSS樣式,因此也必須載入CSS檔。下面程式碼 7-9 行就是載入 API 文件,使用連結網路資源CDN的方式載入。如果設計者想要以”本機”資源的方式載入,可以到 jQueryjQuery Mobile 的官方網站下載程式碼,使用相對路徑的方式連接 JS 及 CSS 文件。第 12 行是設定行動網頁的視窗大小,設定的說明請參考第 14-20 的註解。




    
    

頁首

網頁內容

頁尾

建立jQuery Mobile的網頁要先了解它”page”的概念。page 是指行動裝置上”一個畫面”的內容,它使用第 26 行的

標籤包覆。一份HTML文件可以包含 1 至無限多個 page (至少要有一個)。也就是說透過 page 的分頁,我們可以把整個行動網站用一個HTML文件來完成。不過把全部東西塞在一起我們自己看得也很累,所以一般來說還是會按照功能需求切割成不同檔案。

第 27、30 及 31 行分別標記了頁首、網頁內容及頁尾的位置。只要做這樣簡單的標記,jQuery Mobile 就會幫我們把它變成行動網頁的樣子。這段程式的預覽畫面可以參考官方DEMO

多頁面與連結

想要在一份HTML文件裡建立多個行動網頁的頁面,只要將上面程式碼第 26-34 行複製即可,參考下面替換的程式碼:

第一頁

在page標籤上加入id,就可以利用連結#錨的方式連結到另一個page。

前往第二頁

moke.tw

第二頁

第二頁預設的title會變成header裡的文字內容,可以在page標籤裡加入data-title修改標題內容。

在連結中加入data-rel="external"或data-ajax="false"進行外部連結:連結到摩刻部落

moke.tw

為了順利連結到不同的page,在 25 及 37 行page標籤中加入”id”屬性,這樣一來就可以透過連結#錨點的方式連結到另一個page。jQuery Mobile 預設都是使用Ajax的方式載入網頁。如果我們要用相對路徑連結其它的HTML網頁,那個頁面只能包含一個page,否則就會出現「Error Loading Page」的錯誤警告。要解決這個問題,可以加入 data-ajax=“false” 屬性來取消 Ajax 載入,改用一般的方式連結。使用絕對路徑進行連結時,加上 data-rel=“external” 屬性標示外部連結,它的作用和 data-ajax=“false” 相同,不過語意上有所差異。

在上一段程式第 4 行 title 標籤中,寫的是網頁預設標題。當我們連結到第二個page時,預設的 title 會變成 header 裡的文字內容。在 page 標籤加入 data-title 屬性可以自訂各 page 的標題內容,如 37 行的程式。

連結信箱與電話

連結信箱的方式和一般HTML一樣,使用 mailto 作通訊協定名稱。而要撥打電話則改用 tel 連結即可。

連結信箱

撥打電話