第19章-使用-jQuery-Mobile插件

19.1使用插件实现对话框效果本节将向读者介绍两款分别用于实现对话框和侧边菜单效果的jQueryMobile插件。其中ActionSheet插件用于在jQueryMobile页面中实现弹出对放话框效果，并且不需要编写任何脚本代码。Mmenu插件用于在jQueryMobile页面中实现常见的侧边菜单效果。

ActionSheet插件ActionSheet插件无须编写任何JavaScript代码，完全通过HTML5新增的属性进行控制。通过引入该插件，可以在页面中以优雅的动画效果弹出一个任意的窗口，该窗口中的内容可以是任何HTML代码元素。实战练习——在jQueryMobile页面中实现弹出窗口

最终文件：光盘\最终文件\第19章\19-1-1.html视频：光盘\视频\第19章\19-1-1.swf

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

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

19.2使用插件实现表单效果表单是jQueryMobile应用开发中非常重要的元素，在本节中将介绍两款用于选择日期和时间的jQueryMobile插件，分别是DateBox插件和Mobiscroll插件。通过使用插件的方式能够轻松的开发出相应功能的表单元素。

DateBox插件DateBox插件是专门用于jQueryMobile移动应用的插件，通过该插件可以在弹出的窗口中简单直观地展示一个日期与时间的对话框，用户直接单击其中的某个日期选项，便可以完成日期选择的操作。实战练习——实现日期和时间选择窗口

Mobiscroll插件Mobiscroll插件默认风格是以触摸屏的方式，通过滚动屏幕来选择日期或时间的值。当然也可以自定义选择日期或时间的风格，如Android、iOS等。该插件专门针对移动触摸设备设计的UI效果，广泛应用于众多的移动应用项目中。实战练习——滚屏选择日期和时间

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

19.3使用插件实现图片浏览效果图片交互效果的好坏直接影响所开发的jQueryMobile应用的用户体验，本节将向读者介绍两款用于实现图片浏览效果的jQueryMobiel插件，分别是Camera插件和Swipebox插件。其中Camera插件可以在jQueryMobile页面中实现焦点轮换图片的效果，Swipebox插件可以实现单击缩览图预览大图的效果。

Camera插件Camera插件是一个基于jQuery插件的开源项目，功能是对所指定的图片集实现轮播的效果。在轮播过程中，用户可以查看每一张图片的主题信息，手动中止轮播过程，通过单击查看每一张被播放的图片。此外，轮播的图片还支持缩略图单击预览方式，方便用户以缩略图的方式浏览多张图片。实战练习——实现焦点轮换图片效果

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

Swipebox插件Swipebox是一款精美的jQuery灯箱特效插件，可用于桌面、移动和平板设备。在移动设备上，支持滑动手势导航，而在桌面上则可以使用键盘导航。不支持CSS3.0过渡效果的浏览器可以使用jQuery降级处理。当用户点击目标图片时，图片会以全尺寸的方式显示，此外，用户还可以对同组中的图片进行左右切换来进行查看，非常适合做照片画廊以及查看大尺寸图处。实战练习——实现单击查看大图效果

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

19.4本章小结本章分类介绍了6款专门针对jQueryMobile移动应用开发的插件，通过相应的实例制作，详细