Несовместимость Jquery Mobile и Swipe JS приводит к тому, что список выбора не работает на Android - PullRequest
Новая
       7

Несовместимость Jquery Mobile и Swipe JS приводит к тому, что список выбора не работает на Android

2 голосов
/ 21 февраля 2012

Я использую jquery mobile 1.0 в сочетании с swipejs. Библиотека swipejs используется для обеспечения возможности жеста мобильного сканирования на карусели изображений. Тем не менее, я столкнулся с проблемой на Android 2.2.3 (Motorola Droid) и других устройствах Android, где списки выбора (на той же странице, что и swipejs) просто не работают. Списки выбора появляются, но меню родных опций не появляется, щелкнув по ним, просто ничего не происходит. Я смог сузить его не только до swipejs, но и до определенной линии внутри swipejs. 

style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';

Похоже, что поведение transalate3d css каким-то образом мешает мобильным спискам выбора jquery. Я обнаружил многочисленные сообщения о хрупкости списков выбора мобильных приложений jquery на Android (https://github.com/jquery/jquery-mobile/issues/1051). И удалось создать довольно простой образец страницы, демонстрирующий это поведение. Мое исправление состояло в том, чтобы изменить translate3d для перевода в самой библиотеке swipejs. Но мне интересно, может ли кто-то с лучшим пониманием того, что делает translate3d и как это может повлиять на jquery mobile, может предложить лучшее решение или это ошибка с jqm или swipejs? 

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
    <link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
    <link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });

    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page" id="main">
        <header data-role="header">
        </header>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="select-choice-1">
                    Shipping method:</label>
                <select name="select-choice-0" id="select-choice-1" data-theme="a">
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select>
            </div>
            <div id="divProductImagesCarousel">
                <ul>
                    <li><a href="image_0.jpg">
                        <img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_1.jpg">
                        <img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_2.jpg">
                        <img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_3.jpg">
                        <img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_4.jpg">
                        <img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_5.jpg">
                        <img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_6.jpg">
                        <img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_7.jpg">
                        <img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_8.jpg">
                        <img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_9.jpg">
                        <img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var productImagesCarousel = document.getElementById('divProductImagesCarousel');
            window.mySwipe = new Swipe(productImagesCarousel);          
        });

    </script>
</body>
</html>

Ответы [ 3 ]

9 голосов
/ 25 апреля 2012

Да, у jQueryMobile есть своя функция прокрутки

НО !.swipeJS это так мило!И вы все еще можете использовать его!

Это заняло у меня много исследований, но я нашел решение, которое работает для меня.

По сути, просто поместите весь материал swipejs в $ (document) .ready (function () {

Вот так: 

<script type="text/javascript">

// outside ready function so that buttons still have a var to attach function calls to like slider.next()
var slider;

// process AFTER jquery mobile. 
// i "think" the problem that somehow jquery mobile stops swipejs from detecting the width of the div (in the setup function) 
$(document).ready(function(){

    slider = new Swipe(document.getElementById('myslider'), {
        callback: function(e, pos) {  
             // some callback code here
        }
    });

});
</script>

Я так не думаюконфликт в JS - возможно. Это заставляет обрабатывать swipejs в конце, и, вероятно, после того, как какая-то особенность jquerymobile его испортила.

Я довольно новичок в JS, поэтому я не знаючем эта функция отличается от других функций типа «делай это последнее». Это может вызвать другие неприятные конфликты, я полагаю. Если кто-то захочет прокомментировать с лучшей функцией (и почему), это тоже будет здорово.

4 голосов
/ 21 февраля 2012

При использовании jQuery Mobile библиотека библиотек не требуется. Вы можете зарегистрировать обработчики событий для событий swipeleft и swiperight: 

$(document).delegate('#divProductImagesCarousel', 'swipeleft swiperight', function (event) {
    alert('You just ' + event.type + 'ed!');
});
0 голосов
/ 24 апреля 2013

Лучше использовать jquerymobile методом "pageshow", а не pageinit или чем-то другим. Пример кода ниже: 

$(document).live('pageshow', function(){
  //put the swipejs code here.
}
...