mobile页面基本设置
1.页面加载顺序：使用JQuery mobile必须先加载Jquery插件
<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.js" ></script> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
2. viewport观察窗口解决：现手机的高分辨率、高像素密度引入的字体过小的问题
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.页面的基本结构：page中有header+main+footer三个部分
<div id="home" data-role="page"> <div data-role="header" data-add-back-btn="true" data-back-btn-text="返回"> //添加一个返回按钮并富于文本“返回” <h1>标题</h1> </div> <div class="ui-content" role="main"> <div>内容</div> </div> <div data-role="footer"> <h6>页尾</h6> </div> </div>
4.单一页面可以写多个页内容，通过页的ID进行访问，同时也可以链接外部文件；
data-transition：页面之间切换效果有：
a) fade:默认值，淡入淡出效果。
b) pop:弹出效果
c）flip:以纵向中心线为轴翻转
d) turn：书本翻页效果
e) flow:漂浮效果
f) slidefade:旧的页面从屏幕左移出并伴有淡出效果，新的页面淡入效果出现
g) slide:新的页面从右边移入
h) slideup:上移效果
I) slidedown:下移效果
J) none: 不使用动画效果
取消效果设置属性data-ajax="false"或rel="external"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile-网页基本结构</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js" ></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="home" data-role="page">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>标题栏</h1>
</div>
<div class="ui-content" role="main">
<div>网页内容</div> //data-mini：使内链按钮更加紧凑；data-inline：按钮宽度只适合文字与图标，默认按钮是块会填补屏幕的宽度。
<a href="#page2" data-role="button" data-mini="true" data-inline="true" data-transition="slide">按钮:第二页</a>
<a href="#page3" data-role="button" data-mini="true" data-inline="true">第三页</a>
<div>取消AJAX页面加载</div>
<a href="demo5.11.html" data-role="button" data-mini="true" data-inline="true" data-transition="slideup">按钮：第四页</a>
<div>标注外部肉站</div>
<a href="demo5.12.html" data-role="button" data-mini="true" data-inline="true" data-transition="pop">按钮：第五页</a>
<a href="http://www.baidu.com" data-role="button" data-mini="true" data-inline="true" data-transition="flip" rel="external">按钮：第六页</a> //此按钮过渡效果失效，按钮加属性data-rel="back"修饰后，原有链接失效被返回链接所取代
</div>
<div data-role="footer">
<h6>页尾</h6>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
第二页
</div>
<div class="ui-content" role="main">
<div>第二页内容</div>
</div>
<div data-role="footer">
<h6>页尾</h6>
</div>
</div>
<div id="page3" data-role="page">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>第三页</h1>
</div>
<div class="ui-content" role="main">
<div>第三页内容</div>
</div>
<div data-role="footer">
<h1>页尾</h1>
</div>
</div>
</body>
</html>
5.页面弹出对话框:把一个页面定义为对话框data-dialog="true"或页面属性不设为对话框页直接在按钮上加一个属性data-rel="dialog"效果相同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile－对话窗口</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js" ></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="home" data-role="page">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>对话窗口演示</h1>
</div>
<div class="ui-content" role="main">
<a href="#confirmDialog" data-role="button" data-mini="true" data-inline="true">确认</a> //可加一个属性data-rel="dialog"
</div>
<div data-role="footer">
<h6>页尾</h6>
</div>
</div>
<div id="confirmDialog" data-role="page" data-dialog="true"> //如按钮加属性data-rel="dialog"而此可不写data-dialog="true"
<div data-role="header">
<h2>确认</h2>
</div>
<div class="ui-content" role="main">
<h2>请确认订单?</h2>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#home" id="confirmBtn" data-role="button" data-mini="true">确认订单</a>
</div>
<div class="ui-block-b">
<a href="#home" id="cancelBtn" data-role="button" data-mini="true">取消订单</a>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号