第18章-使用jQuery-Mobile事件

18.1设置jQueryMobile在jQueryMobile中，框架的基本配置项是可以被修改的。由于配置项针对的是全局功能的使用，jQueryMobile在页面加载到增强特征时就需要使用这些配置项，而这个加载过程早于document.ready事件的触发，因此，在该事件中进行修改是无效的，而要选择更早的mobileinit事件，在该事件中，可以编写新的配置项来覆盖原有的基本配置项设置。

18.2

jQueryMobile事件在移动终端设备中，有一类事件无法触发（如鼠标事件或窗口事件），但它们又客观存在。因此，在jQueryMobile中，借助框架的API将这类型的时间扩展为专门用于移动终端设备的事件，如触摸、设备翻转、页面切换等，开发人员可以使用live()或bind()进行绑定。页面事件1．页面显示或隐藏在jQueryMobile中，当不同页面间或同一个页面不同容器间相互切换时，将触发页面中的显示或隐藏事件。2．加载外部页面外部页面加载时会触发两个事件，一个是pagebeforeload，另一个是当页面载入成功时会触发pageload事件，载入失败时会触发pageloadfailed事件。

3．页面切换事件在jQueryMobile页面中，各页面之间相互切换会显示相应的动画过渡效果，这样的页面切换效果使得jQueryMobile页面的切换更加自然。实战练习——设置页面切换过渡动画效果触摸事件在jQueryMobile中，触摸事件包括5种类型。tap（轻击）事件taphold（轻击不放）事件swipe（滑动）事件swipeleft（向左滑动）事件swiperight（向右划动）事件实战练习——通过滑动屏幕浏览图片

最终文件：光盘\最终文件\第18章\18-2-1.html视频：光盘\视频\第18章\18-2-1.swf最终文件：光盘\最终文件\第18章\18-2-2.html视频：光盘\视频\第18章\18-2-2.swf屏幕滚动事件在jQueryMobile中，屏幕滚动事件包含两个类型，一种为开始滚动事件scrollstart，另一种为结束滚动事件scrollstop。这两种类型的事件主要区别在于触发时间不同，前者是用户开始滚动屏幕中页面时触发，而后者是用户停止滚动屏幕中页面时触发。实战练习——实现滚动改变元素背景样式翻转事件在jQueryMobile事件中，当用户使用移动终端设备浏览页面时，如果手持设备的方向发生变化，即横向或纵向手持时，将触发orientationchange事件。在该事件中，通过获取回调函数中返回对象的orientation属性，可以判断用户手持设备的当前方向。该属性有两个值，分别为portrait和landscape，前者表示纵向垂直，后者表示横向水平。实战练习——检测移动设备手持方向

最终文件：光盘\最终文件\第18章\18-2-3.html视频：光盘\视频\第18章\18-2-3.swf最终文件：光盘\最终文件\第18章\18-2-4.html视频：光盘\视频\第18章\18-2-4.swf

18.3

jQueryMobile常用技巧jQueryMobile作为jQuery插件库的附属成员，其轻量级的UI框架、相对其他语言的低学习成本，都是受到青睐的原因。但是作为一个新型的移动框架，在使用它开发项目的过程中，还有许多需要注意的地方。本节将向读者介绍一些jQueryMobile的常用技巧。开启或禁用列表项中的图标在jQueryMobile中，<ul>列表的使用十分频繁，几乎所有需要加载大量格式化数据的时候都会考虑使用该元素。为了单击列表选项时链接某个页面，在列表的<li>选项元素中，常常会增加一个<a>元素，用于实现单击列表项进行链接的功能。一旦添加<a>标签后，jQueryMobile默认会在列表项的最右侧自动增加一个圆形背景的小箭头图标，用来表示列表中的项项是一个超链接。实战练习——开启或禁用列表项中的图标

最终文件：光盘\最终文件\第18章\18-3-1.html视频：光盘\视频\第18章\18-3-1.swf固定页面头部栏与尾部栏在头部栏或尾部栏的容器元素中增加data-position属性，设置该属性的属性值为fixed，可以将滚动屏幕时隐藏的头部栏或尾部栏在停止滚动或单击时重新出现；再次滚动屏幕时，又自动隐藏，由此实现将头部栏或尾部栏以悬浮的形式固定在原有位置上。实战练习——固定页面头部栏与尾部栏随机显示页面背景图片在jQueryMobile中，页面的加载过程与在jQuery中并不一样，它可以很容易地捕捉到一些非常有用的事件，例如pagecreate事件，该事件是页面初始化事件，该事件中所有请求的DOM元素已经完成了创建，正在开始加载，此时，用户可以自定义部件元素，实现一些自定义样式效果，如显示加载进度条或随机显示页面背景图片等。实战练习——随机显示页面背景图片

最终文件：光盘\最终文件\第18章\18-3-2.html视频：光盘\视频\第18章\18-3-2.swf最终文件：光盘\最终文件\第18章\18-3-3.html视频：光盘\视频\第18章\18-3-3.swf

18.4本章小结本章向读者介绍了jQueryMobile的基本配置项，