第18章使用jQuery Mobile事件课件.ppt

《第18章使用jQuery Mobile事件课件.ppt》由会员分享，可在线阅读，更多相关《第18章使用jQuery Mobile事件课件.ppt（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在jQuery Mobile中，框架的基本配置项是可以被修改的。由于配置项针对的是全局功能的使用，jQuery Mobile在页面加载到增强特征时就需要使用这些配置项，而这个加载过程早于document.ready事件的触发，因此，在该事件中进行修改是无效的，而要选择更早的mobileinit事件，在该事件中，可以编写新的配置项来覆盖原有的基本配置项设置。 在移动终端设备中，有一类事件无法触发（如鼠标事件或窗口事件），但它们又客观存在。因此，在jQuery Mobile中，借助框架的API将这类型的时间扩展为专门用于移动终端设备的事件，如触摸、设备翻转、页面切换等，开发人员可以使用live()

2、或bind()进行绑定。页面事件页面事件1页面显示或隐藏在jQuery Mobile中，当不同页面间或同一个页面不同容器间相互切换时，将触发页面中的显示或隐藏事件。2加载外部页面外部页面加载时会触发两个事件，一个是pagebeforeload，另一个是当页面载入成功时会触发pageload事件，载入失败时会触发pageloadfailed事件。 3页面切换事件在jQuery Mobile页面中，各页面之间相互切换会显示相应的动画过渡效果，这样的页面切换效果使得jQuery Mobile页面的切换更加自然。实战练习实战练习设置页面切换过渡动画效果设置页面切换过渡动画效果触摸事件触摸事件在jQue

3、ry Mobile中，触摸事件包括5种类型。utap（轻击）事件utaphold（轻击不放）事件uswipe（滑动）事件uswipeleft（向左滑动）事件uswiperight（向右划动）事件实战练习实战练习通过滑动屏幕浏览图片通过滑动屏幕浏览图片 最终文件：光盘最终文件第18章18-2-1.html视频：光盘视频第18章18-2-1.swf最终文件：光盘最终文件第18章18-2-2.html视频：光盘视频第18章18-2-2.swf屏幕滚动事件屏幕滚动事件在jQuery Mobile中，屏幕滚动事件包含两个类型，一种为开始滚动事件scrollstart，另一种为结束滚动事件scrollst

4、op。这两种类型的事件主要区别在于触发时间不同，前者是用户开始滚动屏幕中页面时触发，而后者是用户停止滚动屏幕中页面时触发。实战练习实战练习实现滚动改变元素背景样式实现滚动改变元素背景样式翻转事件翻转事件在jQuery Mobile事件中，当用户使用移动终端设备浏览页面时，如果手持设备的方向发生变化，即横向或纵向手持时，将触发orientationchange事件。在该事件中，通过获取回调函数中返回对象的orientation属性，可以判断用户手持设备的当前方向。该属性有两个值，分别为portrait和landscape，前者表示纵向垂直，后者表示横向水平 。实战练习实战练习检测移动设备手持方向

5、检测移动设备手持方向 最终文件：光盘最终文件第18章18-2-3.html视频：光盘视频第18章18-2-3.swf最终文件：光盘最终文件第18章18-2-4.html视频：光盘视频第18章18-2-4.swf jQuery Mobile作为jQuery插件库的附属成员，其轻量级的UI框架、相对其他语言的低学习成本，都是受到青睐的原因。但是作为一个新型的移动框架，在使用它开发项目的过程中，还有许多需要注意的地方。本节将向读者介绍一些jQuery Mobile的常用技巧。开启或禁用列表项中的图标开启或禁用列表项中的图标在jQuery Mobile中，列表的使用十分频繁，几乎所有需要加载大量格式化

6、数据的时候都会考虑使用该元素。为了单击列表选项时链接某个页面，在列表的选项元素中，常常会增加一个元素，用于实现单击列表项进行链接的功能。一旦添加标签后，jQuery Mobile默认会在列表项的最右侧自动增加一个圆形背景的小箭头图标，用来表示列表中的项项是一个超链接。实战练习实战练习开启或禁用列表项开启或禁用列表项中的图标中的图标 最终文件：光盘最终文件第18章18-3-1.html视频：光盘视频第18章18-3-1.swf固定页面头部栏与尾部栏固定页面头部栏与尾部栏在头部栏或尾部栏的容器元素中增加data-position属性，设置该属性的属性值为fixed，可以将滚动屏幕时隐藏的头部栏或尾

7、部栏在停止滚动或单击时重新出现；再次滚动屏幕时，又自动隐藏，由此实现将头部栏或尾部栏以悬浮的形式固定在原有位置上。实战练习实战练习固定页面头部栏与尾部固定页面头部栏与尾部栏栏随机显示页面背景图片随机显示页面背景图片在jQuery Mobile中，页面的加载过程与在jQuery中并不一样，它可以很容易地捕捉到一些非常有用的事件，例如pagecreate事件，该事件是页面初始化事件，该事件中所有请求的DOM元素已经完成了创建，正在开始加载，此时，用户可以自定义部件元素，实现一些自定义样式效果，如显示加载进度条或随机显示页面背景图片等。实战练习实战练习随机显示页面背景图片随机显示页面背景图片 最终文件：光盘最终文件第18章18-3-2.html视频：光盘视频第18章18-3-2.swf最终文件：光盘最终文件第18章18-3-3.html视频：光盘视频第18章18-3-3.swf本章向读者介绍了jQuery Mobile的基本配置项，并且向读者介绍了一些常用事件的使用方法，使读者能够掌握在jQuery Mobile页面中绑定事件的处理技巧。完成本章内容的学习，读者需要掌握常用的jQuery Mobile事件方法，为全面掌握jQuery Mobile提供的API使用方法打下扎实的基础。