1. 首頁
  2. 問答
  3. Jquery Mobile手勢在android phonegap應用程序中滑動左/右問題

Jquery Mobile手勢在android phonegap應用程序中滑動左/右問題

2013-01-01 50 views
1

我想要在android中實現左/右滑動jquery mobile/phonegap。我有示例代碼，但是當我滑動時，它沒有任何發生。Jquery Mobile手勢在android phonegap應用程序中滑動左/右問題

這裏是我的javascript代碼

$("#listitem").swiperight(function() { 
    $.mobile.changePage("#page1"); 
});

下面是正文內容

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <p> 
     <ul data-role="listview" data-inset="true" data-theme="c"> 
      <li id="listitem">Swipe Right to view Page 1</li> 
     </ul> 
     </p> 
    </div> 
</div> 

<div data-role="page" id="page1"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c"> 
      <li data-role="list-divider">Navigation</li> 
      <li><a href="#home">Back to the Home Page</a></li> 
     </ul> 

     <p> 
      Yeah!<br />You Swiped Right to view Page 1 
     </p> 
    </div> 
</div>

來源

2013-01-01 Tony Chhabada

回答

2

事件處理程序只能綁定到當前所選元素和它們必須存在在頁面上當時你的代碼打電話。在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此在不等待文檔準備就緒的情況下將事件附加到文檔元素中是安全的。

此外，如jQM docs中所述，您可以像使用live（）或bind（）一樣綁定到其他jQuery事件。

您可以檢查下面的例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Swipe</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
     <script> 
      $('#listitem').live("swiperight", function(){ 
       $.mobile.changePage("#page1"); 
      }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="content"> 
       <p> 
        <ul data-role="listview" data-inset="true" data-theme="c"> 
         <li id="listitem">Swipe Right to view Page 1</li> 
        </ul> 
       </p> 
      </div> 
     </div> 
     <div data-role="page" id="page1"> 
      <div data-role="content"> 
       <ul data-role="listview" data-inset="true" data-theme="c"> 
        <li data-role="list-divider">Navigation</li> 
        <li><a href="#home">Back to the Home Page</a></li> 
       </ul> 
       <p> 
        Yeah!<br />You Swiped Right to view Page 1 
       </p> 
      </div> 
     </div> 
    </body> 
</html>

例2：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Swipe Example</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
     <script> 
      $(document).on("swiperight", "#listitem", function() { 
       $.mobile.changePage("#page1"); 
      }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="content"> 
       <p> 
        <ul data-role="listview" data-inset="true" data-theme="c"> 
         <li id="listitem">Swipe Right to view Page 1</li> 
        </ul> 
       </p> 
      </div> 
     </div> 
     <div data-role="page" id="page1"> 
      <div data-role="content"> 
       <ul data-role="listview" data-inset="true" data-theme="c"> 
        <li data-role="list-divider">Navigation</li> 
        <li><a href="#home">Back to the Home Page</a></li> 
       </ul> 
       <p> 
        Yeah!<br />You Swiped Right to view Page 1 
       </p> 
      </div> 
     </div> 
    </body> 
</html>

例3：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Swipe Example</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="content"> 
       <p> 
        <ul data-role="listview" data-inset="true" data-theme="c"> 
         <li id="listitem">Swipe Right to view Page 1</li> 
        </ul> 
       </p> 
      </div> 
     </div> 
     <div data-role="page" id="page1"> 
      <div data-role="content"> 
       <ul data-role="listview" data-inset="true" data-theme="c"> 
        <li data-role="list-divider">Navigation</li> 
        <li><a href="#home">Back to the Home Page</a></li> 
       </ul> 
       <p> 
        Yeah!<br />You Swiped Right to view Page 1 
       </p> 
      </div> 
     </div> 
     <script> 
      $("#listitem").swiperight(function() { 
       $.mobile.changePage("#page1"); 
      }); 
     </script> 
    </body> 
</html>

來源

2013-01-01 15:14:16

+0

謝謝TOLIS –

+0

歡迎您:) –

+2

TOLIS嗨，我有一個關於刷卡的問題。我在android上使用phonegap/jquery mobile。我已經使用過你的代碼，但它沒有響應，我不得不滑動它3-4次才能使滑動事件工作。你有什麼想法嗎？ –

相關問題

 相關問題