jQueryモバイルスワイプが動作しない

私は自分のプロジェクトのための自分のイメージギャラリーを作成するために取り組んでいます。そのためには、スワイプイベントが必要です。 jsfiddleで以下のコードを見つけました。必要なファイルをすべて挿入しました。それはリストとすべてを示しています..しかし、まだスワイプは動作していません。正しい場所にjqueryコードを記述していますか？または何か間違っている？ Here`s私のコード：jQueryのモバイル@jQueryモバイルスワイプが動作しない

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

Docs for pageinit：

<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>

出典

2013-02-18 Ashwin

どのようなフィドルですか？実際にサーバーにファイルを追加しましたか？普通のコンピュータを見ているとコンソールにエラーがある – mplungjan

このコードは、私が受け入れた解決策を適用しても機能しません。 – Black

は、jQueryのモバイル用pageinitハンドラを試してみてください。ドキュメントから

：

Take a look at Configuring Defaults

jqueryのモバイルイベントがただちに起動されますので、あなたはjQueryのモバイルがロードされる前に、イベントハンドラをバインドする必要があります。次の順序でJavaScriptファイルへのリンク：これは私がナット運転していた
<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

出典

2013-02-18 09:39:30 Jai

jai ..ありがとうございました。 – Ashwin

私は事実を気に入らないあなたはmobileinitとpageinitを混同しています。あなたが個人的に2つを混同しない場合でも、あなたの答えはpageinitについてです。そして、あなたはmobileinitについて何かを引用します。私からダウンダウン。 – TigOldBitties

あなたはちょうど頭痛の時間を節約しました –

-2

too..Iは、以前の記事で示唆したように（「pageinit」）.on使用する必要はありませんでした。私の構文はJQueryで正しいと分かりましたが、CASE SENSITIVTYが私の問題でした。「swiperight」は機能しませんでしたが、「swipeRight」はそうでした！以下のコードは私のために働きました。また、モバイルブラウザでのスクロールの上下のドキュメントスクロールを修正しました。 1つの一般的な 'スワイプ'クラスではなく、swipeRightメソッドとswipeLeftメソッドを別々に指定してください。 *下部にあるExclude Elements行をメモしてください。一般的に使用されているspan要素をスワイプできるように、リストから 'span'を取り出しました。

$(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-17 02:58:14 Victor

質問は 'touchSwipe library'ではなく' jQuery mobile'についてのものでした-1 –

jQueryモバイルスワイプが動作しない

答えて

関連する問題