2012-06-05 35 views
0

我在最近使用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> 

回答

1

我有一個類似的問題 - 我相信,iOS上的onHide事件不點火,所以我通過聽工具欄事件解決了這個問題:

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){ 
if(e.toolbarAction === 'close'){ 
    //i needed to use a specific location here: window.location.href = "something"; 
    //but i think you could use the history back 
    history.back(); 
} 
});