jQuery Mobile 是創(chuàng)建移動 web 應(yīng)用程序的框架。適用于所有流行的智能手機和平板電腦。
- 移動端開發(fā)石咬,首先應(yīng)該加的代碼:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
意思是,固定頁面尺寸和設(shè)備尺寸的縮放比例為1卖哎。
- jqueryMobile應(yīng)用的結(jié)構(gòu):
<body>
<div data-role="page">
<div data-role="header">
<h1>歡迎訪問我的主頁</h1>
</div>
<div data-role="content">
<p>我是一名移動開發(fā)者鬼悠!</p>
</div>
<div data-role="footer">
<h1>頁腳文本</h1>
</div>
</div>
</body>
- data-role="page" 是顯示在瀏覽器中的頁面
- data-role="header" 創(chuàng)建頁面上方的工具欄(常用于標題和搜索按鈕)
- data-role="content" 定義頁面的內(nèi)容删性,比如文本、圖像焕窝、表單和按鈕蹬挺,等等
- data-role="footer" 創(chuàng)建頁面底部的工具欄
- jqueryMobile可以在同一個文件中創(chuàng)建多個頁面
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">轉(zhuǎn)到頁面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">轉(zhuǎn)到頁面一</a>
</div>
</div>
如果不希望使用內(nèi)部鏈接頁面,可以使用外部文件:
<a href="externalfile.html">轉(zhuǎn)到外部頁面</a>
-
data-rel="dialog"
,用戶點擊(輕觸)鏈接時創(chuàng)建一個對話框它掂。
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog">轉(zhuǎn)到頁面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">轉(zhuǎn)到頁面一</a>
</div>
</div>
-
data-transition="slide"
巴帮,過渡效果,滑動虐秋。
<a href="#anylink" data-transition="slide">滑動到頁面二</a>
jQuery Mobile 擁有一系列關(guān)于如何從一頁過渡到下一頁的效果榕茧。fade、flip客给、flow用押、pop、slide靶剑、slidefade蜻拨、slideup、slidedown桩引、turn缎讼、none
data-direction="reverse"
,反向操作坑匠,以上動作都支持休涤。
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑動</a>