JQuery Mobile
按钮可通过三种方法创建：
- 使用 <button> 元素
- 使用 <input> 元素
- 使用 data-role="button" 的 <a> 元素
- data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。
-
行内按钮
默认情况下，按钮会占据屏幕的全部宽度。如果需要两个或多个按钮并排显示，请添加 data-inline="true"
-
组合按钮
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮
-
后退按钮
使用 data-rel="back" 属性:<a href="#" data-role="button"
data-rel="back">返回</a> -
定位图标
规定图标被放置的位置：上、右、下或左。使用 data-iconpos 属性:left,top,right,bottom
如果只需显示图标，请将 data-iconpos 设置为 "notext"
单独向页眉标题的某一侧添加一个按钮：class="ui-btn-right">
页脚栏
与页眉相比，页脚更具伸缩性。页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 "ui-btn"
定位页眉和页脚
使用 data-position 属性：
- Inline - 默认。页眉和页脚与页面内容位于行内。
- Fixed - 页面和页脚会留在页面顶部和底部。
- Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部
导航栏
使用 data-role="navbar" 属性。活动按钮：使用 class="ui-btn-active"
为每个按钮设置“被选”外观，以表示用户正在浏览该页面。<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>
可折叠的内容块
创建可折叠的内容块，向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6）。如需在页面加载时扩展内容，请使用 data-collapsed="false"
可折叠集合
可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
</div>
布局网格
一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。但当需要定位更小的元素，比如按钮或导航栏时，列布局就恰如其分。
网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。
eg：对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。
列表视图
创建列表，向 <ol> 或 <ul> 元素添加 data-role="listview"。为列表添加圆角和外边距，使用 data-inset="true" 属性
列表分隔符：向 <li> 元素添加 data-role="list-divider" 属性
列表是字母顺序的（比如通讯录），自动添加恰当的分隔符：在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性
搜索过滤器
在列表中添加搜索框，请使用 data-filter="true" 属性，修改默认文本，请使用 data-filter-placeholder 属性
列表缩略图
对于大于 16x16px 的图像，请在链接中添加 <img> 元素。
列表图标
向 <img> 元素添加 class="ui-li-icon" 属性
计数泡沫
计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字
表单结构
- <form> 元素必须设置 method 和 action 属性
- 每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。
- 每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。
- 隐藏 label，请使用类 ui-hidden-accessible
- 如需 label 和表单元素在宽屏幕上显示正常，用 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素
- 如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性
文本输入
使用 placeholder 来规定简短的提示，以描述输入字段的预期值：<input placeholder="sometext">
用 data-role="controlgroup" 属性来组合按钮；对单选框或复选框进行水平分组，用 data-type="horizontal" 属性
选择菜单
如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素
自定义选择菜单
在所有移动设备上显示一致外观的选择菜单，使用 自定义选择菜单，data-native-menu="false" 属性
滑块控件
<input type="range" name="points" id="points" value="50" min="0" max="100">，突出显示截止滑块值的这段轨道，添加 data-highlight="true"
创建切换开关，使用 data-role="slider" 的 <select> 元素，并添加两个 <option selected> /*设置为预选（突出显示）*/ 元素 （on,off）
jQuery Mobile 事件
- 触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
- 滚动事件 - 当上下滚动时触发
- 方向事件 - 当设备垂直或水平旋转时触发
- 页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
- jQuery on() 方法用于添加事件处理程序
- Touch 事件同样适用于桌面电脑：点击鼠标！
- tap 事件在用户敲击某个元素时触发
- taphold 事件在用户敲击某个元素并保持一秒时被触发
- swipe 事件在用户在某个元素上水平滑动超过 30px 时被触
- swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发
- swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发
- scrollstart 事件在用户开始滚动页面时被触发
- scrollstop 事件在用户停止滚动页面时被触
- orientationchange 事件在用户垂直或水平旋转移动设备时被触发,使用 orientationchange 事件，把它添加到 window 对象;callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向："portrait" （设备被握持的方向是垂直的）或 "landscape" （设备被握持的方向是水平的）：
