jQtouch тап и проблема со связью - PullRequest
Новая
       6

jQtouch тап и проблема со связью

1 голос
/ 07 августа 2010

У меня проблема с jQtouch при использовании нажатия на ссылки,

Я пытаюсь получить ссылку для изменения цвета фона при касании в магазине приложений iphone (синий цвет)

поэтому я использую этот код: 

<script>
    var jQT = new $.jQTouch({
        statusBar: 'black',
        useFastTouch: true
    });
    $(function(){
        $("a").live('tap', function() {
            $(this).addClass("active");
        },function() {
            $(this).removeClass("active");
        });
    });
</script>

стиль ".active" содержит синий фон: 

.active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#048bf4), to(#015de6));
}

и ссылки такие: 

<a id="a" href="http://google.com"><img src="someimage.png"><div>Google</div></a>

Проблема в том, что когда я нажимаю на ссылку, фон меняется, как и ожидалось, но ссылка не работает, а новый фон не удаляется при удалении пальца ^^

Может ли кто-нибудь указать, что я делаю неправильно: /?

Ответы [ 2 ]

0 голосов
/ 18 августа 2010

Спасибо, Уильям, Я удалил jQtouch и добавил код для функции крана только с jQuery, 

$(document).ready(function() {
    var delay = 100;
    var hovertime = null;
    var hoverdelay = null;
    $("#list a").bind('touchstart mouseover', function(){
        clearTimeout(hoverdelay);
        hovertime = new Date().getTime();
        var $el = $(this).add("*", this);
        hoverdelay = setTimeout(function(){
            $el.addClass("active");
        }, delay);
    });
    $("#list a").bind('touchend mouseup', function() {
        clearTimeout(hoverdelay);
        var now = new Date().getTime();
        var $el = $(this).add("*", this);
        if(now < hovertime + delay) {
            $el.addClass("active");
            setTimeout(function(){
                $el.removeClass("active");
            }, delay);
        } else {
            $el.removeClass("active");
        }
    });
    $("#list a").bind('touchmove touchcancel mouseout', function() {
        clearTimeout(hoverdelay);
        var $el = $(this).add("*", this);
        $el.removeClass("active");
    });
});

Я положил образец здесь: http://fun.r4dius.net/temp/iphone.html

это работает в основном так:

  • при нажатии он переключается на «активный» только после 100 мс тайм-аута, так что если вы просто хотите пролистать страницу, она не будет активироваться при каждом нажатии,
  • при переключении на «активный» все дочерние элементы (*) элемента также устанавливаются на «активный»
  • при окончании крана
    • если он «активный», «активный» класс удаляется,
    • если это быстрое нажатие (когда «touchend» происходит до того, как было установлено «active»), мы все равно переключаемся на «active» и удаляем его после задержки в 100 мс, просто чтобы показать, что оно было записано
  • если мы перемещаемся во время записи, «активный» класс удаляется

Вот последняя проблема, с которой я столкнулся: /

По какой-то причине, если я коснусь, то я начну двигаться в то же самое время, когда элемент установлен в активное состояние (после задержки 100 мс), он остается активным до тех пор, пока не произойдет «касание», вместо удаления активного класса. как следует, кто-то понимает почему?

Я протестировал это на странице предварительного просмотра jQtouch и не смог воспроизвести его, но если я использую jQtouch на своей странице, проблема возникает так же: /

0 голосов
/ 09 августа 2010

«Активный» класс должен автоматически добавляться в привязку, если на него нажимают или касаются, поэтому вам не нужно добавлять и удалять «активный» класс самостоятельно.

У вас должно быть нормальное фоновое изображение, назначенное для элементов привязки, и активное фоновое изображение для: active: 

a {
  background-image: ...
}

a:active {
  background-image: ...
}

Надеюсь, это решит ваш вопрос.

...