JQuery Mobile学习笔记
JQuery Mobile
例子解释：
? ? ? ?
data-role="page" 是显示在浏览器中的页面 data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮） data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等 data-role="footer" 创建页面底部的工具栏
1
定位页眉和页脚
放置页眉和页脚的方式有三种：
? ? ?
Inline - 默认。页眉和页脚与页面内容位于行内。 Fixed - 页面和页脚会留在页面顶部和底部。 Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through
请使用 data-position 属性来定位页眉和页脚：
Inline 定位（默认）
2
jQuery Mobile 主题
主题化的页面、内容和页脚
主题化的对话框
实例
Go To The Themed Dialog Page
3
主题化的按钮
实例
Button Button Button
主题化的图标
实例
Plus
jQuery Mobile 过渡效果
jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果 注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换： 滑动到页面二
滑动 以上所有效果同时支持反向动作， 例如， 如果您希望页面从左向右滑动， 而不是从右向左， 请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。
4
jQuery Mobile 按钮
在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建：
? ? ?
使用
组合按钮
jQuery Mobile 提供了对按钮进行组合的简单方法。
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用， 以规定水平或垂直地 组合按钮： 实例
后退按钮(功能按钮)
如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）：
实例
返回
jQuery Mobile 按钮图标
jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。 如需向您的按钮添加图标，请使用 data-icon 属性：
搜索
定位图标
您也能够规定图标被放置的位置：上、右、下或左。 请使用 data-iconpos 属性来规定位置：
图标位置：
上 右 下 左
7
只显示图标
如果只需显示图标，请将 data-iconpos 设置为 "notext"：
搜索
jQuery Mobile 工具栏
工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航：
元素之后放置按钮链接，那么它不会显示在文本右侧。如需向页眉标题的右侧添加按钮， 请规定类名 "ui-btn-right"：
欢迎来到我的主页
搜索
提示：页眉可包含一个或两个按钮，然而页脚没有限制。
页脚栏
与页眉相比，页脚更具伸缩性 - 它们更实用且多变，所以能够包含所需数量的按钮：
实例
8
欢迎来到我的主页
搜索注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚 设置类名 "ui-btn"：
实例
jQuery Mobile 导航栏
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。 默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。 请使用 data-role="navbar" 属性来定义导航栏：
实例
提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个 按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它 会弯折为多行（参加页面底部的“更多实例”）。
9
活动按钮
当导航栏中的链接被敲击时，会获得选取外观（按下）。 如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"：
实例
jQuery Mobile 可折叠
可折叠的内容块
可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。 如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个 标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：
实例
点击我 - 我可以折叠！
我是可折叠的内容。
10
实例
点击我 - 我可以折叠！
现在我默认是展开的。
嵌套的可折叠块
可以嵌套可折叠内容块：
实例
点击我 - 我可以折叠！
我是被展开的内容。
点击我 - 我是嵌套的可折叠块！
我是嵌套的可折叠块中被展开的内容。
提示：可折叠内容块可以被嵌套您希望的任意次数。
可折叠集合
可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有 其他块会关闭。 创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：
11
实例
点击我 - 我可以折叠！
我是被展开的内容。
点击我 - 我可以折叠！
我是被展开的内容。
12