一:檔案引用:
">
二:pages
在標籤內,移動**的每乙個檢視或者「page」都要通過 data-role="page" 屬性的標籤來定義。
...
在page容器內,任何有效的html標籤都可以使用,但是對於jquery mobile的典型頁面來說,page容器的直接子結點應該為使用"data-role"標記屬性為"header""content"和"footer"的3個容器。
......
...多個頁面的模板結構 multi-page template structure
乙個獨立的html檔案可以包含多個「pages」,在載入的時候這些data-role="page" 的div會一起堆疊載入。每乙個page區塊需要由乙個獨特的id(id="foo")標記,通過 給內部鏈結位址定義為(herf="#foo"),互相跳轉。當連線被點選時,jqmoblie會在 文件內尋找帶有id的page容器,然後通過頁面轉場顯示。
**:
12<
div
data-role
="page"
id="foo"
>
3<
div
data-role
="header"
>
4<
h1>foo
h1>
5div
>
6<
div
data-role
="content"
>
7<
p>i'm first in the source order so i'm shown as the page.
p>
8<
p>view internal page called <
a href
="#bar"
>bar
a>
p>
9<
p>view internal page called <
a href
="#dada"
>dada
a>
p>
10div
>
11<
div
data-role
="footer"
>
12<
h4>page footer
h4>
13div
>
14div
>
1516
<
div
data-role
="page"
id="bar"
>
17<
div
data-role
="header"
>
18<
h1>bar
h1>
19div
>
20<
div
data-role
="content"
>
21<
p>i'm first in the source order so i'm shown as the page.
p>
22<
p><
a href
="#foo"
>back to foo
a>
p>
23<
p>view internal page called <
a href
="#dada"
>dada
a>
p>
24div
>
25<
div
data-role
="footer"
>
26<
h4>page footer
h4>
27div
>
28div
>
2930
<
div
data-role
="page"
id="dada"
>
31<
div
data-role
="header"
>
32<
h1>imdada
h1>
33div
>
34<
div
data-role
="content"
>
35<
p>i'm dada,third page.xixi.
p>
36<
p><
a href
="#foo"
>back to foo
a>
p>
37<
p><
a href
="#bar"
>back to bar
a>
p>
38div
>
39<
div
data-role
="footer"
>
40<
h4>page footer
h4>
41div
>
42div
>
上面的**是三個頁面的。
demo:
單頁面多頁面
《jQuery Mobile快速入門》 導讀
jquery mobile是乙個框架,用於交付具有統一介面的跨平台移動web應用程式。jquery mobile將響應式布局與漸進式增強結合起來,從而通過乙個 庫來呈現最佳的使用者體驗。通過使用jquery mobile,我們將會看到如何為ios android windows phone blac...
Jquery Mobile 開發小計
開啟你最喜歡的文字編輯器,把下面的頁面模板 貼上進去,儲存然後用瀏覽器開啟。你現在也是移動開發者了!在head裡,viewport的meta標籤將螢幕的寬度設定為了與裝置的寬度相同,並且從cdn引入了jquery,jquery mobile 和jquer。y mobile的主題樣式表。jquery ...
jQuery Mobile 基礎事件
1.頁面初始化事件 pageinit 2.touch事件 使用者觸控螢幕時觸發 tap 使用者敲擊某個元素時觸發 p on tap function taphold 使用者敲擊某個元素並保持一秒時觸發 即按住不動 p on taphold function swipe 使用者在某個元素上水平滑動超過...