jQuery Mobile刷卡不工作

我正在爲一個項目創建我自己的圖片庫。爲此我需要滑動事件。所以在jsfiddle上找到了下面的代碼。插入所有必要的文件。它顯示列表和所有..但仍然刷卡不工作。？我在正確的地方寫jQuery代碼嗎？或者有什麼不對？ Here`s我的代碼：jQuery Mobile刷卡不工作

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

來源

2013-02-18 Ashwin

什麼小提琴？你真的把文件添加到你的服務器？如果你在普通電腦上看到任何錯誤 – mplungjan 2013-02-18 09:38:08

這個代碼甚至不適用於我，即使我使用接受的解決方案 – Black 2016-04-29 14:26:57

嘗試用pageinit處理程序的jQuery移動：

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

Docs for pageinit @ jQuery Mobile的。

從文檔：

Take a look at Configuring Defaults

由於jQuery的移動事件被立即觸發，你需要加載jQuery Mobile的前事件處理程序綁定。鏈接到您的JavaScript文件的順序如下：
<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

來源

2013-02-18 09:39:30 Jai

謝謝jai ..它的工作:) – Ashwin 2013-02-18 12:46:33

我不喜歡這樣一個事實：您將pageinit與mobileinit混淆。即使你個人不會混淆這兩者，你的答案是關於pageinit，然後你引用一些關於mobileinit的內容。從我的Downvote。 – TigOldBitties 2013-11-19 09:59:41

先生，你剛剛救了我幾個小時的頭痛 – 2018-03-02 20:56:06

-2

這是我逼瘋too..I沒有用。對（「pageinit」）在以前的帖子建議。原來我的語法在我的JQuery中是正確的，但CASE SENSITIVTY是我的問題。 'swiperight'沒有工作，但'swipeRight'沒有！下面的代碼適用於我，還解決了滑動防止在移動瀏覽器中上下滾動文檔的問題。一定要單獨指定swipeRight和swipeLeft方法，而不是一個通用的「滑動」類，並且您很好！ *注意底部的Exclude Elements行，注意我將'span'從列表中移出，以允許在常用的span元素上滑動。

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

來源

2015-06-17 02:58:14 Victor

問題是關於「jQuery mobile」，而不是「touchSwipe庫」-1 – 2016-03-10 18:11:12

jQuery Mobile刷卡不工作

回答

相關問題