在phoneap + jquery中滑動圖像問題

我正在用javacsript和jquery構建一個phonegap應用程序。我寫這段代碼來滑動圖像。在phoneap + jquery中滑動圖像問題

$('#fullscreen').swipeleft(function() { 
     //Show next image 
     showNext(); 
     alert('Left'); 
}); 

function showNext() { 
$("#fullscreen").attr('src', "images/next.png"); 
}

但是，當我刷卡，圖像不改變，我得到的錯誤「09-13 14：49：21.188：W /的WebView（20238）：小姐拖累大家都在等待的WebCore的迴應接觸下來。「

在瀏覽一些論壇後，我添加了下面的代碼。

var fullScr = document.getElementById("fullscreen"); 
    fullScr.addEventListener("touchstart", function(e){ onStart(e); }, false); 
    function onStart (touchEvent) { 
     if(navigator.userAgent.match(/Android/i)) { 
     touchEvent.preventDefault(); 
     } 
}

但它仍然無法正常工作。儘管當我將屏幕方向從縱向更改爲橫向時，圖像會發生變化。當我改變方向時，會發生什麼情況？請問如何讓它在同一方向（人像/風景）中工作？

在此先感謝。

來源

2012-09-13 namrathu1

你有沒有試過你的代碼沒有警報（「左」）？ – Anoop

是的，我試過沒有警報。它不工作！ – namrathu1

那麼它對我有用：S ...我使用了Cordova 1.5.0版，並在Android模擬器4.0.3上運行該應用程序。你可以嘗試下面的例子嗎？

HTML內容：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width" /> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 

     <!-- BASIC INCLUDES - TO BE MODIFIED ACCORDING TO YOUR CONVENIENCE --> 

     <link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" /> 
     <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" /> 

     <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> 
     <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script> 

     <!-- END - BASIC INCLUDES --> 

     <script type="text/javascript" charset="utf-8"> 

     $(function() { 
      $('#fullscreen').swipeleft(function() { 
       //Show next image 
       showNext(); 
      }); 

      function showNext() { 
       $("#fullscreen").attr('src', "./images/next.png"); 
      } 
     }); 

     </script> 
    </head> 

    <body> 
     <div data-role="page"> 
      <div data-role="content"> 
       <img id="fullscreen" src="./images/previous.png"></img> 
      </div> 
    </div> 
    </body> 
</html>

注：請確保以下的事情：

修改的來源「基本包含」的代碼，以方便您使用（jQuery/jQuery Mobile的CSS/JS文件的來源）
變化科爾多瓦版本的源，如果你是不是1.5.0

希望這會爲你工作了。無論如何，讓我知道你的結果。

來源

2012-09-14 05:32:16 Littm

感謝您的回覆。它現在爲我工作與我有相同的代碼，但有一個小的變化，我調用它的方式。變化是：〜$（'＃fullscreen'）。swipeleft（showNext）;〜我使用科爾多瓦1.8.1並在Android 2.2.1的設備上運行它 – namrathu1

在phoneap + jquery中滑動圖像問題

回答

相關問題