本課重點(diǎn):學(xué)習(xí)使用
jQuery Mobile
前端框架來(lái)寫移動(dòng)端WebApp
靜態(tài)頁(yè)面烫止。jQuery Mobile 是創(chuàng)建移動(dòng) web 應(yīng)用程序的輕量級(jí)框架。jQuery Mobile 適用于所有流行的智能手機(jī)和平板電腦蜜唾。jQuery Mobile 使用 HTML5 和 CSS3 通過(guò)盡可能少的腳本對(duì)頁(yè)面進(jìn)行布局柏靶。
1.下載jQuery和jQuery Mobile后先在頁(yè)面中引入以下三個(gè)文件:
<link rel="stylesheet" href="./js/jquery.mobile-1.4.5.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.mobile-1.4.5.min.js"></script>
2.在head
中加入兼容各種尺寸手機(jī)屏幕屬性
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
3.使用jQuery Mobile
中的屬性進(jìn)行頁(yè)面編寫宣肚,可以實(shí)現(xiàn)一頁(yè)多應(yīng)用:
如頁(yè)面中第一個(gè)應(yīng)用頁(yè)面如下:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>在此處寫入標(biāo)題</h1>
</div>
<div data-role="content">
<p>在此處寫入正文</p>
</div>
<div data-role="footer">
<h1>在此處寫入頁(yè)腳文本</h1>
</div>
</div>
多個(gè)頁(yè)面應(yīng)用可以寫多個(gè)比如可以有
pagetwo
导坟、pagethree
等等根據(jù)需要添加屿良,在這些頁(yè)面應(yīng)用中加上錨點(diǎn)實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn),這樣就實(shí)現(xiàn)了一頁(yè)多應(yīng)用的特點(diǎn)惫周。