PDF《11.1》

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19 (function(window, $, PhotoSwipe){

20 $(document).ready(function(){

21 $('

div.gallery-page'

) //选择器,选中 gallery-page 元素

22 .live('

pageshow'

, function(e){

23 var

24 currentPage = $(e.target),

25 options = {},

26 photoSwipeInstance = $( ul.gallery a , e.target).photoSwipe(options, currentPage.attr('

id'

))

27 return true;

28 })

29 .live('

pagehide'

, function(e){ //使内容隐藏

30 var

31 currentPage = $(e.target),

32 photoSwipeInstance = PhotoSwipe.getInstance (currentPage.attr('

id'

));

33 if (typeof photoSwipeInstance != undefined &

&

192 jQuery Mobile 移动应用开发实战(第3版) photoSwipeInstance != null) {

34 PhotoSwipe.detatch(photoSwipeInstance);

35 }

36 return true;

37 });

38 });

39 }(window, window.jQuery, window.Code.PhotoSwipe));

//生成图片的滑 动效果

40

41

42

43

44

45

46 PhotoSwipe

47

48

49 These examples show PhotoSwipe integrated with jQuery Mobile:

50

51 First Gallery

52 Second Gallery

53

54 PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:

55

56 Code Computerlove

57

58

59

60 &

copy;

2012 Code Computerlove

61

62

63

64

65

66 First Gallery

67

68

69

70

193 第11 章在jQuery Mobile 中使用插件

71

72

73

74

75

76

77

78

79

80

81

82

83

84 &

copy;

2018 Code Computerlove

85

86

87

88

89

90 Second Gallery

91

92

93

94

95

96

97

194 jQuery Mobile 移动应用开发实战(第3版)

98

99

100

101

102

103

104

105 &

copy;

2012 Code Computerlove

106

107

108

109 运行之后点击页面中的 First Gallery 或Second Gallery,可以看到如图 11-5 所示的图片列 表.然后继续点击任意图片,可以进入如图 11-6 所示的界面,通过底部的面板可以实现轮播 开始/暂停,以及切换图片的功能.在屏幕上左右滑动可以看到图片间切换的动画非常流畅. 图11-5 图片列表 图11-6 PhotoSwipe 的图片轮播界面 现在看看范例 11-1 中的源代码,第8~16 行引用了许多 JS 或CSS 文件,其中一部分读者应 该很熟悉, 因为那些都是 jQuery Mobile 所引用的文件, 至于其他则是插件 photoswipe 所需要的. 第17~40 行才是关键,第21 行有$('

div.gallery-page'

).再看第

64 行和第

88 行的内容:

195 第11 章在jQuery Mobile 中使用插件 此处用来设置该 page 元素中的内容将以相册的形式展示, 而在相应的 page 中以一个 class 属性为 gallery 的标签作为标识,其中的内容就可以实现相册的效果了. 事实上,该插件还有一些可以自定义的属性,注意看第

25 行的 options = {},在该处可以 修改相册显示的一些属性,这些选项的功能和用法列在表 11-1 中,供读者参考. 表11-1 options 的可选项目 属性 描述 默认值 allowUserZoom 是否允许用户放大图片 True autoStartSlideshow 浏览图片时是否默认打开幻灯片模式 False backButtonHideEnable 当用户点击后退按钮时界面是否隐藏 True captionAndToolbarAutoHideDelay 设置自动隐藏工具栏的延迟时间