1.引用jquery mobile的css文件、js文件、jquery文件
(1)从 CDN 引用 jQuery Mobile
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
(2)下载 jQuery Mobile ----- html5 <script> 标签中不需要 type="text/javascript" 属性
<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>
2.body的基本组成结构
<body>
<div data-role="page" id="pageone">//div为页面 data-role="dialog" 表示div为对话框
<div data-role="header">
<h1>this is head!!</h1>
</div>
<div data-role="content">
<p><b>this is content!!</b></p>
</div>
<div data-role="footer">
<h1><font color="red">this is foot</font></h1>
</div>
</div>
</body>
3.过渡效果
下面的表格展示了可与 data-transition 属性一同使用的可用过渡：
如：data-transition="fade"
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面，引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
data-direction="reverse" 方向与跳转到该界面的方向相反
4.按钮的 data-* 属性
data-corners true | false 规定按钮是否有圆角。
data-mini true | false 规定是否是小型按钮。
data-shadow true | false 规定按钮是否有阴影。
data-mini 小尺寸
data-inset 圆角和外边距
data-transition 过渡
data-inline 多个按钮并排显示
5.按钮添加图标（可附加在按钮标签上）
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="arrow-u" 上箭头
data-icon="arrow-d" 下箭头
data-icon="plus" 加号
data-icon="minus" 减号
data-icon="delete" 删除
data-icon="check" 检查
data-icon="info" 信息
data-icon="home" 首页
data-icon="back" 返回
data-icon="forward" 向前
data-icon="gear" 齿轮
data-icon="search" 搜索
data-icon="refresh" 刷新
data-icon="grid" 网格
data-icon="star" 星行
data-icon="alert" 提醒
6.可使用的布局网格有四种：
网格类 class= 列 列宽度 对应元素子类 class=
ui-grid-a 2 50% / 50% ui-block-a | ui-block-b
ui-grid-b 3 33% / 33% / 33% ui-block-a | b | c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a | b | c | d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a | b | c | d | e
如 class="ui-grid-c" 则会将该标签所占宽度分为4份，每一个独立的标签依次占据一份，不足就空着。
如果第一行子标签没有class="ui-block-a"，则后面的占据前面的空白处。
如果从第二行开始子标签没有class="ui-block-a"，则从第二列开始。
***ui-block-a-class 将始终创建新行。
其中展示的样式可以自定义（如宽、高、背景等）
***交叉使用，可以创建多行多列的布局。
7.实现同一个布局文件中包含多个展示页面，以及页面间跳转
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此。data-role="page"
8.data-role="button" 表示当前元素是按钮
data-rel="back"表示返回上一级
9.分组效果
data-role="controlgroup" data-type="horizontal" 水平分组
data-role="controlgroup" data-type="vertical" 垂直分组
10.按钮的创建（几种方式，可附加不同效果）
<a href="#" data-role="button" data-inline="true" data-corners="false">
<input type="button" name="change" data-inline="true" data-corners="false" value="button2">
<button data-transition="pop" data-inline="true">转到页面二 </button>
****通过属性 class="ui-btn-right" 可控制页眉右边添加按钮
页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。
如果要修正该问题，请在页脚设置类名 "ui-btn"。
11.可折叠效果
data-role="collapsible" data-collapsed="false"
表示当前标签可折叠，同时默认是展开的。
创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。
在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记。
data-role="collapsible-set" 可以将几个折叠模块集中到一起
data-inset="false" data-role="collapsible" 没有圆角和边距的折叠块
<fieldset data-role="collapsible">... </fieldset> 控制一片区域可折叠
————————————————————————————————————
可折叠集合（手风琴）
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
</div>
*****改变可折叠块的图标
添加属性 data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
*****可折叠表单
fieldset和legend联合使用（label,input）
12.创建列表
添加属性：data-role="listview" 表示以列表形式展现内容项
*data-role="list-divider" 表示当前标签为分隔符
*data-autodividers="true" 自动产生分隔符(应用于同学录--按字母排序)
13.搜索过滤器
data-filter="true" data-icon="search" 表示对子项实现自动过滤搜索
data-filter-placeholder="搜索什么呢" 表示搜索框的默认内容(手动输入内容时消失，内容为空时展现)
14.带有分隔按钮的列表
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接。
jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，
链接中的文本（如有）将在用户划过该图标时显示。
15.给列表项附加计数泡沫
在子项后添加类似 <span class="ui-li-count">233</span>
16.列表图标
给图片标签添加属性 class="ui-li-icon" 表示使用 16x16px 的图标。
定位图标：
data-iconpos="top"
data-iconpos="right"
data-iconpos="bottom"
data-iconpos="left"
//只有图标没有文字的图标
data-icon="search" data-iconpos="notext"
17.基本表单控件：
文本框
搜索框
单选框
复选框
选择菜单
滑动条
翻转切换开关
*<form> 元素必须设置 method 和 action 属性
*每个表单元素必须设置唯一的 "id" 属性
*每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id
<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
如需隐藏label，请使用class="ui-hidden-accessible"，当您需要元素的placeholder属性充当label。
如果需要 label 和表单元素在宽屏幕上显示正常，
*请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset>元素来包装 label或表单元素。
fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。
当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。
当小于 480px 时，label 会被放置于表单元素之上。
*如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性
*jQuery Mobile 会自动通过 AJAX 进行表单提交，并会尝试将服务器响应整合入应用程序的 DOM 中。
18.html5中的类型
type="date" 日期类型
type="email" 邮箱类型
type="search"搜索框类型
19.单选按钮（以及复选框）
在 <fieldset> 元素中包装单选按钮。
您也可以增加一个 <legend> 元素来定义 <fieldset> 的标题。
在<fieldset>中用data-role="controlgroup" 属性来组合这些按钮
*如需对单选框或复选框进行水平分组，请使用 data-type="horizontal" 属性
20.选择菜单
如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素（分组）
<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
</optgroup>
</select>
21.自定义选择菜单
<select name="day" id="day" data-native-menu="false">
* 如需在选择菜单中选取多个选项，请在 <select> 元素中使用 multiple 属性
<select name="day" id="day" multiple data-native-menu="false">
22.滑块控件
滑块允许您从一定范围内的数字中选取值.
如需创建滑块，请使用 <input type="range">
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
如果您希望突出显示截止滑块值的这段轨道（背景色高亮），请添加属性 data-highlight="true"
23.切换开关（常用于开/关或对/错按钮）
如需创建切换，请使用 data-role="slider" 的 <select> 元素，并添加两个 <option> 元素
*使用 "selected" 属性来把选项之一设置为预选（突出显示）
24.主题
jQuery Mobile 提供了五种不同的样式主题，
从 "a" 到 "e" ， 每种主题带有不同颜色的按钮、栏、内容块，等等。
<div data-role="page" data-theme="a|b|c|d|e">
主题值 描述
a 默认。黑色背景上的白色文本。
b 蓝色背景上的白色文本 / 灰色背景上的黑色文本
c 亮灰色背景上的黑色文本
d 白色背景上的黑色文本
e 橙色背景上的黑色文本
*默认地，jQuery Mobile 为页眉和页脚使用 "a" 主题，为页眉内容使用 "c" 主题（亮灰）。
不过，您能够自如地对主题进行混合。
*data-overlay-theme="e"
data-overlay-theme 属性规定对话框出现在其上的页面的背景色。
*默认地，页面的子元素会继承应用主题的父元素的样式
data-role="navbar" 表示当前标签为导航栏
data-content-theme="e" 给子项内容应用主题
主题化划分按钮
<ul data-role="listview" data-split-theme="e">
<li data-role="divider" data-theme="a">浏览器</li>
25.添加新主题
请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。
只需拷贝一段样式，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。
如： data-theme="f"
您也可以通过在 HTML 文档中使用主题类来添加新样式
为工具条添加类 ui-bar-(a-z)，并为内容添加类 ui-body-(a-z)：
ui-bar-(a-z) 应用于header
ui-body-(a-z)应用于content
26.事件（ 网页能够响应的所有不同访客的动作 ）
触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
jQuery中的ready 事件表示文档加载结束后执行其中的jQuery代码
<script>
$(document).ready(function(){
// 此处是 jQuery 事件...
});
</script>
（1）在 jQuery Mobile 中，我们使用 pageinit 事件，该事件在页面已初始化并完善样式设置后发生。
第二个参数指向 ("#pageone") 表示指向id="pageone"的页面
<script>
$(document).on("pageinit","#pageone",function(){
// 此处是 jQuery 事件...
});
</script>
（2）jQuery on() 方法用于添加事件处理程序
27.jQuery Mobile Touch 事件（在用户触摸屏幕（页面）时触发）
*Touch 事件同样适用于桌面电脑：点击鼠标！
（1）tap 事件在用户敲击某个元素时触发。
$("p").on("tap",function(){
$(this).hide();
});
（2）taphold 事件在用户敲击某个元素并保持一秒时被触发
$("p").on("taphold",function(){
$(this).hide();
});
（3）swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发
$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});
（4）swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
（5）swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发
$("p").on("swiperight",function(){
alert("You swiped right!");
});
28.jQuery Mobile 滚动事件
*jQuery Mobile 提供两种滚动事件：在滚动开始和当滚动结束。
（1）scrollstart 事件在用户开始滚动页面时被触发
$(document).on("scrollstart",function(){
alert("开始滚动！");
});
（2）scrollstop 事件在用户停止滚动页面时被触发
$(document).on("scrollstop",function(){
alert("结束滚动！");
});
29.jQuery Mobile 方向事件
（1）orientationchange 事件在用户垂直或水平旋转移动设备时被触发。
*****如需使用 orientationchange 事件，请把它添加到 window 对象：
$(window).on("orientationchange",function(){
alert("方向已改变！");
});
****callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向：
"portrait"（设备被握持的方向是垂直的）或 "landscape"（设备被握持的方向是水平的）：
$(window).on("orientationchange",function(event){
alert("方向是：" + event.orientation);
});
——————————————————————————————
由于 orientationchange 事件与 window 对象绑定，我们能够使用 window.orientation 属性来，
例如，设置不同样式以区分 portrait 和 landscape 视图
window.orientation 属性对 portrait 视图返回 0，对 landscape 视图返回 90 或 -90。
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
30.jQuery Mobile 页面事件
Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时
（1）Initialization 事件: 在页面创建前——>页面创建——>页面初始化
pagebeforecreate 当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate 当页面已创建，但增强完成之前，触发该事件。
pageinit 当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。
$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件！")
});
（2）Load 事件：页面加载事件属于外部页面
无论外部页面何时载入 DOM，将触发两个事件。
第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。
pagebeforeload 在任何页面加载请求作出之前触发。
pageload 在页面已成功加载并插入 DOM 后触发。
pageloadfailed 如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。
$(document).on("pageload",function(event,data){
alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
（3）过渡事件：从一页过渡到下一页时使用
页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面
pagebeforeshow 在"去的"页面触发，在过渡动画开始前。
pageshow 在"去的"页面触发，在过渡动画完成后。
pagebeforehide 在"来的"页面触发，在过渡动画开始前。
pagehide 在"来的"页面触发，在过渡动画完成后。
____________________________
先隐藏后显示
$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
alert("页面二即将隐藏");//第二个参数#pagetwo表示事件相关的页面
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
alert("现在隐藏页面二");
});
31.定位页眉和页脚
放置页眉和页脚的方式有三种：
Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through
请使用 data-position 属性来定位页眉和页脚
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="fixed"></div>
如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen 属性
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
*****fullscreen 对于照片、图像和视频非常理想。
32.导航栏
使用 data-role="navbar" 属性来定义导航栏
按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：
一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。
不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行。
当导航栏中的链接被敲击时，会获得选取外观（按下）。
如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"
对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。
如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>
在导航栏中定位图标
<div data-role="navbar" data-iconpos="left">
33.引用的图片当成图标使用需要使用属性 class="ui-li-icon"
超链接的默认图标是右箭头
data-role="none" 取消文本框的样式
34.日历
<p class="ui-li-aside">Re: Appointment</p></a> 将该内容放置在边角显示
data-role="list-divider" 列表分割属性
35.范围滑块（一段范围）
<div data-role="rangeslider">
<label for="price-min">价格：</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">价格：</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
(1)从 CDN 引用 jQuery Mobile
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
(2)下载 jQuery Mobile ----- html5 <script> 标签中不需要 type="text/javascript" 属性
<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>
2.body的基本组成结构
<body>
<div data-role="page" id="pageone">//div为页面 data-role="dialog" 表示div为对话框
<div data-role="header">
<h1>this is head!!</h1>
</div>
<div data-role="content">
<p><b>this is content!!</b></p>
</div>
<div data-role="footer">
<h1><font color="red">this is foot</font></h1>
</div>
</div>
</body>
3.过渡效果
下面的表格展示了可与 data-transition 属性一同使用的可用过渡：
如：data-transition="fade"
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面，引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
data-direction="reverse" 方向与跳转到该界面的方向相反
4.按钮的 data-* 属性
data-corners true | false 规定按钮是否有圆角。
data-mini true | false 规定是否是小型按钮。
data-shadow true | false 规定按钮是否有阴影。
data-mini 小尺寸
data-inset 圆角和外边距
data-transition 过渡
data-inline 多个按钮并排显示
5.按钮添加图标（可附加在按钮标签上）
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="arrow-u" 上箭头
data-icon="arrow-d" 下箭头
data-icon="plus" 加号
data-icon="minus" 减号
data-icon="delete" 删除
data-icon="check" 检查
data-icon="info" 信息
data-icon="home" 首页
data-icon="back" 返回
data-icon="forward" 向前
data-icon="gear" 齿轮
data-icon="search" 搜索
data-icon="refresh" 刷新
data-icon="grid" 网格
data-icon="star" 星行
data-icon="alert" 提醒
6.可使用的布局网格有四种：
网格类 class= 列 列宽度 对应元素子类 class=
ui-grid-a 2 50% / 50% ui-block-a | ui-block-b
ui-grid-b 3 33% / 33% / 33% ui-block-a | b | c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a | b | c | d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a | b | c | d | e
如 class="ui-grid-c" 则会将该标签所占宽度分为4份，每一个独立的标签依次占据一份，不足就空着。
如果第一行子标签没有class="ui-block-a"，则后面的占据前面的空白处。
如果从第二行开始子标签没有class="ui-block-a"，则从第二列开始。
***ui-block-a-class 将始终创建新行。
其中展示的样式可以自定义（如宽、高、背景等）
***交叉使用，可以创建多行多列的布局。
7.实现同一个布局文件中包含多个展示页面，以及页面间跳转
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此。data-role="page"
8.data-role="button" 表示当前元素是按钮
data-rel="back"表示返回上一级
9.分组效果
data-role="controlgroup" data-type="horizontal" 水平分组
data-role="controlgroup" data-type="vertical" 垂直分组
10.按钮的创建（几种方式，可附加不同效果）
<a href="#" data-role="button" data-inline="true" data-corners="false">
<input type="button" name="change" data-inline="true" data-corners="false" value="button2">
<button data-transition="pop" data-inline="true">转到页面二 </button>
****通过属性 class="ui-btn-right" 可控制页眉右边添加按钮
页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。
如果要修正该问题，请在页脚设置类名 "ui-btn"。
11.可折叠效果
data-role="collapsible" data-collapsed="false"
表示当前标签可折叠，同时默认是展开的。
创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。
在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记。
data-role="collapsible-set" 可以将几个折叠模块集中到一起
data-inset="false" data-role="collapsible" 没有圆角和边距的折叠块
<fieldset data-role="collapsible">... </fieldset> 控制一片区域可折叠
————————————————————————————————————
可折叠集合（手风琴）
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
<div data-role="collapsible">
<h3>点击我 - 我可以折叠！</h3>
<p>我是可折叠的内容。</p>
</div>
</div>
*****改变可折叠块的图标
添加属性 data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
*****可折叠表单
fieldset和legend联合使用（label,input）
12.创建列表
添加属性：data-role="listview" 表示以列表形式展现内容项
*data-role="list-divider" 表示当前标签为分隔符
*data-autodividers="true" 自动产生分隔符(应用于同学录--按字母排序)
13.搜索过滤器
data-filter="true" data-icon="search" 表示对子项实现自动过滤搜索
data-filter-placeholder="搜索什么呢" 表示搜索框的默认内容(手动输入内容时消失，内容为空时展现)
14.带有分隔按钮的列表
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接。
jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，
链接中的文本（如有）将在用户划过该图标时显示。
15.给列表项附加计数泡沫
在子项后添加类似 <span class="ui-li-count">233</span>
16.列表图标
给图片标签添加属性 class="ui-li-icon" 表示使用 16x16px 的图标。
定位图标：
data-iconpos="top"
data-iconpos="right"
data-iconpos="bottom"
data-iconpos="left"
//只有图标没有文字的图标
data-icon="search" data-iconpos="notext"
17.基本表单控件：
文本框
搜索框
单选框
复选框
选择菜单
滑动条
翻转切换开关
*<form> 元素必须设置 method 和 action 属性
*每个表单元素必须设置唯一的 "id" 属性
*每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id
<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
如需隐藏label，请使用class="ui-hidden-accessible"，当您需要元素的placeholder属性充当label。
如果需要 label 和表单元素在宽屏幕上显示正常，
*请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset>元素来包装 label或表单元素。
fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。
当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。
当小于 480px 时，label 会被放置于表单元素之上。
*如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性
*jQuery Mobile 会自动通过 AJAX 进行表单提交，并会尝试将服务器响应整合入应用程序的 DOM 中。
18.html5中的类型
type="date" 日期类型
type="email" 邮箱类型
type="search"搜索框类型
19.单选按钮（以及复选框）
在 <fieldset> 元素中包装单选按钮。
您也可以增加一个 <legend> 元素来定义 <fieldset> 的标题。
在<fieldset>中用data-role="controlgroup" 属性来组合这些按钮
*如需对单选框或复选框进行水平分组，请使用 data-type="horizontal" 属性
20.选择菜单
如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素（分组）
<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
</optgroup>
</select>
21.自定义选择菜单
<select name="day" id="day" data-native-menu="false">
* 如需在选择菜单中选取多个选项，请在 <select> 元素中使用 multiple 属性
<select name="day" id="day" multiple data-native-menu="false">
22.滑块控件
滑块允许您从一定范围内的数字中选取值.
如需创建滑块，请使用 <input type="range">
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
如果您希望突出显示截止滑块值的这段轨道（背景色高亮），请添加属性 data-highlight="true"
23.切换开关（常用于开/关或对/错按钮）
如需创建切换，请使用 data-role="slider" 的 <select> 元素，并添加两个 <option> 元素
*使用 "selected" 属性来把选项之一设置为预选（突出显示）
24.主题
jQuery Mobile 提供了五种不同的样式主题，
从 "a" 到 "e" ， 每种主题带有不同颜色的按钮、栏、内容块，等等。
<div data-role="page" data-theme="a|b|c|d|e">
主题值 描述
a 默认。黑色背景上的白色文本。
b 蓝色背景上的白色文本 / 灰色背景上的黑色文本
c 亮灰色背景上的黑色文本
d 白色背景上的黑色文本
e 橙色背景上的黑色文本
*默认地，jQuery Mobile 为页眉和页脚使用 "a" 主题，为页眉内容使用 "c" 主题（亮灰）。
不过，您能够自如地对主题进行混合。
*data-overlay-theme="e"
data-overlay-theme 属性规定对话框出现在其上的页面的背景色。
*默认地，页面的子元素会继承应用主题的父元素的样式
data-role="navbar" 表示当前标签为导航栏
data-content-theme="e" 给子项内容应用主题
主题化划分按钮
<ul data-role="listview" data-split-theme="e">
<li data-role="divider" data-theme="a">浏览器</li>
25.添加新主题
请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。
只需拷贝一段样式，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。
如： data-theme="f"
您也可以通过在 HTML 文档中使用主题类来添加新样式
为工具条添加类 ui-bar-(a-z)，并为内容添加类 ui-body-(a-z)：
ui-bar-(a-z) 应用于header
ui-body-(a-z)应用于content
26.事件（ 网页能够响应的所有不同访客的动作 ）
触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
jQuery中的ready 事件表示文档加载结束后执行其中的jQuery代码
<script>
$(document).ready(function(){
// 此处是 jQuery 事件...
});
</script>
（1）在 jQuery Mobile 中，我们使用 pageinit 事件，该事件在页面已初始化并完善样式设置后发生。
第二个参数指向 ("#pageone") 表示指向id="pageone"的页面
<script>
$(document).on("pageinit","#pageone",function(){
// 此处是 jQuery 事件...
});
</script>
（2）jQuery on() 方法用于添加事件处理程序
27.jQuery Mobile Touch 事件（在用户触摸屏幕（页面）时触发）
*Touch 事件同样适用于桌面电脑：点击鼠标！
（1）tap 事件在用户敲击某个元素时触发。
$("p").on("tap",function(){
$(this).hide();
});
（2）taphold 事件在用户敲击某个元素并保持一秒时被触发
$("p").on("taphold",function(){
$(this).hide();
});
（3）swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发
$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});
（4）swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
（5）swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发
$("p").on("swiperight",function(){
alert("You swiped right!");
});
28.jQuery Mobile 滚动事件
*jQuery Mobile 提供两种滚动事件：在滚动开始和当滚动结束。
（1）scrollstart 事件在用户开始滚动页面时被触发
$(document).on("scrollstart",function(){
alert("开始滚动！");
});
（2）scrollstop 事件在用户停止滚动页面时被触发
$(document).on("scrollstop",function(){
alert("结束滚动！");
});
29.jQuery Mobile 方向事件
（1）orientationchange 事件在用户垂直或水平旋转移动设备时被触发。
*****如需使用 orientationchange 事件，请把它添加到 window 对象：
$(window).on("orientationchange",function(){
alert("方向已改变！");
});
****callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向：
"portrait"（设备被握持的方向是垂直的）或 "landscape"（设备被握持的方向是水平的）：
$(window).on("orientationchange",function(event){
alert("方向是：" + event.orientation);
});
——————————————————————————————
由于 orientationchange 事件与 window 对象绑定，我们能够使用 window.orientation 属性来，
例如，设置不同样式以区分 portrait 和 landscape 视图
window.orientation 属性对 portrait 视图返回 0，对 landscape 视图返回 90 或 -90。
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
30.jQuery Mobile 页面事件
Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时
（1）Initialization 事件: 在页面创建前——>页面创建——>页面初始化
pagebeforecreate 当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate 当页面已创建，但增强完成之前，触发该事件。
pageinit 当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。
$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件！")
});
（2）Load 事件：页面加载事件属于外部页面
无论外部页面何时载入 DOM，将触发两个事件。
第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。
pagebeforeload 在任何页面加载请求作出之前触发。
pageload 在页面已成功加载并插入 DOM 后触发。
pageloadfailed 如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。
$(document).on("pageload",function(event,data){
alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
（3）过渡事件：从一页过渡到下一页时使用
页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面
pagebeforeshow 在"去的"页面触发，在过渡动画开始前。
pageshow 在"去的"页面触发，在过渡动画完成后。
pagebeforehide 在"来的"页面触发，在过渡动画开始前。
pagehide 在"来的"页面触发，在过渡动画完成后。
____________________________
先隐藏后显示
$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
alert("页面二即将隐藏");//第二个参数#pagetwo表示事件相关的页面
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
alert("现在隐藏页面二");
});
31.定位页眉和页脚
放置页眉和页脚的方式有三种：
Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through
请使用 data-position 属性来定位页眉和页脚
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="fixed"></div>
如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen 属性
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
*****fullscreen 对于照片、图像和视频非常理想。
32.导航栏
使用 data-role="navbar" 属性来定义导航栏
按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：
一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。
不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行。
当导航栏中的链接被敲击时，会获得选取外观（按下）。
如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"
对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。
如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>
在导航栏中定位图标
<div data-role="navbar" data-iconpos="left">
33.引用的图片当成图标使用需要使用属性 class="ui-li-icon"
超链接的默认图标是右箭头
data-role="none" 取消文本框的样式
34.日历
<p class="ui-li-aside">Re: Appointment</p></a> 将该内容放置在边角显示
data-role="list-divider" 列表分割属性
35.范围滑块（一段范围）
<div data-role="rangeslider">
<label for="price-min">价格：</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">价格：</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
扫一扫
9927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
