1、jQuery Mobile 入门
准备了解下jQuery Mobile，写下一些学习过程的总结和感悟，起到加深记忆和以后方便查看的作用，也希望能和其他程序猿朋友交流。
jQuery Moblile 是jQuery框架的一个组件， 它几乎可以工作于所有移动平台。因为他使用了Html5、css和JS，所以学习之前，希望你先拥有这方便的知识。
1、 jQuery Mobile 安装，非常简单，可以不用下载，在html页面中引入相关js和css就可以了。
<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 页面，data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。 一个页面可以使用多个data-role="page", 通过唯一id来区分它们。用href来跳转。也可以使用data-ref=‘另一个的id’，来弹出其他一个一个page的对话框。
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
- data-role="footer" 创建页面底部的工具栏
- data-ref = "" 弹出一个对话框
下面是一个基本的JQuery Mobile页面。
<!DOCTYPE html>
<html>
<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>
<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" data-position='fixed' data=fullscreen = 'true'>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>3、jQuery Mobile 页面过渡效果。 从一个页面过渡到另一个页面有很多效果，比如淡入淡出、翻转、上滑和下滑等。需要浏览器支持，IE需要10及以上。
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
使用data-transition 属性，值包括：fade、flip、flow、pop、slide、slidefade、slideup、slidedown、turn、和none。
使用data-direction = “reverse” 会使效果相反。
4、 jQuery Mobile 按钮。 三种：input、button、a标签。 input和button常用于表单提交。a标签用于页面跳转。a标签的按钮默认适应屏幕，加上data-line = 'true' 则自适应大小。
<button>按钮</button>
<input type="button" value="按钮">
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
4.1 组合按钮，使用data-role = 'controlgroup'。data-type = 'horizontal' 代表水平，data-tye = 'vertical'代表垂直。
<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>
4.2 后退按钮，使用属性data-rel = 'back'.
<a href="#" data-role="button" data-rel="back">返回</a>
还有一些其它的按钮属性：data-corners,data-mini, data-shadow, 值均为true和false。
4.3 含有图标的按钮，使用data-icon属性，值有：arrow-l、arrow-r、delete、info、home、back、search、grid等等。data-iconpos 规定图标的位置，值有top、botton、left、right。notext，表示只显示图标，不显示文字。
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
5、jQuery Mobile 工具栏。工具栏一般都放在页眉或页脚。
标题栏一般构成包括： 左边的logo首页、logo返回；中间的title；右边的搜索、选项。如果只有一个按钮，还要在右侧显示，需添加class='ui-btn-right' 。页眉一般就是1-2个按钮。
<div data-role="header"> <a href="#" data-role="button">首页</a> <h1>欢迎来到我的主页</h1> <a href="#" data-role="button">搜索</a> </div>
页脚，可添加的按钮更多，也更灵活。class='ui-btn'可使居中。
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
<a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
</div>
</div>定位页眉页脚。data-position 值包括：inline,fixed。 data-fullscreen=“true”属性为全面定位，可使页眉 页脚半透明。
<div data-role="header" data-position="fixed" data-fullscreen="true"></div> <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
6、jQuery mobile 导航栏。一般由一组水平排列的链接组成(超过5个会换行)，位于页眉页脚。使用data-role="navbar”属性（会自动转为button,无需data-role='button'）；
ui-btn-active 、ui-state-persist 选中的样式。
页眉的导航栏
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
页脚的导航栏。data-iconpos='left' 表示图片居左。
<div data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>7、 jQuery mobile 折叠
div 使用 data-role = 'collapsible', 添加一个h1-h6标签，其后就是折叠的内容。折叠内容默认隐藏。如果需要显示，可添加data-collapsed='false'。
折叠可嵌套。
折叠集合data-role = 'collapsible-set'
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible">
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
</div>div添加 data-insert=‘false’ ： 取掉圆角。data-mini = 'true'：更小巧。data-callapsed-icon='arrow-u' data-expanded-icon='arrow-d' 更换前面的默认+ -图标。
8、 jQuery Mobile 网格布局。
| 网格类 | 列 | 列宽度 | 对应 |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|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 |
<div class="ui-grid-b">
<div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
<div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
<div class="ui-block-c" style="border: 1px solid black;"><span>Some Text</span></div>
</div>