二、JQuery Mobile基础

　　1、页面结构及页面切换效果

　　JQuery Mobile中的一个页面由header、content、footer三部分组成，通过data-role=“page”定义一个页面。这也就是说Query Mobile在一个页面中可以添加多个页面，这意味着浏览器只需要加载一个页面，就可以实现页面平滑切换的用户体验。

　　基本的JQuery Mobile Web App都应当遵循下面的基本模板：

　　在上面的基本页面结构中，“header”、“content”、“footer”在页面中通常的使用方式如下：

　　JQuery Mobile中可以使用多种不同的切换效果来显示新页面的内容，只需要在超链接里添加data-transition属性即可。目前JQuery Mobile支持的页面切换效果有以下几种：

　　2、文本

　　为了使用灵活，JQuery Mobile使普通HTML内容更加独立，文本内容的可读性更强。

　　1) 可折叠文本内容：

　　2) 格式化文本：

　　使用span标签添加class=“ui-li-count”，可在列表右侧生成计数器。使用<h>元素突出显示内容，<p>元素用于减弱列表项中显示的内容，显示补充信息可在<p>元素中添加class="ui-li-aside"

　　3) 面板

　　JQuery Mobile的面板会在屏幕的左侧向右划出，用data-role=“panel”定义面板，用data-display=“push、overlay、reveal”来控制展示方式。关闭面板方式：data-dismissible=“true”，点击外部区域关闭，data-swipe-close=“true”,通过滑动关闭。

　　3、按钮

　　JQuery Mobile中通过给a、button或者input元素添加样式(或者增加data-role=”button”),便可以创建按钮。

　　按钮时触摸式应用程序的重要部分，JQuery Mobile提供了以下默认的按钮样式可供使用，当然开发人员也可以根据自己的需求定义自己满意的样式。

　　4、列表

　　列表是JQuery Mobile比较突出的一个特性，JQuery Mobile使得标准的无序或有序列表在页面中应用得更加广泛，使用方法是在ul或ol标签中添加<data-role="listview">属性。

　　JQuery Mobile中的列表可分为如下几类：

　　1) 简单列表

　　2) 超链接列表

　　3) 嵌套列表

　　4) 分割列表

　　5) 过滤列表

　　6) 气泡列表

　　7) 缩略图、图标列表

　　5、导航栏

　　导航栏是由一组水平排列的链接构成，通常位于页眉或页脚内部。JQuery Mobile的导航栏中的链接会自动转换为按钮。

　　值得注意的是，JQuery Mobile导航导航个数超过5个会自动按每行2个导航换行显示，

　　6、网格

　　JQuery Mobile提供了一套基于CSS的分列布局，但是由于移动设备上特别是手机屏幕宽度狭窄，所以一般不建议使用。

　　JQuery Mobile中由五种网格布局可以使用：

　　7、对话框

　　上面JQuery Mobile中通过为a标签添加data-rel=”dialog”或者data-dialog=”true”属性便可以将连接页面以弹出框的形式展示。

　　8、表单

　　JQuery Mobile使用表单是直接按原生的方法使用即可。

　　JQuery Mobile有很强的表单自适应能力：ui-field-contain，宽屏幕左右显示(480px以上)，窄屏幕上下显示(480以下)

　　表单中的单选和复选提供了横向和竖向(默认)的两种类型，只需设置data-type="horizontal"。翻转开关和滑动器以及下拉框还提供了mini版样式只需设置data-mini="true"并且设置data-inline="true"。

　　9、表格

　　JQuery Mobile提供了两种模式的响应式表格。

　　1) 回流表格模式(data-mode="reflow")：宽屏显示普通表格列，窄屏会变成表单式表格。

　　2) 列切换模式(data-mode="columntoggle")：列切换模式会在宽度不够时隐藏数据，添加data-priority=“1”属性来设置隐藏列的顺序，按优先级1(最高)-6(最低)，从低到高隐藏。

　　10、主题

　　JQuery Mobile提供了2种不同的主题样式，从“a”到“b”-每一种主题的按钮，工具条，内容块等等颜色都不一样，没个主题的视觉效果也不一样。其中a主题是灰色背景黑色文字，b主题为黑背景白色文字，通过data-theme属性可以自定义主题：<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

　　添加新主题：通过修改CSS 文件来添加或编辑新主题，只需要拷贝样式模板，然后重命名字母类名(c-z)，并在样式中添加你需要的颜色和字体即可。同时也可以为主题添加新样式，如按钮添加类：ui-btn-(a-z).页面添加ui-page-theme-(a-z).

　　11、事件

　　JQuery Mobile中的事件必须使用on()方法来绑定。

　　事件分为五类：

　　1) Page Initialization (页面初始化事件，这些事件只在页面加载时执行一次)

　　2) Page Load/Unload

　　3) page Transition：在页面过度之前和之后(每次都会触发)

　　4) page Change：

　　5) 其他事件：