Проблемы с событиями vmouse WP7 JQueryMobile

Я пытаюсь собрать слайдер горизонтального содержимого с помощью JQueryMobile.Проблемы с событиями vmouse WP7 JQueryMobile

Следующий код прекрасно работает на Android, IOS, Chrome и IE9, где пользователь может коснуться (или mousedown) и перетащить содержимое влево или вправо.

На WP7 (Mango) все, что происходит, это оригинальное прикосновение, кажется, выделяет элемент, содержащий DIV, но любое движение игнорируется.

Content Slider Sample

<!DOCTYPE html> 
<html class="ui-mobile"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <title>Scroll View Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body class="ui-mobile-viewport"> 
    <div data-role="page"> 
     <div data-role="header"> 
      <h1>Content Slider</h1> 
     </div> 
      <div data-role="content"> 
      <div style="height:50px;width: 110px; overflow: hidden"> 
       <div id="divScroll" style="width: 500px; margin-left:0px;left: 0px; top: 0px;"> 
        <div class="sliderItem" style="background-color:#A03030;float: left; width: 50px;height:50px;">Item 1</div> 
        <div class="sliderItem" style="background-color:#B03030;float: left; width: 50px;height:50px;">Item 2</div> 
        <div class="sliderItem" style="background-color:#D03030;float: left; width: 50px;height:50px;">Item 3</div> 
        <div class="sliderItem" style="background-color:#E03030;float: left; width: 50px;height:50px;">Item 4</div> 
        <div class="sliderItem" style="background-color:#F03030;float: left; width: 50px;height:50px;">Item 5</div> 
       </div> 
      </div> 

      <div id="dbg"></div> 
      <div id="dbg2"></div> 

      <script type="text/javascript" language="javascript"> 
       var mouseIsDown = false; 
       var mouseDownX = 0; 
       var mouseDownMargin = 0; 

       $(document).bind('vmouseup', function (event) { 
       if (mouseIsDown) { 
        event.preventDefault(); 
        $('#dbg').html(event.type); 
        mouseIsDown = false; 
       }}); 

       $('.sliderItem').bind('vmousedown', function (event) { 
        event.preventDefault(); 
       }); 

       $('#divScroll').bind('vmousedown vmousemove', function (event) { 
        event.preventDefault(); 
        $('#dbg').html(event.type); 
        if (event.type == 'vmousedown') { 

         mouseIsDown = true; 


         var ml = $('#divScroll').css('margin-left').replace('px', ''); 
         $('#dbg2').html(ml); 
         mouseDownMargin = parseInt(ml); 
         mouseDownX = event.pageX; 

        } 

        if (event.type == 'vmousemove' && mouseIsDown) { 
         var delta = mouseDownX - event.pageX; 
         $('#dbg2').html(mouseDownMargin - delta); 


         $('#divScroll').css({ marginLeft: mouseDownMargin - delta }); 

        } 
       }); 
      </script> 
     </div> 
    </div> 
</body> 
</html>

Что я могу сделать, чтобы заставить это работать на WP7?

Заранее благодарим за консультацию.

источник

2012-01-19 Andy Baker

Это не будет работать на WP7, потому что версия IE9, используемая WP7, не очень хорошо поддерживает события mouse down/move/up. Что происходит, так это то, что когда вы перенесите свой палец на экран, никаких событий не запускается. Когда вы поднимаете пальцы mousedown/click/mouseup, события увольняются немедленно в этом порядке. Это делает невозможным реализацию любых функций, которые позволяют пользователю манипулировать/перетаскивать элементы DOM.

Единственный способ исправить эту проблему - написать собственный код, который эмулирует события мыши или касания. Я имел некоторый успех с этим ... в следующей блоге:

http://www.scottlogic.co.uk/blog/colin/2012/01/fastclick-for-wp7-improving-browser-responsiveness-for-phonegap-apps/

Однако, это не даст вам MouseMove события. Я знаю, что Nitobi (PhoneGap) дэвы хотят использовать эту технику, чтобы эмулировать событие касания:

https://issues.apache.org/jira/browse/CB-112

Однако я не уверен, что это действительно ли это возможно.

источник

2012-01-19 06:21:27 ColinE

Спасибо, что нашли время ответить. Впоследствии я нашел эту [ссылку] (http://www.zackgrossbart.com/hackito/touchslider/), которая больше всего подходит для того, что я хочу, она даже работает на WP7, но производительность на устройстве Android, которое я тестировал, была ужасно. –

Ах .. Если вы просто хотите горизонтальную прокрутку, WP7 IE9 поддерживает переполнение: прокрутка свойства CSS. Это то, что WebKit для iOS/Android не поддерживает. – ColinE

Проблемы с событиями vmouse WP7 JQueryMobile

ответ

Смежные вопросы