2013-02-18 17 views
7

Sto lavorando per creare la mia galleria di immagini per un progetto. Per questo ho bisogno di sfiorare l'evento. Quindi ho trovato il codice seguente su jsfiddle. Inserito tutti i file necessari. Mostra la lista e tutto .. Ma il colpo non funziona ancora? Sto scrivendo il codice jquery nel posto giusto? O qualcosa di sbagliato? Qui `s il mio codice:jQuery Mobile swipe non funzionante

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

Che violino? Hai effettivamente aggiunto i file al tuo server? Qualsiasi errore nella console se si guarda su un computer normale – mplungjan

+0

Questo codice non funziona nemmeno per me, anche se applico la soluzione accettata – Black

risposta

12

Prova con pageinit gestore per jQuery Mobile:

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

Docs for pageinit @ jQuery Mobile.

Dalla documentazione:

Take a look at Configuring Defaults

Poiché l'evento jquery-mobile si attiva immediatamente, è necessario vincolare il proprio gestore di eventi prima di jQuery Mobile è caricato. Link ai file JavaScript nel seguente ordine:

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 
+0

Grazie jai. Funziona :) – Ashwin

+0

Non mi piace il fatto che stai confondendo pageinit con mobileinit. Anche se personalmente non confondi i due, la tua risposta riguarda pageinit e quindi citi qualcosa su mobileinit. Lasciati andare da me. – TigOldBitties

+0

signore mi hai appena salvato ore di mal di testa –

-2

Questo mi stava facendo noci too..I non ha dovuto usare .on ('pageinit') come suggerito nel post precedente. Risulta che la mia sintassi era corretta nel mio JQuery, ma CASE SENSITIVTY era il mio problema. 'swiperight' non ha funzionato, ma 'swipeRight' ha fatto! Il codice seguente ha funzionato per me e ha risolto anche il problema dello swipe che impediva lo scorrimento del documento verso l'alto e verso il basso nei browser mobili. Assicurati di specificare separatamente i metodi swipeRight e swipeLeft invece di una generica classe 'swipe' e sei a posto! * Prendi nota della riga Exclude Elements in basso, nota che ho preso "span" dall'elenco, per consentire lo scorrimento sull'elemento span comunemente usato.

$(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 
     }); 
}); 
+1

La domanda riguardava 'jQuery mobile', e non la libreria' touchSwipe' -1 –

Problemi correlati