jQuery Mobile怎樣使用呢
jQuery Mobile可以用來制作移動web網站，今天我就來給大家講解一下jQuery Mobile怎么用，希望可以幫助到大家。
工具/材料
電腦
vscode
jQuery Mobile插件
操作方法
-
01
首先，新建一個HTML5網頁，并且使用meta標簽添加一個viewpoint，這樣可以保證頁面適應不同型號的手機。
-
02
然后引入jQuery Mobile的css文件和js文件，并且還要引入jquery，因為jquery mobile依賴jquery，并且不要使用太高版本的jquery，不然可能會不兼容（這是小編我遇到的問題）。
-
03
之后，我們就可以使用jquery mobile了。如圖所示，添加幾個div標簽，結構如下。
-
04
之后，我們給div添加一些data-role屬性，這樣jquery mobile就可以通過這些屬性定位到div標簽，從而給div添加對應的樣式。比如，我就給添加了“page"屬性，這個屬性是讓div標簽成為一個頁面容器，可以適應手機屏幕的大小。
-
05
同理，如果給div標簽設置header屬性，則div標簽就具備了標題欄的效果。
-
06
添加”main“屬性則可以讓div標簽具有自動排版的效果。
-
07
footer跟header類似，不過現在手機端一般都不會有底部標題欄，可以去掉，具體看自身的情況。
-
08
此外，在標題欄header和footer中使用hx標簽都會自動居中哦，hx指的是h1到h6。
-
09
做完一切之后，看看頁面效果，可以看到現在網頁已經可以自適應瀏覽器了（做完之后，可以縮放瀏覽器查看效果喲），這就算是一個比較簡單的移動web界面了。不過里面的內容有點空白，我們可以再多添加一點內容。
-
10
最后，添加內容之后再查看效果，可以看到，當超出屏幕范圍，就會產生滾動條，并且可以用鼠標下拉。
- End
特別提示
jquery mobile的初步使用就完成了，最好學習好js再學習它，多看文檔，多練習。
- 發表于 2017-10-19 00:00
- 閱讀 ( 1191 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章