jQueryMobile 的页，页面之间的跳转，切换效果，预加载，使用脚本控制页，与页相关的事件，添加主题，网格布局
1. 为页添加页头页脚，链接其他页面文件
<body>
<div data-role="page">
<div data-role="header">
<h1>page header</h1>
</div>
<div data-role="content">
this is a page
</div>
<div data-role="footer">
<h1>page footer</h1>
</div>
</div>
</body>
此时页脚显示在内容的末尾，而不是页面的末尾。
把data-position属性设置为fixed就可以修正。同时内容区还可以滚动。（需测试。并非所有浏览器都支持这CSS特性）
-------
页面切换效果及页面跳转：
slide 默认 滑动
pop 弹出
slideup 向上卷起
sliddown 向下卷起
slidfade 滑动并淡入淡出
fade 淡入淡出
flip 反转
turn 转换
flow 流动
none 无
<body>
<div id="page1" data-role="page"> //添加id属性，确定页面，
<div data-role="header">
<h1>page 1</h1>
</div>
<div data-role="content">
this is a page1
<p><a href="#page2" data-transition="pop">go to page 2</a></p> //a 标签利用 id 属性实现页面跳转
//data-transition="pop" 实现单独页面切换特效
<p><a href="page.html">go to page 1</a></p> //链接到其他html页
//jQueryMoblie会使用Ajax载入指定页面文件，并自动显示它的第一个页，如需禁止Ajax载入页则将a标签属性 data-ajax="false"
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h1>page 2</h1>
</div>
<div data-role="content">
this is a page2
<p><a href="#page1">go to page 1</a></p>
<p><a href="#page1">go to page 1</a></p>
</div>
</div>
</body>
如需改变所有导航的切换动画则设置全局选项。
<script type="text/javascript">
$(document).bind("mobileinit",function(){
$.mobile.defaultPageTranstion="fale" //全局设置为淡入淡出
});
</script>
如多个HTML页面中有重复的page ID则导航混乱。
1.一个HTML页定义一个page页
2.禁用Ajax载入页，但会失去切换特效。 将a标签属性 data-ajax="false"。
预加载
jQueryMobile悄悄加载用户还没有点击的链接，这样用户点击链接，内容就会马上呈现。
这在网络较慢且时好时坏的时候使用。但这会使用较多流量。
建议将此功能设置为选项供用户选择，让用户决定该应用程序的重要性是否需要预加载功能。
<p><a href="#page1" data-prefetch>go to page 1</a></p>
2.使用脚本控制jQueryMobile页
有时需要主动，而不是用户点击来切换页。可使用javascript控制页导航，实现导航的精细控制。
2.1 改变当前页
2.2 当前页是哪个页
2.3 后台载入页
3. 与页相关的事件
3.1 页面初始化
3.2 页面加载事件
3.3 响应页面切换
4. 使用主题
a b c d e 五种主题色系
<div id="page1" data-role="page" data-theme="a">
</div>
也可为具体某个元素设置色系
5. 创建网格布局
class="ui-grid-a" 2 列 class="ui-block-a" class="ui-block-b"
ui-grid-b 3
ui-grid-c 4
ui-grid-d 5 a b c d e
之后每个包含 class="ui-block-a"
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
