jQuery Mobile 基础
第一章
1、页面：
<body> <div data-role="page"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="content"> <p>我现在是一个移动端开发者!!</p>
<a href="#anylink" data-transition="slide">切换到第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1>
<a href="#pagetwo" data-rel="dialog">Go to Page Two</a>
</div> </div> </body>
- data-role="page" 是在浏览器中显示的页面。
- data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
- data-role="content" 定义了页面的内容，比如文本， 图片，表单，按钮等。
- data-role="footer" 用于创建页面底部工具条。
- data-rel="dialog" 内定标识以对话框形式出现这个页面。
- data-transition 链接切换方式。
- 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
fade 默认。淡入到下一页
flip 从后向前翻转到下一页
flow 抛出当前页，进入下一页
pop 像弹出窗口一样进入下一页
slide 从右到左滑动到下一页
slidefade 从右到左滑动并淡入到下一页
slideup 从下到上滑动到下一页 尝试一下
slidedown 从上到下滑动到下一页
turn 翻到下一页
none 没有切换效果
2、按钮：
在 jQuery Mobile 中，按钮可通过三种方式创建：
- 使用 <button> 元素
- 使用 <input> 元素
- 使用带有 data-role="button" 的 <a> 元素
<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>
备注：默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：
<div data-role="controlgroup" data-type="horizontal"> <a href="#anylink" data-role="button">按钮 1</a> <a href="#anylink" data-role="button">按钮 2</a> <a href="#anylink" data-role="button">按钮 3</a> </div>
备注：请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮
<a href="#" data-role="button" data-rel="back">返回</a>
如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）
按钮的 data-* 属性
data-corners true | false 规定按钮是否圆角
data-mini true | false 规定按钮是否更小
data-shadow true | false 规定按钮是否有阴影
按钮图标：
<a href="#anylink" data-role="button" data-icon="search" class="ui-btn-right">Search</a>
备注：
1>、如需添加图标到您的按钮，请使用 data-icon 属性；
2>、如果只想显示图标，请设置 data-iconpos 为 "notext"；
3>、要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="delete" 删除
data-icon="info" 信息
data-icon="home" 首页
data-icon="back" 后退
data-icon="search" 搜索
data-icon="grid" 网格
3、工具栏：
<div data-role="footer" class="ui-btn"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">在Facebook上关注我</a> <a href="#" data-role="button" data-icon="plus">在Twitter上关注我</a> <a href="#" data-role="button" data-icon="plus">在Instagram上关注我</a> </div> </div>
备注：尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。为了解决这个问题，请把 "ui-btn" 放置在尾部的 class 上；
头部和尾部可以通过三种方式进行定位：
- Inline - 默认。头部栏和尾部栏与页面内容内联。
- Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
- Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。
<div data-role="footer" data-position="inline"></div> <div data-role="footer" data-position="fixed"></div> <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
页面导航
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li> <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li> <li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>
备注1：
当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。
如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：
备注2：
对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：
