2012-06-05 33 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(); 
} 
});