首頁 > 網際網路

使用Jquery Mobile框架製作可以跳轉的簡單頁面

2019-12-12 21:43:50

時下,用HTML製作手機端的頁面很是流行,下面小編就教大家用jquery Mobile框架,製作可以實現簡單跳轉的頁面。

1

首先我們需要開啟Deaweaver軟體,新建一個html5檔案,並儲存下來。


2

我們需要參照Jquery Mobile的css樣式表檔案,還有jquery.js以及jquery-mobile的js檔案,並且將頁面調為響應式檔案。


3

接下來我們需要新建幾個div標籤,並為其新增屬性data-role="page"


4

這時我們可以按下F12,在瀏覽器中進行頁面的瀏覽。頁面中之後第一個div。


5

之所以只有第一個div是因為,我將所有的div都新增了data-role="page"屬性,這樣每一個div都是一個jquery mobile頁面了。而Jquery Mobile框架式預設的只顯示第一個頁面。雖然他們都在一個html文件中。


6

我們需要為第一個div加上連結,以實現和其他頁面之間的跳轉,這個的前提是要給其他div新增一個id屬性。


7

最後,我們需要給每個頁面分別新增錨記連結,以實現多個頁面互相跳轉。



IT145.com E-mail:sddin#qq.com