day9--jqueryMobile
2016-08-17 本文已影响0人
3feeb4458361
jQuery Mobile 是创建移动 web 应用程序的框架。适用于所有流行的智能手机和平板电脑。
- 移动端开发，首先应该加的代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
意思是，固定页面尺寸和设备尺寸的缩放比例为1。
- jqueryMobile应用的结构：
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
<p>我是一名移动开发者！</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
- data-role="footer" 创建页面底部的工具栏
- jqueryMobile可以在同一个文件中创建多个页面
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
如果不希望使用内部链接页面，可以使用外部文件：
<a href="externalfile.html">转到外部页面</a>
-
data-rel="dialog",用户点击（轻触）链接时创建一个对话框。
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog">转到页面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
-
data-transition="slide"，过渡效果，滑动。
<a href="#anylink" data-transition="slide">滑动到页面二</a>
jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。fade、flip、flow、pop、slide、slidefade、slideup、slidedown、turn、none
data-direction="reverse"，反向操作，以上动作都支持。
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
