jquerymobile入門(檔案引用 多頁面)

2022-03-30 19:22:47 字數 2749 閱讀 7798

一:檔案引用:

">

二: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容器,然後通過頁面轉場顯示。

**:

1

2<

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 使用者在某個元素上水平滑動超過...