0

jQueryMobileを使用して最近のモバイル アプリケーションの 1 つにすばらしい写真スワイプ ライブラリを実装しましたが、それを iOS 5 と併用して小さな問題に遭遇しました (他の可能性もありますが、私は iOS 5 デバイスしか持っていません)。

以下は、実装された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>

上記の例は、実装ガイドに記載されているのとほぼ同じですが、1 つの違いがあります。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はただそこに座って私を笑っています. 実際の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>
4

1 に答える 1

1

同様の問題が発生しました。iOSのonHideイベントが発生していないと思われるため、ToolBarイベントをリッスンして解決しました。

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();
}
});
于 2012-06-05T09:01:05.937 に答える