加入代码 指定高度和缩放比例，以及引入Mobile的css和js文件

<meta name="viewport" content="width=device-width;initial-scale=1.0">

Widget

---

page

1. jQuery Mobile的基本结构

<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>head</h1>
    </div>
    <div role="main">
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>foot</h4>
    </div>

2. 跳转到其他页面，重复使用div page,data-transition=""选择不同的跳转效果

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>主页</h1>
    </div>
    <div data-role="main">
        <a href="#page2" data-transition="slideup">跳转2</a>
    </div>
    <div data-role="footer">
        <h1>底部</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>主页</h1>
    </div>
    <div data-role="main">
        <a href="#page1">跳转1</a>
    </div>
    <div data-role="footer">
        <h1>底部</h1>
    </div>
</div>

3. data-rel="dialog"将要跳转的界面转化成一个dialog样式

---

button

1. 创建一个按钮的三种方式，推荐使用a标签的方式，能够直接进行跳转

 <div data-role="content">
    <button>按钮</button>
    <input type="button" value="按钮">
    <a href="#" class="ui-btn">按钮</a>
</div>

2. 这些是a标签中class中的属性,ui-btn-icon-notext除去按钮中文字,ui-btn-inline使按钮能够在同一行放置
3. 设置主题ui-btn-a白色按钮,ui-btn-b黑色按钮
4. data-type="horizontal"在div中更改可以使默认的纵向变成横向，使按钮横向摆放

---

checkbox

• data-role="controlgroup"将选项放在一组中靠拢

<fieldset data-role="controlgroup">
    <label>
        <input type="checkbox" name="cb0">apple
    </label>
    <label>
        <input type="checkbox" name="cb0" data-theme="b">apple
    </label>
    <label>
        <input type="checkbox" name="cb0">apple
    </label>
</fieldset>

---

可折叠（Collapsibles）

1. 允许您隐藏或显示内容,展开项<div data-role="collapsible">展开项的标题为head，点击展开查看具体内容

<div data-role="content">
    <div data-role="collapsible" data-content-theme="false"
>               
        <h4>head</h4>
        <p>内容</p>
    </div>
</div>

2. data-content-theme="false"取消展开项的下边框
3. data-collapsed="false"默认展开项的初始状态为展开其内容

---

grid布局网格

1. ui-grid-a能够让页面承载为两列若要容纳三列则a改为b，以此类推（a改为solo为一列）

div class="ui-grid-a">
    <div class="ui-block-a">
        <div class="ui-bar ui-bar-a">A</div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar ui-bar-a">B</div>
    </div>
</div>

2. ui-block-a表示存放的位置,a表示第一个

---

listview列表视图

1. 创建一个列表

<ul data-role="listview">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
</ul>

2. data-filter="true" 过滤，可以搜索关键字来查找需要的内容
3. data-inset="true "插入
4. 只会出现一个搜索框，当搜索到关键字时才会出现已列出的内容

<form class="ui-filterable">
    <input data-type="search" id="autoinput">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="autoinput" data-inset="true">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
</ul>

5. 会有一个类似通讯录的效果，提取首字母加上已列出的内容

<ul data-role="listview" data-filter="true" data-autodividers="true" data-input="autoinput" data-inset="true">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
</ul>

---

导航navbar

1. ui-btn-active表示默认为选中状态

<div data-role="navbar">
<ul>
    <li><a href="#" class="ui-btn-active">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
</ul></div>

2. popup弹出窗口

<a href="#pp"  data-rel="popup" class="ui-btn">弹出窗口</a>
<div data-role="popup" id="pp">
    <p>弹出</p>
</div>

---

主题

主题data-theme一般有a b两种

---

(ps:遇到了一个问题：最新的jQuery与最新的jQueryMobile不匹配，使用1.9.1版本的jQuery运行)