学步园

转载地址：http://kayosite.com/?s=jquery+mobile，感谢博主详细的解说。

总体概况

一、jqm特性

1、跨平台--支持主流的操作系统，android 、ios 、nokia/symbian、windows mobile、blackberry

2、渐进功能增强--对于好的设备表现出更好的功能，比较低端的设备保证基本效果

3、优化触摸体验

4、新的布局控件

5、主题化框架

二、web app与 native app的区别

缺点：无法调用手机硬件资源，原生app体验差，需要联网才能打开（当然可以依靠html5大大减少对网络的依赖性）

native app

优点：可以调用手机硬件资源，用户体验出色，可以不依赖网络，更容易获得盈利

缺点：需要兼容主流平台，维护成本高，开发周期长，需要app store或者android market的确认，与第三方分利。

三、jqm基础知识

<meta name="viewport" content="width=device-width, initial-scale=1">     
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />     
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<div data-role="header">
<h3>网站头部</h3>
</div>

<div data-role="page" id="home">
<h3><a href="#page2">下一页</a></h3>
</div>
<div data-role="page" id="home"><h3><a href="#page2">返回首页</a></h3></div>

组件

四、按钮

在 jQuery Mobile 里，可以通过给任意链接添加 data-role=“button” 来产生一个 button 组件，jQuery Mobile 会追加一定的样式到链接，

<a href="#page2" data-role="button">Link button</a>

图标按钮

添加 data-icon="" 属性来为 button 组件添加一个标准的 Web 图标，并且支持通过 data-iconpos="" 属性设置图标相对于文字的位置（ top, bottom, right ，默认为 left ）。

<a href="#page2" data-role="button" data-icon="check">Check</a>

按钮组

如果你希望把一些按钮放到一个容器内，构建一个导航之类的独立部件（按钮组），可以将按钮放到一个容器内并给容器设置 data-role="controlgroup" 属性，如果希望得到水平式的按钮组，则添加 data-type="horizontal" 属性到容器里。

其他属性

1. data-theme=“” ， 所有的 jQuery Mobile 组件均支持该属性，用于设置组件的颜色， 该属性默认有五个值 a, b, c, d, e，分别代表由深到浅五种颜色，另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。

2. data-inline="" ，内联按钮，button 组件添加该属性后会自动改成内联的形式， jQuery Mobile 会给链接添加 display: inline-block 的 CSS ，让链接按照文字的长度来控制自身长度，并且可以与其他内联元素共行。

五、表单

选择列表

具有原生菜单和自定义菜单两种形式，HTML select 元素会被自动增强为原生的选择列表组件，若需要自定义样式菜单，可以在 select 上添加
data-native-menu="false" 属性。，若需要禁止选择某一个选项，可以在选项的 option 标签上添加 disabled="disabled"。若需要多项选择，则可以在 select 标签上添加multiple="multiple"，另外我们还可以使用”<optgrouplabel="Group1"></optgroup> “对选项进行分组。

<div data-role="fieldcontain">
		<form>
        	<select data-native-menu="false">
            	<optgroup label="标题1">
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                    <option>选项4</option>
                </optgroup>
                <optgroup label="标题2">
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                    <option>选项4</option>
                </optgroup>
            </select>
        </form>        
    </div>

六、内容格式

1、基本html样式

不加data-*也能美化一些元素，比如表单元素，只要注明type就可以

2、主题内容

支持abcde，data-theme=“”

3、可折叠内容块

<div data-role="collapsible" data-collapsed="false">
		<h3>折叠组件</h3>    
        <div>
        	<p>主要内容</p>
        </div>
    </div>

    <div data-role="collapsible" data-collapsed="false">
    	<h3>嵌套调用</h3>
        <div data-role="collapsible">
        	<h3>biaoti</h3>
        	<p>嵌套主要内容</p>
        </div>
    </div>

4、多栏布局

