0

私は現在、jQueryMobileの機能を調査しています。Google Playストアが水平方向のスライドを処理する方法に非常に興味があります。したがって、ユーザーが右にスライドすると、ビューは次のページにスライドし、ユーザーが左にスライドすると、ビューは前のページにスクロールします。 、もしあれば。これはネイティブjQueryを使用して実行できることは知っていますが、モバイルデバイスでのイベントについてはまだ詳しくなく、このための組み込み機能がすでにあると確信しています。

これを最初にAndroidデバイスで試し、可能であればiPadとiPhoneで試したいと思います。誰かがこれを達成する方法について私を導くことができますか？

ところで、私はここでブラウザの履歴について話しているのではなく、可能であれば、おそらくいくつかのdiv、ページについて話しているだけです。

4

2 に答える 2

0

それは可能ですが、あなたは悲しいことに失望するでしょう。

これは次のように実現できます。

  1. 1つのHTML内に複数のページがあります。すべてのページに左スワイプと右スワイプがバインドされます。イベントがトリガーされると、changePage（）関数は前/次のページに遷移します。これは優れたサウンドで、デスクトップブラウザでは問題なく機能しますが、Androidフォンでphonegapを使用して実行すると悲惨な結果になります。トランジションはAndroid携帯では依然として大きな問題です。iOSの方がうまくいきますが、それほどではありません。

    このようなもの：

    $('#page-two').on('#page-two', 'swipeleft', function () {
    //next page
    $.mobile.changePage($('#page-three'));
}).on('#page-two', 'swiperight', function () {
    //prev page
    $.mobile.changePage($('#page-one'), { reverse : true });
});

    スワイプイベントはjQueryMobileでサポートされているため、サードパーティのプラグインは必要ありません。

  2. 次の例のようなjQueryMobileカルーセルプラグインを使用します：http：//jsfiddle.net/blackdynamo/yxhzU/

    元のプラグイン：https ：//github.com/blackdynamo/jQuery-Mobile-Carousel

    ページ遷移とは異なり、このプラグインは携帯電話ではるかに良い感じを与えます。

  3. androidタブの外観を選択するパスは、2番目のヘッダー内のnavbarで実現されます。

    <div data-theme="a" data-role="header">
    <h3>
        First Page
    </h3>
    <a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-theme="a" data-role="header">
    <div data-role="navbar">
        <ul>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
            <li><a href="#">Page Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div>
于 2013-01-16T22:33:36.447 に答える
0

解決策＃1-これは簡単な方法です。

    <script>
        $(document).delegate("#homepage", 'pageinit', function (evt) {
            $(this).bind("swipeleft", function (e) {
                $.mobile.changePage("#anotherpage", {
                    transition : 'slide'
                });
            });
        }).delegate("#anotherpage", 'pageinit', function (evt) {
            $(this).bind("swiperight", function (e) {
                $.mobile.changePage("#homepage", {
                    transition : 'slide',
                    reverse    : true
                });
            });
        });         
    </script>

解決策＃2-これはさらに簡単です。

$('#homepage').bind('swipeleft', function() {
    $.mobile.changePage('#anotherpage', {transition: 'slide', reverse: false});
});

$('#anotherpage').bind('swiperight', function() {
    $.mobile.changePage('#homepage', {transition: 'slide', reverse: true});
});
于 2013-01-17T04:34:35.220 に答える