2013-02-18 5 views
7

Pracuję nad stworzeniem własnej galerii obrazów do projektu. Do tego potrzebuję zdarzenia machnięcia. Więc znalazłem poniższy kod na jsfiddle. Wstawiono wszystkie niezbędne pliki. Pokazuje listę i wszystkie ... Ale nadal nie działa. Czy piszę kod jquery w odpowiednim miejscu? Czy coś jest nie tak? Here`s mój kod:Eksploatacja przez jQuery Mobile nie działa

<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

Co za skrzypce? Czy rzeczywiście dodałeś pliki do swojego serwera? Wszelkie błędy w konsoli, jeśli spojrzysz na normalny komputer – mplungjan

+0

Ten kod nie działa nawet dla mnie, nawet jeśli zastosuję zaakceptowane rozwiązanie – Black

Odpowiedz

12

Spróbuj z pageinit obsługi dla jQuery komórkowego:

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

Docs for pageinit @ jquery komórkowego.

Od docs:

Take a look at Configuring Defaults

Ponieważ zdarzenie jquery-mobile jest uruchamiany natychmiast, trzeba związać swoją obsługi zdarzeń przed jQuery Mobile załadowany. Link do plików JavaScript w następującej kolejności:

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

Dziękuję jai .. Działa :) – Ashwin

+0

Nie podoba mi się to, że jesteś mylący pageinit z mobileinit. Nawet jeśli osobiście nie pomylisz tych dwóch, twoja odpowiedź brzmi o pageinit, a potem cytujesz coś o mobileinit. Odebrać ode mnie. – TigOldBitties

+0

sir właśnie uratowałeś mi godziny bólu głowy –

-2

ten doprowadza mnie orzechy too..I nie trzeba używać .Na („pageinit”), jak zasugerowano w poprzednim poście. Okazało się, że moja składnia była poprawna w moim JQuery, ale CASE SENSITIVTY było moim problemem. "swiperight" nie działał, ale "SwipeRight" zrobił! Poniższy kod zadziałał u mnie, a także naprawiono kwestię przewijania, zapobiegając przewijaniu dokumentów w przeglądarkach mobilnych. Pamiętaj, aby określić oddzielnie metody swipeRight i swipeLeft zamiast jednej ogólnej klasy "machnięcia" i możesz już iść! * Zwróć uwagę na linię Exclude Elements na dole, zauważ, że wyjąłem "span" z listy, aby umożliwić przesuwanie na powszechnie używanym, rozpiętym elemencie.

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

Pytanie dotyczyło 'jQuery mobile', a nie' biblioteki touchSwipe' -1 –