要创建三栏布局，可以先给父元素添加 ui-grid-b 的 class ，然后分别为第一个子元素添加 ui-block-a 的 class ， 第二个元素添加 ui-block-b 的 class ，第三个元素添加 ui-block-c 的 class 。

以此类推，四栏布局使用 ui-grid-c 的 class ，五栏布局使用 ui-grid-d 的 class 。

七、列表--data-role="listview"

1、基本列表

 <ul <span style="color:#ff0000;">data-role="listview"</span>>
            <li <span style="color:#ff0000;">data-role="list-divider"</span>>列表标题1</li>
            <li>列表项1</li>
            <li>列表项2</li>
            <li data-role="list-divider">列表标题2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>

在li内添加a标签列表就可以点击。

2、侧分列表

<ul data-role="listview" data-split-icon="arrow-d">
            <li>
            <a href="#page2">
                <img src="img/01.jpg" />
                <h3>Reviewer A</h3>
                <p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
            </a>
            <a href="#" data-rel="dialog">Delete</a>
            </li>
            <li>
            <a href="#page2">
                <img src="img/02.jpg" />
                <h3>Reviewer B</h3>
                <p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
            </a>
            <a href="#" data-rel="dialog">Delete</a>
            </li>
            <li>
            <a href="#page2">
                <img src="img/01.jpg" />
                <h3>Reviewer C</h3>
                <p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
            </a>
            <a href="#" data-rel="dialog">Delete</a>
            </li>
        </ul>

3、搜索过滤框

<ul data-role="listview" data-filter="true">
    <li><a href="#page2">你</a></li>
    <li><a href="#page2">你好</a></li>
    <li><a href="#page2">你好啊</a></li>
</ul>

七、工具栏

<div data-role="header" data-theme="b">
		<a href="#home" data-role="back">返回</a>
        <h3>常见头部栏</h3>
        <a href="#home" data-icon="check">保存</a>   
    </div>

<div data-role="navbar">
        	<ul>
            	<li><a href="#" class="ui-btn-active">Home</a></li>
                <li><a href="#">Active</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

<div data-role="header" data-position="fixed">
    	<h3>我是固定工具栏</h3>
        <a id="top" href="index.html" data-role="button">返回首页</a>
    </div>

八、页面专场和对话框

1、ajax驱动站点

 Ajax 配合 CSS3 动画能做出原生 App 的用户体验。如：当用户点击一个链接时， jQuery Mobile 会分析该 url ，产生 Ajax 请求，并显示一个正在加载的提示框，避免了刷新整个页面。若该次 Ajax 请求成功，则会把新内容加载到 DOM 中，初始化所有组件，并显示页面过场动画。若请求失败，则会显示一个错误提示框，并在几秒后消失。

带有 rel="external" 属性的链接不会通过 Ajax 方式加载，跳转时整个页面会被刷新。添加 data-ajax="false" 属性，这样的链接也不会使用 Ajax 。

2、页面专场

某些移动平台对 transitions 的支持并不足够，如果你的页面在转场时出现闪烁的情况， Kayo 建议你在 CSS 中加入下面这一条 CSS 规则：

.ui-page { -webkit-backface-visibility: hidden; }

默认情况的转场效果是“fade”，即淡出淡入，若需要自定义转场效果，可以使用 data-transition 属性，如把转场效果改为“pop（弹出）”，下面是主要的转场方式

<a href="#page4" data-role="button" data-rel="dialog" data-transition="fade">dialog--fade</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="pop">dialog--pop</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="turn">dialog--turn</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="flow">dialog--flow</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="flip">dialog--flip</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="slide">dialog--slide</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="slidefade">dialog--slidefade</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="slideup">dialog--slideup</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="slidedown">dialog--slidedown</a>
<a href="#page4" data-role="button" data-rel="dialog" data-transition="none">dialog--none</a>

JQM事件方法和内部机制

九、默认配置与事件基础

$(document).bind("mobileinit", function(){
    // 新的配置
});

