1.对话框：
1.如果给一个指向新页面的链接添加一个data-rel="dialog"属性，就可以任何一个指向的页面一个对话框的形式显示出来。
JQmobile会自动给新页面一些样式。
2.转场效果：
1.首先知道转场有几种效果，分别是什么。
2.一般情况下，Jqmobile会自动给后退按钮默认的转场效果，但是如果想重新设置一个后退按钮的转场效果，就需要给按钮 一个新属性：data-transition:"转场名称";
<a href="#" data-role="button" data-transition="pop" data-inline="true">点击按钮转场</a>
3.按钮三种样式:
1.普通的button按钮：
2.带有图标的按钮：buttom delete图标
3.内链按钮：几个按钮放在一个水平线上，就需要有一个容器来承载了，容器的属性添加水平属性:data-inline="true";
4.组按钮：将按钮组合在一起，向导航栏一样的形式。它也需要一个容器div来承载他们，给一个容器添加属性：data- role="controlgroup",这是一个代表组的 属性，当然如果这样的话，显示出来的组是默认垂直的，如果希望是在水平线上的话，就给容器属性添加一个属性：data-type="horizontal";
4.网格布局：
1.因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并 排放置（比如按钮，或导航标签)
Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid
Jquery Mobile提供了两种预设的配置布局：两列布局（class 含有 ui-grid-a）和三列布局 （class 含有 ui-grid-b） —几乎可满足需要列布局的任何情况。网格是100%宽的，不可见（没有背景或边框），也没有padding和margin，所以它们不 会影响内部元素的样式
5.可折叠的容器：
1.可折叠的内容，就是头部有+ 号，-号的组件；
2.要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collspsible"s;
3.容器内直接的标题（h1-h6）子节点，JQmobile会将之表现为可点击的按钮，并在左侧添加"+"按钮，表示是可以展开的；
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>请选择1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible">
<h3>请选择2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
6.创建表单元素：
1.文本域，搜索框，滑杆，开关，单选按钮，复选按钮，列表菜单，
2.代码：
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" />
</div>
注意： for 与 Id 的关系。
type类型：
搜索框：search
滑杆：range
开关：
单选按钮：
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
复选按钮：checkbox
列表菜单：
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
7.列表ListView形式：
<!---可折叠的 区块--->
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>请选择城市</h1>
<p>上海市</p>
</div>
<div data-role="collapsible">
<h1>请选择街道</h1>
<p>龙阳路</p>
</div>
</div>
<!---列表菜单--->
<div data-role="fieldcontain">
<label for="select">选择：</label>
<select name="selec" id="select">
<option value="11">北京市</option>
<option value="22">上海市</option>
<option value="33">南京市</option>
</select>
</div>
<!---列表--->
<div >
<ul data-role="listview" class="ui-listview" style="margin:0 0 8px 0 !important; padding:0;" >
<li>
<a href="#">
<h1>你好</h1>
<p>你好世界</p>
</a>
</li>
</ul>
<ul data-role="listview" style="margin:0 0 8px 0!important; padding:0;" >
<li>
<a href="#">
<h1>你好</h1>
<p>你好世界</p>
</a>
</li>
</ul>
</div>