怎麼使用JQuery Mobile開發移動網站

2019-12-13 02:14:14

現在越來越多的人用網站來做手機app, 這樣的好處是，可以做一個網站，基本上可以做到多個平台android, ios, wp, 都可以使用。這裡使用JQueryMobile來當做前台的框架。只是實現框架，也就是前台的頁面，沒有後台的程式碼。這裡使用html5的標準來書寫該模板。版本使用最新版的1.4.2， jquery版本使用1.10.2，不用2.x的版本，因為2.x的版本去除了ie6,7,8的相容，所以，為了相容性，使用1.x的版本。

1

簡單的說明一下JQueryMobile. 它是一個很好的跨平台的行動端網站開發框架。是一個前台的框架。現在要使用這個框架組一個介面，這個介面很簡單，但是麻雀雖小五臟俱全，然後模板實現，知識講解完畢。html要使用HTML5的標準來寫，因為JQueryMobile是基於HTML5的。書寫html5的格式如圖，

2

既然使用JQueryMobile就要有這個框架，這裡可以使用本地參照的方式，和網上參照，也叫做cdn參照。就是比較穩定和快速的參照外部檔案的一種方式。這裡使用cdn的方式，這樣只要可以上網就可以使用該框架。

3

在寫行動端的網站的時候，一定要寫一個meta的name為viewport的屬性，因為該屬性代表著網站頁面的自適應。簡單的寫法為：<meta name="viewport" content="width=device-width, initial-scale=1"> 代表著網站為驅動裝置的寬度。

4

然後加入框架之後，寫一個簡單的介面。這裡面JQueryMobile大量的使用了一個data-的屬性，這裡使用最多的事data-role。代表著他預設的樣式規則。就是提前定義好了很多的樣式來供你使用。常用的page. 代表著頁面， listview，代表著一個列表檢視。下面是程式碼和效果圖

5

稍微說明一下。?data-role="page" 是代表著一個頁面可以看做該內容下是一個頁面顯示的內容data-role=」header"代表著頁面的頁頭，就是頁面的最上面顯示的內容這裡需要注意，裡面要加上子標籤內容，要不然，就不會居中顯示內容了。推薦使用h1.data-role="footer"代表著頁尾的內容。也是網站的一個說明資訊。或者是一個底部導航選單。還有一部分，就是data-role="content" 是代表著頁面內容部分，主要的內容在這裡面顯示。?這3個部分構成了一個簡單的頁面。所以，現在可以體驗到它的強大，不用寫太多的程式碼一個簡單的框架就好了，下面繼續增加一個listve

iw的列表檢視。?

6

完成列表檢視的程式碼，增加一個文章列舉表的程式碼，這裡列表是使用data-role="listview" 來修飾樣式。然後這裡只需要加上data-role="listview" 你發現想要的list效果就實現了。這樣我們一個簡單的頁面效果就實現了。

怎麼使用JQuery Mobile開發移動網站

1

2

3

4

5

6

熱門文章