$(document).bind("mobileinit", function(){
    $.extend($.mobile, {
        ajaxEnabled: false
    });
});

（3）设备方向变化事件 

$(window).bind( 'orientationchange', function(e){
    if( e.orientation == "portrait" ) alert('portrait');
    if( e.orientation == "landscape" ) alert('landscape');
});

（4）滚屏事件

scrollstart

当页面开始滚动时触发 scrollstart 事件。但由于 IOS 设备会在页面滚动时冻结 DOM 操作，并且把这些操作加入队列，当页面滚动结束时按队列执行这些 DOM 操作，jQuery Mobile 努力寻找让设备在页面滚动开始前执行 DOM 操作，但现阶段考虑到最终得到的 Web Apps 的兼容性，Kayo 不建议利用 scrollstart 的回调函数执行 DOM 操作。
scrollstop

当页面滚动结束时触发 scrollstop 事件。

（5）布局事件

由于页面中的一些组件，如可折叠模块 (collapsible)，列表组件搜索 (listview search) 或是 jQuery 显示/隐藏 (show/hide) 等方法，会导致页面内容大小有较大变化，这样会对一些依赖页面布局的组件，如固定的顶部工具栏 (fixed headers) 造成干扰。因此，当出现以上情况时，jQuery Mobile 会触发一个事件 updatelayout ，通知其他组件需要调整它们的布局以适应页面变化。为了确保这个过程顺利，也可以手动触发这个事件，例如：

$(function() {
    $('#aside').hide().trigger('updatelayout');
    $(document).bind("updatelayout", function(event, ui) {
        // 调整组件
    });
});

（6）动画事件

$(document).bind('pagehide', function(event, ui) {
    $(ui.nextPage).animationComplete(function() {
        // 移除相应的 class
    });
});

（7）事件应用实例

修改配置例子

$(document).bind('mobileinit', function(){
    $.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
    $.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
    $.mobile.orientationChangeEnabled = false; // 默认禁止触发 orientationChangeEnabled
});

注意不能使用前文中自定义默认配置时利用 jQuery 的 $.extend 扩展 $.event 对象的方法扩展 $.event 对象，只有 $.mobile 可以使用 $.extend 扩展对象。因此事件 API 中只有 $.mobile.orientationChangeEnabled 可以使用 $.extend 方法进行自定义。

触摸事件例子

$(document).bind('mobileinit', function(){
    $.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
    $.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
});
$(function(){
    $("#home").live('swipeleft', function() {
        $('#toPage2').click(); // 为首页绑定向左划动事件
    });
    $("#page-2").live('swiperight', function() {
        $('#toHome').click(); // 为另一页面绑定向右划动事件
    });
});

为了节约篇幅我就只放关键html代码

第一场景

<div data-role="page" id="home">
<a href="#page2" data-role="button" data-transition="flow" id="btn_home">向左滑动下一页</a>
</div>

第二场景

<div data-role="page" id="page2">
<a href="#home" data-role="button" data-direction="reverse" data-transition="slide" id="btn_page21">向右滑动回到首页</a>
<a href="#page3" data-role="button" data-transition="slide"  id="btn_page22">向左滑动下一页</a>
</div>

第三场景

<div data-role="page" id="page3">
<a href="#page2" data-role="button" data-transition="slide" data-direction="reverse" id="btn_page31">向右滑动返回上一页</a>
<a href="#home" data-role="button" data-transition="slide" id="btn_page32">向左滑动回到首页</a>
</div>

js代码

<script>
$(function(){
	$("#home").bind("swipeleft",function(){
		$("#btn_home").click()
	})
	$("#page2").bind("swiperight",function(){
		$("#btn_page21").click()
	})
	$("#page2").bind("swipeleft",function(){
		$("#btn_page22").click()
	})
	$("#page3").bind("swiperight",function(){
		$("#btn_page31").click()
	})
	$("#page3").bind("swipeleft",function(){
		$("#btn_page32").click()
	})
})
</script>

