1

jQuery モバイル 1.3.2 を使用しており、スワイプ イベント用のフックを追加しました。スワイプ イベントごとに、note_container を左右にスライドさせます。ただし、スワイプ イベントの登録は、Samsung Galaxy S3 (およびその他の Android デバイス) では断続的/応答しませんが、iPhone ではうまく機能します。特に理由は？

<html>
<head>
    <meta charset="utf-8" />
    <title>Notoji</title>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css"/>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
    <script>
        $(document).ready(function(){

            width = $('.note').first().width();

            $('.note_container').bind('swipeleft', swipe_note_left);
            $('.note_container').bind('swiperight', swipe_note_right);

            function swipe_note_left(){
                alert("left swiped");
                left_val = $('.note_container').offset().left;
                adjusted_left = left_val - width;
                $('.note_container').animate({left: adjusted_left, useTranslate3d:true}, 250);
            }

            function swipe_note_right(){
                alert('right swiped');
                left_val = $('.note_container').offset().left;
                adjusted_left = left_val + width;
                $('.note_container').animate({left: adjusted_left, useTranslate3d:true}, 250);
            }
        })
    </script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <div class="title"> Notoji</div>
        </div>
        <div data-role="content" class="content review">
            <div class="note_container">
                <div class="note">
                    <div class="note_text">Its my birthday, and I have treated myself to a very nice gift.</div>
                    <img class="sticker" src="/assets/sally/sally_04.png"/>
                </div>
                <div class="note">
                    <div class="note_text">The rogue defender. Killer the wrestler bunny.</div>
                    <img class="sticker" src="/assets/killer/killer_01.png"/>
                </div>  
            </div>
            <a href="create.html" data-transition="slideup" data-inline="true">
                <span class="create"></span>
            </a>
            </span> 
        </div>
    </div>
</body>

ここでコードをテストできます: http://jsbin.com/UPoparU/1/

4

2 に答える 2