8

プロジェクト用に独自の画像ギャラリーを作成するために取り組んでいます。そのためにはスワイプイベントが必要です。したがって、jsfiddleで以下のコードを見つけました。必要なファイルをすべて挿入しました。リストとすべてが表示されます。しかし、それでもスワイプは機能しません。私はjqueryコードを正しい場所に書いていますか？または何か問題がありますか？これが私のコードです：

    <html>
        <head>
        <meta charset="utf-8" />
        <title>Home</title>
        <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
        <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1" />

        <link rel="stylesheet" type="text/css" href="Css/style.css" />
        <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
        <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" />
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

        <script type="text/javascript" src="Javascript/jquery1.js"></script>
        <script type="text/javascript" src="Javascript/jquery2.js"></script>
        <script type="text/javascript" src="css/jq1.6.2.js"></script>

        <script type="text/javascript">
        $("#listitem").swiperight(function() {
            $.mobile.changePage("#page1");
        });
        </script>  

        </head>
        <body>

            <div data-role="page" id="home"> 
            <div data-role="content">

                    <ul data-role="listview" data-inset="true">
                        <li id="listitem"> Swipe Right to view Page 1</a></li>
                    </ul>

            </div>
        </div>

        <div data-role="page" id="page1"> 
            <div data-role="content">

                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Navigation</li> 

                </ul>

                <p>
                     Page 1
                </p>
            </div>
        </div>

        </body>
4

2 に答える 2

14

pageinitjQuerymobileのハンドラーを試してください。

$(document).on('pageinit', function(event){
   $("#listitem").swiperight(function() {
        $.mobile.changePage("#page1");
    });
});

pageinit @jquerymobileのドキュメント。

ドキュメントから：

デフォルトの設定を見てください

jquery-mobileイベントはすぐにトリガーされるため、jQueryMobileが読み込まれる前にイベントハンドラーをバインドする必要があります。次の順序でJavaScriptファイルにリンクします。

<script src="jquery.js"></script>  
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
于 2013-02-18T09:39:30.327 に答える
-3

これも私を悩ませていました。以前の投稿で提案されたように、.on（'pageinit'）を使用する必要はありませんでした。私の構文は私のJQueryで正しいことがわかりましたが、CASESENSITIVTYが私の問題でした。「swiperight」は機能しませんでしたが、「swipeRight」は機能しました。以下のコードは私のために機能し、モバイルブラウザでのドキュメントの上下スクロールを妨げるスワイプの問題も修正しました。1つの一般的な「swipe」クラスではなく、必ずswipeRightメソッドとswipeLeftメソッドを別々に指定してください。*下部の[要素の除外]行に注意してください。一般的に使用されるスパン要素をスワイプできるように、リストから「スパン」を削除したことに注意してください。

$(function() {  

      $('.yourclassname').swipe( 
      {
        swipeLeft:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe left actions in here, animations, fading, etc..
            alert(direction);
        },
        swipeRight:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe right actions in here, animations, fading, etc..
            alert(direction);
        },
        threshold:4,
        // set your swipe threshold above

        excludedElements:"button, input, select, textarea"
        // notice span isn't in the above list
      });
});
于 2015-06-17T02:58:14.213 に答える