第19章　使用 jQuery Mobile插件课件.ppt

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

1、本节将向读者介绍两款分别用于实现对话框和侧边菜单效果的jQuery Mobile插件。其中ActionSheet插件用于在jQuery Mobile页面中实现弹出对放话框效果，并且不需要编写任何脚本代码。Mmenu插件用于在jQuery Mobile页面中实现常见的侧边菜单效果。 ActionSheet插件插件ActionSheet插件无须编写任何JavaScript代码，完全通过HTML 5新增的属性进行控制。通过引入该插件，可以在页面中以优雅的动画效果弹出一个任意的窗口，该窗口中的内容可以是任何HTML代码元素。实战练习实战练习在在jQuery Mobile页面中实现弹出窗口页面中实现弹出

2、窗口 最终文件：光盘最终文件第19章19-1-1.html视频：光盘视频第19章19-1-1.swf mmenu插件插件mmenu插件是一款创建滑动导航菜单的jQuery Mobile插件，只需要短短几行JavaScript脚本代码，就可以在移动网站中实现类似于移动APP外观的非常炫酷的侧边菜单效果。mmenu插件不仅为开发者提供了诸如打开、关闭、切换等常用的菜单功能，还提供了菜单位置（居左和居右）、是否显示菜单项计数器等选项的设置。实战练习实战练习制作侧边菜单效果制作侧边菜单效果 最终文件：光盘最终文件第19章19-1-2.html视频：光盘视频第19章19-1-2.swf表单是jQuery

3、 Mobile应用开发中非常重要的元素，在本节中将介绍两款用于选择日期和时间的jQuery Mobile插件，分别是DateBox插件和Mobiscroll插件。通过使用插件的方式能够轻松的开发出相应功能的表单元素。DateBox插件插件DateBox插件是专门用于jQuery Mobile移动应用的插件，通过该插件可以在弹出的窗口中简单直观地展示一个日期与时间的对话框，用户直接单击其中的某个日期选项，便可以完成日期选择的操作。实战练习实战练习实现日期和时间选择窗口实现日期和时间选择窗口Mobiscroll插件插件Mobiscroll插件默认风格是以触摸屏的方式，通过滚动屏幕来选择日期或时间的

4、值。当然也可以自定义选择日期或时间的风格，如Android、iOS等。该插件专门针对移动触摸设备设计的UI效果，广泛应用于众多的移动应用项目中。实战练习实战练习滚屏选择日期和时间滚屏选择日期和时间 最终文件：光盘最终文件第19章19-2-2.html视频：光盘视频第19章19-2-2.swf最终文件：光盘最终文件第19章19-2-1.html视频：光盘视频第19章19-2-1.swf 图片交互效果的好坏直接影响所开发的jQuery Mobile应用的用户体验，本节将向读者介绍两款用于实现图片浏览效果的jQuery Mobiel插件，分别是Camera插件和Swipebox插件。其中Camera

5、插件可以在jQuery Mobile页面中实现焦点轮换图片的效果，Swipebox插件可以实现单击缩览图预览大图的效果。 Camera插件插件Camera插件是一个基于jQuery插件的开源项目，功能是对所指定的图片集实现轮播的效果。在轮播过程中，用户可以查看每一张图片的主题信息，手动中止轮播过程，通过单击查看每一张被播放的图片。此外，轮播的图片还支持缩略图单击预览方式，方便用户以缩略图的方式浏览多张图片。实战练习实战练习实现焦点轮换图实现焦点轮换图片效果片效果 最终文件：光盘最终文件第19章19-3-1.html视频：光盘视频第19章19-3-1.swfSwipebox插件插件Swipebo

6、x是一款精美的jQuery灯箱特效插件，可用于桌面、移动和平板设备。在移动设备上，支持滑动手势导航，而在桌面上则可以使用键盘导航。不支持CSS 3.0过渡效果的浏览器可以使用jQuery降级处理。当用户点击目标图片时，图片会以全尺寸的方式显示，此外，用户还可以对同组中的图片进行左右切换来进行查看，非常适合做照片画廊以及查看大尺寸图处。实战练习实战练习实现单击查看大实现单击查看大图效果图效果 最终文件：光盘最终文件第19章19-3-2.html视频：光盘视频第19章19-3-2.swf本章分类介绍了6款专门针对jQuery Mobile移动应用开发的插件，通过相应的实例制作，详细介绍了这些插件在jQuery Mobile应用中的使用方法和注意事项。通过本章内容的学习，读者需要了解jQuery Mobile插件的作用，并能够在jQuery Mobile应用开发过程中应用适当的插件，提高工作效率。