目录
1. 简介
2. 使用
移动web框架
用于创建移动web页面
1.简介
1.1 示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
<script
<script
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页面标题</h1>
</div>
<div data-role="content">
<p>页面内容</p>
</div>
<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>
</body>
</html>
说明：
1.data-role="page" 标识页面(可以多个页面，当前只会显示一个)
2.data-role="header" 页面顶部工具栏（常用于标题和搜索按钮）
3.data-role="content" 页面内容（比如文本、图像、表单和按钮）
4.data-role="footer" 页面底部工具栏
5.id="pageone" 用来区别页面
6. header、content、footer可用于其他标签下
1.2 页面作为弹框
<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>
说明：
1.data-rel="dialog" 将页面作为弹框
data-close-btn-text
关闭按钮标题
data-dom-cache
是否为个别页面清除 jQuery DOM 缓存（如果设置 true，则需要注意对 DOM 的管理，并全面测试所有移动设备）
data-overlay-theme
规定对话页面的叠加（背景）色
data-theme
样式
data-title
标题
data-url
该值用于更新 URL，而不是用于请求页面。
data-add-back-btn
是否自动添加后退按钮（仅用于页眉）
data-back-btn-text
后退按钮的文本
data-back-btn-theme
后退按钮的主题颜色
data-close-btn-text
对话上的关闭按钮的文本
data-dom-cache
规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。
data-overlay-theme
对话页面的叠加（背景）色。
data-theme
页面的主题颜色。默认是 "c"。
2.使用
在head中引用
<link rel="stylesheet"
<script
<script
2.1 导航栏
由一组水平排列的链接构成
默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）
<div data-role="header">
<!--通常位于页眉或页脚内部，也可以放在内容中-->
<!--默认均分，超过5个则变成多行-->
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">主页</a></li>
<li><a href="#" data-icon="arrow-r">第二页</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
说明：
1、data-role="navbar" 导航栏
2、class="ui-btn-active" 设为选中状态（会变蓝）
class="ui-btn-active ui-state-persist" 选中后保持蓝色（常用）
3、data-icon 图标（可用于其他标签）
home首页图标、arrow-r右边箭头、search图标、
data-iconpos 图标的位置
left 、 right 、 top（默认 ，图标在文本上方）、 bottom
2.2 网格
<div class="ui-grid-a">
<div class="ui-block-a">
<span>第一列</span>
</div>
<div class="ui-block-b">
<span>第二列</span>
</div>
</div>
说明：（均分）
ui-grid-a：2列，ui-block-a|b
ui-grid-b：3列，ui-block-a|b|c
ui-grid-c：4列，ui-block-a|b|c|d
ui-grid-d：5列，ui-block-a|b|c|d|e
一列多行
多个ui-block-a|... 表示：一列有多行。如（第一列有两行）：
<div class="ui-block-a"></div>
<div class="ui-block-a"></div>
自定义格式
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
响应式
<div class="ui-grid-b ui-responsive"></div>
2.3 列表（类似iOS的UITableView）
ol、ul
有序
<ol data-role="listview">
<!--默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")-->
<li><a href="#">列表项</a></li>
<li data-role="list-divider">欧洲</li>
<li><a href="#">列表项</a></li>
</ol>
无序
<ul data-role="listview" data-inset="true">
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
</ul>
说明：
1、data-role="listview" ：标识列表
2、data-inset="true" ：是否有圆角和外边距（默认：无）
3、data-filter="true" ：是否在最上加搜索框（类似iOS的tableView头视图）
data-filter-placeholder="搜索姓名" ：搜索框placeHolder
data-filter-theme ：搜索过滤程序的主题颜色。默认是 "c"。
4、data-icon ：列表的图标
5、data-theme ：列表的主题颜色。
6、
data-role="list-divider" ：分割（类似iOS的组头视图）
data-autodividers="true" ：自动分割，文本为li首字母（类似iOS的组头视图）
data-split-icon ：划分按钮的图标。默认是 "arrow-r"
data-split-theme ：划分按钮的主题颜色。默认是 "b"。
data-divider-theme ：列表分隔符的主题颜色。默认是 "b"。
data-count-theme ：计数泡沫的主题颜色。默认是 "c"
列表内容（li）
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png"> 左侧图片
<h2>主标题</h2>
<p>副标题</p>
</a>
</li>
</ul>
说明：
1、data-icon="plus"
右侧小图标
默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)
data-icon="false" 将会移除图标
2、class="ui-li-icon"：左侧图片大小为16*16（没有该属性，会自动把左侧图像调整至 80x80px，位于左侧）
3、li中若有2个<a>：则分割为前后2部分，将内容和右侧箭头分割
4、<span class="ui-li-count">335</span></a> ： 右侧小圆圈内数字（气泡数字）
5、data-role="popup" 气泡弹窗
6、data-filtertext 搜索关键字会搜索到。
7、class="ui-li-aside" 位于右上方
8、data-theme 列表项的主题颜色。
过滤列表、表格、其他
<form class="ui-filterable">
<input id="myFilter" data-type="search" placeholder="根据名称搜索..">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
2.4 工具栏
头部
<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>
定位
data-position="inline"
inline：默认，随页面滚动
fixed：位置固定，不随页面滚动
data-position="fixed" data-fullscreen="true"
位置固定，且会半透明覆盖内容（底部显示不全）
data-disable-page-zoom
是否允许用户缩放
data-fullscreen
是否覆盖
data-tap-toggle
点击 切换是否可见
data-transition
点击时的过渡
data-update-page-padding
规定当发生 resize、transition 以及 "updatelayout" 事件时更新页面上下内边距（jQuery Mobile 总是在 "pageshow" 事件发生时更新内边距）
data-visible-on-page-show
规定在显示父页面时的工具栏可见性
data-theme
页眉
只能包含1个或两个按钮
data-id
唯一 ID
左右2侧各一个按钮，中间标题
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>
左侧一个按钮，中间标题
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>
右侧一个按钮，中间标题
需要+ class="ui-btn-right"
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
页脚
可以包含多个按钮
data-id
唯一 ID
<div data-role="footer">
<a href="#" data-role="button">转播到新浪微博</a>
<a href="#" data-role="button">转播到腾讯微博</a>
<a href="#" data-role="button">转播到 QQ 空间</a>
</div>
class="ui-btn"
默认不会居中，可加此项居中
2.6 弹窗
<!-- div 弹窗与点击的 a 链接必须在同一个页面上-->
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-content">显示弹窗</a>
<!--弹窗-->
<div data-role="popup" id="myPopup" data-overlay-theme="b" data-arrow="l">
<p>这是一个简单的弹窗</p>
</div>
说明：
1、ui-content : 内边距和外边距
2、data-overlay-theme="b"：半透明背景（b深色，a浅色）经常用于查看大图片
3、data-arrow="l" 弹窗小三角方向，"l" (左边), "t" (顶部), "r" (右边) or "b" (底部)
4、data-position-to="#demo" 现实的位置（其他标签id为demo）
5、data-transition="fade" 过渡
6、data-dismissible="false" 只能通过删除按钮消失，默认点击背景会消失
查看大图片
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="/wp-content/uploads/2015/10/runoob.jpeg" alt="Runoob" style="width:200px;"></a>
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<img src="/wp-content/uploads/2015/10/runoob.jpeg" style="width:800px;height:400px;" alt="Runoob">
</div>
右上角删除小图标
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
2.7 页面跳转动画
<a href="#anylink" data-transition="slide">滑动到页面二</a>
data-direction="reverse" 则动画效果相反
data-transition 可用于a、form
fade 淡入淡出(默认)
flip 翻动（左侧下右侧上）
flow 当前页面缩放并向左抛出
pop 弹窗式
slide 第二页从右向左滑动
slidefade 第二页从右向左滑动，并淡入
slideup 第二页从上向下滑动
slidedown 第二页从下向上滑动
turn 以左侧为轴向左逆转
none 无
2.8 按钮
三种方法:
使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素
单个按钮
<button>按钮</button>
<input type="button" value="按钮">
<a href="#" data-role="button">按钮</a>
说明：
1、data-inline="true" 按钮宽度自适应内容，且不换行。默认：占一行
2、data-rel="back" 忽略href，回退至上一页
3、data-corners="true" 是否圆角（默认：有）
4、data-mini="true" 是否小型（比默认小一号）
5、data-shadow="true" 是否有阴影（默认：有）
6、data-theme="" 主题
7、data-ajax="true" 是否禁用ajax
8、data-position-to 规定弹出框的位置
Origin - 默认。在打开它的链接上弹出。
jQuery selector - 在指定元素上弹出。
Window - 在窗口屏幕中间弹出。
9、图标位置
data-iconpos="top"
top ：图标在上
bottom ：图标在下
left ：图标在左（默认）
right ：图标在右
10、图标
data-icon="search"
plus ：圆内加号+
minus ：圆内加号-
arrow-l ：圆内左箭头
arrow-r ：圆内右箭头
arrow-u ：圆内上箭头
arrow-d ：圆内下箭头
check ：圆内对勾
delete ：圆内删除x
info ：圆内信息I
home ：圆内房子
back ：圆内返回键
forward ：圆内向右键
search ：圆内搜索
grid ：圆内九宫格
gear ：圆内齿轮（设置）
refresh ：圆内刷新
star ：圆内星星
alert ：圆内警告（感叹号）
11、图标阴影
data-iconshadow="true"
icon是否有阴影
12、图标（无文本）
data-iconpos="notext"
忽略文字，只显示图标
13、data-transition 过渡
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
14、data-rel
back | dialog | external | popup
Back - 在历史记录中向后移动一步。
Dialog - 将页面作为对话来打开，不在历史中记录。
External - 链接到另一域。
opens - 打开弹出窗口。
15、data-prefetch="true"
规定是否把页面预取到 DOM 中，以使其在用户访问时可用。
16、data-dom-cache
规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。
17、data-direction
反转过渡动画（仅用于页面或对话）
另一种表示按钮
<a href="#" class="ui-btn ui-btn-inline ui-corner-all ui-mini ui-shadow ui-icon-search ui-btn-icon-top">按钮</a>
ui-btn:黑背景、白文本
ui-btn-inline：宽自适应文本
ui-corner-all：圆角
ui-mini：小
ui-shadow：阴影
ui-icon-search：图标
ui-btn-icon-top：图标位置
ui-nodisc-icon：图标（移除灰色圆背景）
ui-alt-icon：图标（黑色填充色）
一组按钮
<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>
说明：
1、data-role="controlgroup" ：一组
2、button间没有边距，且第一和最后一个有圆角
3、data-type="horizontal|vertical（默认）" 方向
4、data-mini="true" 是否小型（比默认小一号）
2.5 可折叠
单个折叠
可折叠
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
</div>
说明：
data-role="collapsible" ：标识折叠
h1-h6 ：标题
任意元素 ：折叠内容
data-collapsed="false" ：是否折叠显示（默认：折叠）
data-inset="false" ：是否有圆角（默认：有）
data-mini="true" ：是否比默认小型
data-collapsed-icon="arrow-d" ：折叠时的图标
data-expanded-icon="arrow-u" ：展开时的图标
data-content-theme=""
data-theme=""
data-iconpos="left | right | top | bottom" : 图标位置
一组折叠
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
</div>
2.8 表单
<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
说明：
<form> 必须设置 method 、action
每一个元素必须有一个label（对应唯一id）
class="ui-hidden-accessible" ：隐藏 label
<div data-role="fieldcontain"></div> : 使内部的label和元素在一行（当页面宽度大于 480px 时）
data-role="none" ：不使用默认样式
data-type="horizontal" ：配合组使用，横纵向
text文本框、email、search、range滑块、radio单选框（配合组）、checkbox多选框（配合组）
<label for="fullname">全名：</label>
<input type="text" name="fullname" id="fullname">
text
data-mini="true" ：是否小型
data-role="true" ：是否阻止默认样式
data-theme="" : 样式
滑块slider
data-hightlight="true" ：标识左侧高亮
data-mini="true" ：是否小型
data-role="true" ：是否阻止默认样式
data-theme="" : 样式
data-track-theme="" : 样式
多选框、单选框
data-mini="true" ：是否小型
data-role="true" ：是否阻止默认样式
data-theme="" : 样式
文本框（随输入内容变高）
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
下拉选项
<fieldset data-role="fieldcontain">
<label for="day">选择日期</label>
<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
</optgroup>
</select>
</fieldset>
说明：
optgroup：分割一组相关
data-native-menu="false" : 弹窗样式
multiple：多选
data-role="true" ：是否阻止默认样式
data-theme="" : 样式
data-overlay-theme="" : 样式
data-placeholder="true" ：可以在非原生 select 的 <option> 元素上设
data-mini="true" ：是否小型
data-inline="true" ：是否行内
data-icon="" ：图标
data-iconpos="left | right | top | bottom | notext" ：图标位置
开关
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off" selected >Off</option>
</select>
</div>
data-role="true" ：是否阻止默认样式
data-mini="true" ：是否小型
data-theme="" : 样式
data-track-theme="" : 样式
一组
<fieldset data-role="controlgroup">
</fieldset >
一组，且label和元素在一行
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
2.9 主题（自定义样式）
jQuery Mobile 提供了五种不同的样式主题
<div data-role="page" data-theme="a"></div>
说明：
data-theme="a|b|c|d|e"
a 黑色背景,白色文本(默认)
b 蓝色背景白色文本，灰色背景黑色文本
c 亮灰色背景黑色文本
d 白色背景黑色文本
e 橙色背景黑色文本
页眉和页脚默认使用 "a" 主题
页眉、内容、页脚
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
按钮
<a href="#" data-role="button" data-theme="a">Button</a>
图标
<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>
对话框
<div data-role="page" id="pagetwo" data-overlay-theme="e"></div>
折叠框
<div data-role="collapsible" data-theme="b" data-content-theme="e">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
划分
<ul data-role="listview" data-split-theme="e">
自定义主题
拷贝一段加 -(f-z)
<style>
.ui-bar-f{
color:green;
background-color:yellow;
}
</style>
data-theme="f"
2.10 事件
触摸事件 - 当触摸屏幕时触发（敲击和滑动）
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
<script>
$(document).on("pageinit","#pageone",function(){
// 页面加载完毕并完善样式后调用
// 事件。。。
});
</script>
通过on绑定事件
点击后调用
$("p").on("tap",function(){
$(this).hide();
});
点击（并保持按下1s）后调用
$("p").on("taphold",function(){
$(this).hide();
});
滑动超过30px调用
$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});
从左滑动超过30px调用
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
从右滑动超过30px调用
$("p").on("swiperight",function(){
alert("You swiped right!");
});
页面滚动后调用
$(document).on("scrollstart",function(){
alert("开始滚动！");
});
页面结束滚动后调用
$(document).on("scrollstop",function(){
alert("结束滚动！");
});
方向改变后调用（portrait垂直、landscape水平）
$(window).on("orientationchange",function(event){
alert("方向是：" + event.orientation);
if(window.orientation == 0){ // Portrait
$("p").css({"background-color":"yellow","font-size":"300%"});
}else{ // Landscape
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件
$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate 事件！");
});
页面已创建，但增强完成之前，触发该事件
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件！");
});
页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件！")
});
Page Load/Unload - 当页面加载时、卸载时或遭遇失败时
页面加载请求前调用
$(document).on("pagebeforeload",function(event,data){
alert("触发 pageload 事件！\nURL: " + data.url);
});
页面加载完后调用
$(document).on("pageload",function(event,data){
alert("触发 pageload 事件！\nURL: " + data.url);
});
页面加载失败后调用
$(document).on("pageloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
Page Change - 当页面被更改，或遭遇失败时
在页面变化周期内触发两次：
任意页面加载或过渡之前触发一次
在页面成功完成加载后，但是在浏览器历史记录被导航进程修改之前触发。
$(document).on("pagebeforechange",function(event,data){
});
将页面载入 DOM 并且所有页面过渡动画已完成后触发
$(document).on("pagechange",function(event,data){
});
请求对页面的加载失败时触发
$(document).on("pagechangefailed",function(event,data){
});
在窗口视图从 DOM 中移除外部页面之前触发
$(document).on("pageremove",function(event,data){
});
PageTransition 过渡
页面二即将显示时调用
$(document).on("pagebeforeshow","#pagetwo",function(){
// 当进入页面二时
alert("页面二即将显示");
});
显示页面二后调用
$(document).on("pageshow","#pagetwo",function(){
// 当进入页面二时
alert("现在显示页面二");
});
页面二即将隐藏时调用
$(document).on("pagebeforehide","#pagetwo",function(){
// 当离开页面二时
alert("页面二即将隐藏");
});
隐藏页面二后调用
$(document).on("pagehide","#pagetwo",function(){
// 当离开页面二时
alert("现在隐藏页面二");
});
hashchange
启用 bookmarkable #hash 历史记录
navigate
针对 hashchange 和 popstate 的 wrapper 事件
throttledresize
启用 bookmarkable #hash 历史记录
updatelayout
由动态显示/隐藏内容的 jQuery Mobile 组件触发。
虚拟化
vclick
vmousecancel
vmousemove
vmouseup
vmousedown
vmouseover
vmouseout
其他
jQuery Mobile 会自动为页面添加样式，使其更适合移动设备。如果设置为 "false"，则框架不会设置页面的样式。
data-enhance="false"
规定是否通过 AJAX 来加载页面
data-ajax="false"
data-role="fieldcontain"
data-role="popup" 弹框
data-corners
是否有圆角。
data-overlay-theme
叠加（背景）色。默认是透明背景（none）
data-shadow
是否有阴影
data-theme
主题颜色。默认是继承，"none" 设置为透明
data-tolerance
距离窗口边缘 (top, right, bottom, left) 的距离
data-rel="popup"
data-position-to
规定弹出框的位置。
Origin - 默认。弹出框位于打开它的链接上。
jQuery selector - 弹出框位于指定元素上。
Window - 弹出框位于窗口屏幕中央。
data-transition
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
data-rel
popup用于打开的弹出框。