jqueryMobile
页面结构
data-role="page"代表一个页面
data-role="header"代表一个页面标题和搜索按钮
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
- data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
- data-role="footer" 创建页面底部的工具栏
-
<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-rel="dialog"以对话框的形式回到页面二
过渡效果
<a href="#pagetwo" data-transition="slide" >表示滑动到page2
fade | 默认。淡入淡出到下一页。 | 测试 |
flip | 从后向前翻动到下一页。 | 测试 |
flow | 抛出当前页面,引入下一页。 | 测试 |
pop | 像弹出窗口那样转到下一页。 | 测试 |
slide | 从右向左滑动到下一页。 | 测试 |
slidefade | 从右向左滑动并淡入到下一页。 | 测试 |
slideup | 从下到上滑动到下一页。 | 测试 |
slidedown | 从上到下滑动到下一页。 | 测试 |
turn | 转向下一页。 | 测试 |
none | 无过渡效果。 |