需要注意的地方：

1、三个场景的id必须本站唯一，不是页面唯一，是本站唯一（原因就是jqm的场景或者叫页面是根据ajax加载的，放在同一页面内，如果id不唯一就会有冲突）

2、跳转链接的href要写正确，data-transition的类型可以根据需求自行变化，越绚丽的特效越耗费手机资源，

3、向右滑动之后想再回到一界面怎么办？除了js规定滑动方向和a链接的href指向上一界面之外，还要添加data-direction="reverse",主要是调节滑动方向的，不然你向右滑动之后再向左滑动尽管回到了上一页面但是滑动的方向却是从右边滑入的，不符合逻辑。

十、页面事件与deferred

jQuery Mobile 页面事件使用分为

页面加载事件 (Page load events)，

页面跳转事件 (Page change events)，

页面显示/隐藏事件 (Page show/hide events)，

页面初始化事件 (Page initialization events)，

页面移除事件 (Page remove events) 。

（1）页面加载事件

当一个外部页面加载到 DOM 时，会触发两个事件 —— 第一个事件是 pagebeforeload，第二个是 pageload 或 pageloadfailed。

外部页面加载到 DOM 的过程 ，即加载的页面不在当前页面的文档中，而一个文档中的多个 "page" 是本来就存在于 DOM 中，因此在同一文档中的不同 "page" 的跳转不会触发 pagebeforeload 事件。

deferred 对象是在 $.ajax() 内部实现的，所以可以在调用 ajax 时创建 deferred 对象并调用。jQuery Mobile 是基于 ajax 的，包括它的页面加载，并且页面加载的过程在内部实现时已经创建了相应的 deferred 对象，所以在调用页面事件的回调函数时可以调用 deferred 对象。

因此，我们只需指定 ajax 请求成功和失败时的回调函数列表即可方便的进行回调，这两种回调可以分别写在 done() 和 fail() 方法中，而上面介绍的 resolve() 或 rejected() 方法，则分别可以手动执行 done() 和 fail() 方法

done()--resolve()

fail()--rejected()

deferred 状态。deferred 有三种状态：初始化（unresolved），成功（resolved），失败（rejected）。

一次正确的页面跳转中，事件产生的顺序应该是，pagebeforechange , pagebeforeload , pageload , pagechange ，在开发时需要注意这些事件的触发顺序。

（2）页面跳转事件

页面跳转事件由 $.mobile.changePage() 产生，第一个为 pagebeforechange ，第二个是 pagechange 或 pagechangefailed 。

（3）页面显示隐藏事件

$('#page-B').live( 'pagebeforeshow', function(event, ui){
    alert('pagebeforeshow');
});
 
$('#page-B').live( 'pagebeforehide', function(event, ui){
    alert('pagebeforehide');
});
$('#page-B').live( 'pageshow', function(event, ui){
    alert('pageshow');
});
 
$('#page-B').live( 'pagehide', function(event, ui){
    alert('pagehide');
});

从 A 页面点击链接跳转到 B 页面，然后从 B 页面跳转回 A 页面，则触发事件的情况如下，

pagebeforeshow：从 A 跳转到 B，B 页面被显示时（转场开始）触发
pagebeforehide：从 A 跳转到 B，A 页面被隐藏时（转场结束）触发
pageshow：从 B 跳转到 A，A 页面被显示时（转场开始）触发
pagehide：从 B 跳转到 A，B 页面被隐藏时（转场结束）触发

由此可知道JQM是如何实现page跳转的。

十一、JQM方法

十二、jQuery Mobile 与响应式

$(window).bind( 'orientationchange', function(e){
    if( e.orientation == 'portrait' ) $('html').addClass('portrait').removeClass('landscape');
    else if( e.orientation == 'landscape' ) $('html').addClass('landscape').removeClass('portrait');
 });