2013-02-18 30 views
7

Bir proje için kendi resim galerisini oluşturmak için çalışıyorum. Bunun için kaydırma olayına ihtiyacım var. Yani jsfiddle üzerinde aşağıdaki kodu bulundu. Gerekli tüm dosyaları ekledi. Bu liste ve tüm gösterir .. Ama yine de tokatlamak çalışmıyor. JQuery kodunu doğru yerde mi yazıyorum? Ya da yanlış bir şey mi? İşte benim kod:jQuery Mobile tokatlamak çalışmıyor

<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

Hangi keman? Dosyaları sunucuya gerçekten ekledin mi? Normal bir bilgisayara bakarsanız konsoldaki hatalar – mplungjan

+0

Bu kod benim için bile işe yaramıyor, kabul edilen çözümü uygulamam bile – Black

cevap

12

jQuery mobil için pageinit işleyicisi ile deneyin: jQuery mobil @

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

Docs for pageinit. Dokümanlar

:

Take a look at Configuring Defaults

jquery-mobil olay hemen tetiklenir olduğundan, jQuery Mobile yüklenmeden önce olay işleyicinizi bağlamak gerekir. Aşağıdaki sırayla JavaScript dosyalarına Bağlantı: Bu beni deli gidiyordum

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

Teşekkür ederim jai .. Çalışıyor :) – Ashwin

+0

mobileinit ile sayfa kafa karıştırıyorsunuz. Kişisel olarak kafanızı karıştırmıyor olsanız bile, cevabınız sayfa hakkındadır ve ardından mobileinit hakkında bir şeyler alıntılarsınız. Benden aşağı in. – TigOldBitties

+0

efendim sadece bir baş ağrısından saatlerimi kurtardın –

-2

too..I önceki sonrası önerildiği gibi ('pageinit') .sistem kullanmak yoktu. Benim söz dizimi JQuery'mde doğru çıktı, ancak CASE SENSITIVTY benim sorunumdu. 'swiperight' işe yaramadı, ama 'swipeRight' yaptı! Aşağıdaki kod benim için çalıştı ve ayrıca, mobil tarayıcılarda belge kaydırmayı yukarı ve aşağı kaydırarak Swipe sorununu çözdü. SwipeRight ve swipeLeft yöntemlerini bir genel 'kaydırma' sınıfı yerine ayrı ayrı belirttiğinizden emin olun. * Dışarıda Hariç Tutulan Öğeler satırını not edin, yaygın olarak kullanılan span öğesinde kaydırma yapmak için listeden 'span' aldığımı not edin.

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

Soru 'jQuery mobile' hakkındaydı ve 'touchSwipe library' -1 değil –