PDF《11.1》

5000 captionAndToolbarHide 是否隐藏工具栏 False captionAndToolbarOpacity 工具栏的透明度 0.8 enableDrag 是否允许图片被拖动 True fadeInSpeed 图片淡入的速度

250 fadeOutSpeed 图片淡出的速度

250 slideshowDelay 自动切换图片的间隔时间

3000 由于本例是本书中第一次接触到插件的例子,因此介绍得比较详细.在后面的章节 中,将不会再给出 demo 的源代码,请读者自行下载 demo 参考. 11.2.2 Camera 的使用 与PhotoSwipe 一样,Camera 也是一款可用于 jQuery Mobile 开发的插件.它可以让开发 者轻易地实现图片轮播的功能,同时还可以让用户在欣赏图片时查看每一张图片的主体信息. 除此之外,该插件还拥有快速预览的功能,让用户有更多的方式实现对图片的浏览.图11-7 是该插件的效果图. 图11-7 Camera 的效果 读者可以在网站http://www.pixedelic.com/plugins/camera/ 下载这款插件(或https://github.com/pixedelic/Camera 地址下载).在下载该插件时,也许会弹出对话框询问用户 是否愿意为这款插件捐款.如果不想捐款的话,输入

0 即可.下载后,解压所下载的压缩包, 有一个名为 demo 的文件夹,可以参考其中的文件进行学习.

196 jQuery Mobile 移动应用开发实战(第3版) 使用该插件首先要引用所需要的 CSS 和JS 文件,然后在页面内创建元素.在页面中添加 图片的格式如下: 这里是对图片的描述 可以通过重复在页面内加入这样的内容来达到向页面中加入更多图片的目的, 这与通常图 片轮播插件以标签来作为标识的方式略有不同. 与PhotoSwipe 一样,该插件也有 option 属性可以修改,其属性如表 11-2 所示. 表11-2 camera 中的 option 属性 属性 描述 默认值 alignment 图片轮播的对齐方式 Center barPosition 文字说明所在的位置 Bottom height 图片的长宽比 50% loader 加载时用于显示进度的图例 Pie loaderStroke 加载时显示进度边框的大小

7 pagination 是否显示分页标识 True slideOn 轮播图片显示的顺序,随机/顺序/逆序等 Random time 图片轮播的间隔时间

7000 当页面中的这些属性被修改之后,图片会以更加复杂的形式展示出来,如图 11-8 所示就 是在加入 loader 属性后产生的效果. 图11-8 高级的 Camera 插件例子 Camera 插件与其他图片插件相比的一个优点在于,它提供了 API,让开发者可以控制对 图片的轮播.这些 API 如下: jQuery('

YOUR_TARGET'

).cameraStop();

//停止轮播 jQuery('

YOUR_TARGET'

).cameraPlay();

//开始轮播 jQuery('

YOUR_TARGET'

).cameraPause();

//暂停轮播 jQuery('

YOUR_TARGET'

).cameraResume();

//重新开始轮播

197 第11 章在jQuery Mobile 中使用插件 可以通过 jQuery 调用它们来实现对图片轮播的控制. 11.3 菜单类插件 这类插件不是为 jQuery Mobile 专门开发的,它们大多数都是收费的.在网上能够找到太 多类似的例子,因此笔者在此仅仅列出几个比较喜欢的菜单插件,剩下的就交给读者自学. 网站 http://jquerymenuexamples.com/上提供了许多可以应用在 Web 页面上的菜单样式. 它 们都是基于同一种模式,只是在外观上有所区别.图11-9 是一部分菜单样式的截图,图11-10 是该网站所推荐的一款菜单主题,非常适合 jQuery Mobile 风格. 图11-9 一些菜单的样式 图11-10 一款非常适合 jQuery Mobile 主题样式的菜单 不幸的是,这款插件是收费的,虽然有免费的版本可供试用,但是却会在页面上显 示一些该网站的广告........