我在最近使用jQueryMobile的移動應用程序中實現了神話般的photoswipe圖書館,我遇到了與iOS 5一起使用它的一個小問題(可能是其他人,但我'我只有iOS 5設備)。iOS上的Photoswipe圖庫關閉事件
下面是一個實現的JavaScript的
<script type="text/javascript">
(function (window, $, PhotoSwipe) {
$(document).ready(function() {
$('div.gallery-page')
.live('pageshow', function (e) {
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
photoSwipeInstance.show(0);
return true;
})
.live('pagehide', function (e) {
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
console.log($(e.target));
history.back();
return true;
});
});
} (window, window.jQuery, window.Code.PhotoSwipe));
</script>
上面的例子幾乎完全一樣實施指南與一個區別說:當pageshow事件引發和實例已經連接,我打電話「photoSwipeInstance.show(0);」以便立即顯示畫廊。
這一切都工作正常,除了當我從工具欄關閉畫廊時,它會回到靜態頁面,而不是它被調用的頁面。
我的第一個想法是針對事件「onHide」實施一種方法並執行「history.back();」聲明:
photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
history.back();
});
這工作就像在Android上的魅力,但什麼都沒有發生在iOS上,所以我想到了一個雙重歷史回iOS設備:
photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
console.log(navigator.appVersion);
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
history.go(-2);
} else {
history.back();
}
});
但仍沒有運氣,iOS的只是坐在在那裏,並嘲笑我。有誰知道最好的方式來重定向到附加photoswipe實例的頁面,而不是回到實際的html頁面嗎?下面是最終JS標記示例:
<script type="text/javascript">
(function (window, $, PhotoSwipe) {
$(document).ready(function() {
$('div.gallery-page')
.live('pageshow', function (e) {
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
// onHide event wire back to previous page.
photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
console.log(navigator.appVersion);
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
history.go(-2);
} else {
history.back();
}
});
photoSwipeInstance.show(0);
return true;
})
.live('pagehide', function (e) {
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
} (window, window.jQuery, window.Code.PhotoSwipe));
</script>