2013-02-20 3 views
1

Я использую телефонный зазор для разработки кросс-платформенного мобильного приложения.jQuery события сотового контакта не работают

Теперь, если я использую события Swipe. Они работают только в том случае, если это первая страница приложения, например index.html.

Но если я перенаправление, если это вторая страница

Войти -> Index.html

прикосновение и ссылки перестают работать

не в состоянии выяснить помощь issue.Please

Это код

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script 
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

<script> 
    $(document).ready(function() { 

     $('.ui-slider-handle').live('touchstart', function() { 
      // When user touches the slider handle, temporarily unbind the page turn handlers 
      doUnbind(); 
     }); 

     $('.ui-slider-handle').live('mousedown', function() { 
      // When user touches the slider handle, temporarily unbind the page turn handlers 
      doUnbind(); 
     }); 

     $('.ui-slider-handle').live('touchend', function() { 
      //When the user let's go of the handle, rebind the controls for page turn 
      // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered 
      setTimeout(function() { 
       doBind(); 
      }, 100); 
     }); 

     $('.ui-slider-handle').live('mouseup', function() { 
      //When the user let's go of the handle, rebind the controls for page turn 
      // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered 
      setTimeout(function() { 
       doBind(); 
      }, 100); 
     }); 

     // Set the initial window (assuming it will always be #1 
     window.now = 1; 

     //get an Array of all of the pages and count 
     windowMax = $('div[data-role="page"]').length; 

     doBind(); 
    }); 
    // Functions for binding swipe events to named handlers 
    function doBind() { 
     $('div[data-role="page"]').live("swipeleft", turnPage); 
     $('div[data-role="page"]').live("swiperight", turnPageBack); 
    } 

    function doUnbind() { 
     $('div[data-role="page"]').die("swipeleft", turnPage); 
     $('div[data-role="page"]').die("swiperight", turnPageBack); 
    } 

    // Named handlers for binding page turn controls 
    function turnPage() { 
     // Check to see if we are already at the highest numbers page    
     if (window.now < windowMax) { 
      window.now++ 
      $.mobile.changePage("#device" + window.now, "slide", false, true); 
     } 
    } 

    function turnPageBack() { 
     // Check to see if we are already at the lowest numbered page 
     if (window.now != 1) { 
      window.now--; 
      $.mobile.changePage("#device" + window.now, "slide", true, true); 
     } 
    } 
</script> 
</head> 

<body> 
    <div data-role="page" id="device1"> 
     <h1>School Day</h1> 
     <p>Muchos paquetes de autoedición y editores de páginas web usan 
      el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de 
      "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este 
      texto si se encuentran en estado de desarrollo. Muchas versiones han 
      evolucionado a través de los años, algunas veces por accidente, otras 
      veces a propósito (por ejemplo insertándole humor y cosas por el 
      estilo).</p> 


    </div> 
    <!-- /page --> 
    <div data-role="page" id="device2"> 
     <h1>School Day</h1> 
     <p>TRichard McClintock, un profesor de Latin de la Universidad de 
      Hampden-Sydney en Virginia, encontró una de las palabras más oscuras 
      de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y 
      al seguir leyendo distintos textos del latín, descubrió la fuente 
      indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de 
      "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por 
      Cicero, escrito en el año 45 antes de Cristo. Este libro es un 
      tratado de teoría de éticas, muy popular durante el Renacimiento.</p> 
    </div> 
    <!-- /page --> 
</body> 
</html> 
+0

Можете ли вы разместить часть своего кода? – NDakotaBE

+0

@NDakotaBE yes 1 минута – 2013-02-20 09:55:47

+0

необходимо выяснить, используете ли вы ajax в некотором роде. – Jai

ответ

0

Я переделан код и сделал рабочий пример jsFiddle для вас: http://jsfiddle.net/Gajotres/sBnyP/

Это было проверено настольного Firefox, Android 4.1.1 Chrome и iOS iPad 6.0

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

<script> 
    $(document).on('pagebeforeshow', '#device1, #device2', function(){  
     $('.ui-slider-handle').live('touchstart mousedown', function() { 
      // When user touches the slider handle, temporarily unbind the page turn handlers 
      doUnbind(); 
     }); 

     $('.ui-slider-handle').live('touchend mouseup', function() { 
      //When the user let's go of the handle, rebind the controls for page turn 
      // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered 
      setTimeout(function() { 
       doBind(); 
      }, 100); 
     }); 

     doBind(); 
    }); 

    // Functions for binding swipe events to named handlers 
    function doBind() { 
     $(document).on('swipeleft', '[data-role="page"]', turnPage);  
     $(document).on('swiperight', '[data-role="page"]', turnPageBack); 
    } 

    function doUnbind() { 
     $(document).off('swipeleft', '[data-role="page"]', turnPage);  
     $(document).off('swiperight', '[data-role="page"]', turnPageBack); 
    } 

    // Named handlers for binding page turn controls 
    function turnPage(event) { 
      if(event.handled !== true) // This will prevent event triggering more then once 
      {  
       var nextpage = $(this).next('[data-role="page"]'); 
       // swipe using id of next page if exists 
       if (nextpage.length > 0) { 
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true); 
       } 
       event.handled = true; 
      } 
      return false; 
    } 

    function turnPageBack(event) { 
      if(event.handled !== true) // This will prevent event triggering more then once 
      {  
       var prevpage = $(this).prev('[data-role="page"]'); 
       //alert('Left');  
       if (prevpage.length > 0) { 
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true); 
       } 
       event.handled = true; 
      } 
      return false; 
    } 
</script> 
</head> 

<body> 
    <div data-role="page" id="device1"> 
     <h1>School Day</h1> 
     <p>Muchos paquetes de autoedición y editores de páginas web usan 
      el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de 
      "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este 
      texto si se encuentran en estado de desarrollo. Muchas versiones han 
      evolucionado a través de los anos, algunas veces por accidente, otras 
      veces a propósito (por ejemplo insertándole humor y cosas por el 
      estilo).</p> 


    </div> 
    <!-- /page --> 
    <div data-role="page" id="device2"> 
     <h1>School Day</h1> 
     <p>TRichard McClintock, un profesor de Latin de la Universidad de 
      Hampden-Sydney en Virginia, encontró una de las palabras más oscuras 
      de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y 
      al seguir leyendo distintos textos del latín, descubrió la fuente 
      indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de 
      "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por 
      Cicero, escrito en el ano 45 antes de Cristo. Este libro es un 
      tratado de teoría de éticas, muy popular durante el Renacimiento.</p> 
    </div> 
    <!-- /page --> 
</body> 
</html> 
+0

Спасибо, что это сработало для меня. Все работает для меня. Фактически, когда я использую window.location.href, он работает, но предшествует, когда я использую $ .mobile.changePage(); это не работает . Я искал выделение, но не понимаю, почему это происходит – 2013-02-20 13:38:31

0

Вместо этого:

$(document).ready(function() { 

вы должны попробовать это:

$(document).on('pageinit',function() { 

и это should be pasted above jquery mobile script.

Таким образом, порядок будет:

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script> 
    $(document).on('pageinit',function() { 
     /.....all the code here 
</script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> 
</script> 
+0

Нет, его не работает. Не понимаю, в чем проблема. – 2013-02-20 10:10:36

+0

Нет, он не работает на эмуляторе и устройстве. Он работает только с браузером eclipse. – 2013-02-20 10:19:04

+0

please jai help me – 2013-02-20 10:23:35