PDF《11.1》

第11 章?在jQuery Mobile中使用插件 ? 本章将介绍在 jQuery Mobile 开发中使用插件的方法.

由于 jQuery Mobile 本质上也是一款 基于 jQuery 的轻量级插件,因此大多数基于 jQuery 的插件都可以直接应用在 jQuery Mobile 的 开发实践中. 本章还将介绍如何获取自己所需要的插件,这也是 jQuery Mobile 开发者所必须具备的能 力.本章主要的知识点包括: 在jQuery Mobile 中使用插件的方法 jQuery Mobile 常用的插件都有哪些 如何选择和获取自己所需要的插件 11.1 jQuery Mobile 插件概述 作为一款基于 HTML

5 和jQuery 的跨平台开发环境,jQuery Mobile 具有非常强大的可拓 展性,有许多针对 jQuery Mobile 移动开发的插件可供开发者选用.针对 jQuery Mobile 产生的 这些插件大多依赖于 jQuery Mobile 的主文件存在, 因而与 jQuery Mobile 的功能和样式不会产 生冲突.除此之外,这些插件大多集成了 jQuery Mobile 的轻量和高效的特点,使得开发者能 够在极短的时间内获得良好的体验. jQuery Mobile 的插件主要分为

4 类:移动相册(如图 11-1 所示)、移动菜单(如图 11-2 所示)、选择器(如图 11-3 所示)和其他(如图 11-4 所示). 图11-1 jQuery Mobile 相册插件 图11-2 jQuery Mobile 的菜单插件

190 jQuery Mobile 移动应用开发实战(第3版) 图11-3 jQuery Mobile 的一款日期选择器插件 11-4 一款 iOS 风格的插件 因为人们总是喜欢看得见的东西, 所以拥有诸多特效的相册类插件自然要比其他插件抢眼 许多,如各类图片焦点图、幻灯片效果等,无一不给开发者和用户一种赏心悦目的美感. 相比之下,菜单类的插件就逊色一些,因为 jQuery Mobile 原生的导航栏等控件已经足够 掌控手机那小小的屏幕.不过在一些大屏幕设备商(如平板电脑)上,这类插件的优势就非常 明显了,尤其是最近不少开发者直接利用 jQuery Mobile 开发 PC 端的网页. 至于选择类的插件,地位则有些尴尬,因为开发者平时很少会需要这一类插件,可是到了 真正需要的时候就会发现,这类插件无论是重要程度还是开发的难度都远超其他类型的插件. 因此这类插件是常常被忽略的王者. 另外,还有一些不知道该如何归类的插件,如一些表单验证程序、页面对话框的主题,以 及图 11-4 中展示的 iOS 风格插件,将它们统称为其他插件. 11.2 相册类插件 相册类插件是各种 Web 应用中经常使用的一类插件,包括图片滑动、过渡、自动切换、 幻灯片展示,甚至具有作为页面的背景等功能,常见的有 PhotoSwipe、Touch Gallery 和TN3 Gallery 等. 11.2.1 PhotoSwipe 的使用 PhotoSwipe 是一款基于 HTML

5 和JavaScript 的应用于移动 Web 的图片浏览插件.它能 被很容易地集成到各种 Web 应用之中. 它名字中有 swipe, 也就表示能够支持用户以滑动的方 式切换页面中的图片, 非常适合作为相册使用, 并且集成了图片轮播的功能, 可以说非常实用. 在PhotoSwipe 的官方网站 http://www.photoswipe.com/上可以获取该插件,并且下载的压 缩包中包含许多 demo 可供开发者参考.本节就以其中的一个 demo 作为例子,介绍这款插件 的用法.在下载的压缩包中有一个名为 04-jquery-mobile.html 的页面,用Notepad++打开后, 能看到源代码如范例 11-1 所示.

191 第11 章在jQuery Mobile 中使用插件 【范例 11-1 在jQuery Mobile 中使用 PhotoSwipe】

01

02

03

04 PhotoSwipe