jQuery Mobile
1. jQuery Mobile
1.1 需要引入的文件
1.1.1 需要引入必要的jQuery和jQueryMobile的JS和CSS 文件
jQueryMobile的JS文件是依赖于jQuery的，因此需先引入jQuery的JS文件；
1.1.2 同时在head标签中指定meta标签：
<meta name='viewport' content='width=device-width,initial-scale=1,user-scable=no'/>
1.2 内容介绍
1.2.1 一个html页面可包含多个page
1.2.2 通过data-role属性执行：
<body>
<div data-role='page'>
<div data-role='header'></div>
<div data-role='main'></div>
<div data-role='footer'></div>
</div>
</body>
1.2.3 主题滚筒
公司的站点或者app风格会有自己的品牌风格，为了让自定义主题更方便，jQM推出了主题滚筒，可以让用户方便的自定义颜色，修改完后可以将主题下载并引入工程中，从而实现自定义主题：
1.3 栅格系统【grid】
1.3.1 grid具有响应式特点，在进行网页布局的时候，是一种常用的方案；有行（grid）和列（block）；
1.3.2 grid分为4种：
ui-grid-solo：一行中只有一列，列宽为100%；block-a;
ui-grid-a：一行只有两列，列宽分别为50%；block-a/b;
ui-grid-b：一行只有三列，列宽分别为33%；block-a/b/c;
ui-grid-c：一行只有四列，列宽分别为25%；block-a/b/c/d;
ui-grid-d：一行只有五列，列宽分别为20%；block-a/b/c/d/e;
1.4 面板【panel】
1.4.1 介绍
jQuery Mobile中的面板会在屏幕的左侧或者右侧划出，通过指定id的div元素添加data-role='panel'属性来创建面板；
<div data-role='page'>
<div data-role='header'>
<a href='#myPnael'>打开面板</a>
</div>
<div data-role='main'></div>
<div data-role='panel' id='myPanel'>
</div>
1.4.2 基本用法</div>
注意：panel 标记必须置于头部、内容、底部组成的页面之前或之后，也就是说必须是他们的兄弟元素。要访问面板，需要创建一个指向面板 <div> id 的链接，点击该链接即可打开面板；
1.4.2.1 面板打开方式【data-position='left/right'】
1.4.2.2 面板的动画效果【data-display='overlay/push/reveal'】
1.4.2.3 面板打开时，点击外部区域不关闭【 data-dismissble='false'】
1.4.2.4 点击链接，会关闭面板【data-rel='close'】
1.5 按钮基本属性
1.5.1 常见的三种按钮
<a href='3.html' data-role='button'></a>
<button οnclick='$.mobile.changePage("3.html")'></button>
<input type='button' οnclick='$.mobile.changePage("3.html")'/>
1.5.2 原路返回
<a href="" data-rel='back'></a>
1.5.2 实现按钮在一行内显示【data-inline】
<a href='#' data-role='button' data-inline='true'></a>
<a href='#' data-role='button' data-inline='true'></a>
1.5.3 按钮无圆角、无阴影效果
<a href='#' data-role='button' data-corners='false' data-shadow='false'></a>
1.5.4 按钮颜色【data-theme】
<a href='#' data-role='button' data-theme='a'></a>
<a href='#' data-role='button' data-theme='b'></a>
1.5.5 设置按钮图标【data-icon】和图标位置【data-iconpos】
<a href='#' data-role='button' data-icon='refresh' data-iconpos='top'></a>
1.5.6 只显示图标【data-iconpos='notext'】
<a href='#' data-role='button' data-icon='refresh' data-iconpos='notext'></a>
总结：
data-role="page" 基础页面
data-role="header" 页头
data-role='main'或者class="ui-content" 正文（ui-content有内边距和外边距）
data-role="footer" 页尾
data-position='fixed'
data-transition='slide/pop/slideup...'设置过场动画
data-direction='reverse' 设置相反的过场动画
data-rel='back' 实现原路返回
data-corners='false' 取消圆角
data-shadow='false' 取消阴影
data-inline='true' 在一行内显示
data-theme='a/b' 设置主题效果
data-mini='true' 调整迷你按钮的大小
data-icon='user/bullets/home' 设置元素的图标
data-iconpos='right/top/bottom' 调整图标相对文本的位置
data-position='right' //调整面板打开的方向
data-display=‘reveal/push/overlay’ //调整面板打开的模式（揭开、推开、覆盖）
data-dismissible='false' 点击panel外侧就不会再关掉面板
data-rel='close' 点击链接 会关闭面板
1、准备工作：
①jQM的page，引入jQuery、jQueryMobile(css/js/images)
②<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
③page：header、content、footer
data-role="page"
data-role="header"
class="ui-content"
data-role="footer"
2、在一个HTML 实现多个page
方法1：
<a href='#pageId'>跳转</a>
<a href="demo03.html">jump</a>
方法2：
$.mobile.changePage();
$.mobile.changePage('demo03.html');
3、过场动画的设置：
<a href="demo03.html" data-transiton='slide'>jump</a>
data-direction='reverse'
取消过场动画：
data-transition='none'
通过js的方式指定跳转时的过场动画：
$.mobile.changPage('demo03.html',{transition:'flip'})
原路返回：
<a href="" data-rel='back'></a>
4、按钮
①三种实现方式
<button><button/>
<a data-role='button'></a>
<input type='button'/>
②使用场景：
a按钮 用在导航/跳转
input、button 用在表单中
data-corners='false' 取消圆角
data-shadow='false' 取消阴影
data-inline='true' 在一行内显示
data-theme='a/b' 设置主题效果
data-mini='true' 设置迷你效果
data-icon='user/bullets/home' 设置元素的图标
data-iconpos='right/top/bottom' 调整图标相对文本的位置
data-iconpos='notext' 设置页面元素只显示一个icon
5、grid 栅格布局
有行和列的概念
ui-grid-solo 一行中只能有一列 ui-block-a(100%)
ui-grid-a一行中只能放两列 ui-block-a/ui-block-b（50%）
ui-grid-b一行中只能放3列 ui-block-a/b/c(33%)
ui-grid-c....4列 ui-block-a/b/c/d/(25%)
ui-grid-d....5列 ui-block-a/b/c/d/e(20%)
注意：
ui-block-a都会重新启一行
6、实现一个面板
①<div data-role='panel' id='panel-1'></div>
②面板应该放在page中header之前或者footer之后
③<a href='#panel-1'></a>
data-position='right' //调整面板打开的方向
data-display=‘reveal/push/overlay’ //调整面板打开的模式（揭开、推开、覆盖）