1

リンクのタップを使用すると、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>

問題は、リンクをタップすると背景が期待どおりに変更されるのですが、リンクが機能せず、指を離しても新しい背景が削除されないことです ^^

誰かが私が間違っていることを指摘できますか:/?

4

2 に答える 2

0

「アクティブ」クラスは、クリックまたはタップされた場合に自動的にアンカーに追加される必要があるため、「アクティブ」クラスを自分で追加および削除する必要はありません。

アンカー要素に割り当てられた通常の背景画像と、a:active のアクティブな背景画像が必要です。

a {
  background-image: ...
}

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

うまくいけば、これであなたの質問が解決します。

于 2010-08-09T10:42:51.330 に答える
0

ウィリアムに感謝します。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ミリ秒のタイムアウト後にのみ「アクティブ」に切り替わるため、ページをスワイプするだけの場合は、タップごとにアクティブになりません。
  • 「アクティブ」に切り替えると、要素のすべての子 (*) も「アクティブ」に設定されます
  • タップを終了するとき
    • 「アクティブ」の場合、「アクティブ」クラスは削除され、
    • 高速タップの場合 (「アクティブ」が設定される前に「タッチエンド」が発生した場合)、「アクティブ」に切り替えて、100 ミリ秒の遅延後に削除します。
  • 録画中に移動すると、「アクティブな」クラスが削除されます

これが私が直面している最後の問題です:/

何らかの理由で、タップすると、要素がアクティブに設定されるのとまったく同じ時間に移動を開始し (100 ミリ秒の遅延の後)、アクティブなクラスを削除するのではなく、「タッチエンド」が発生するまでアクティブのままになります。 、誰かが理由を理解していますか？

jQtouchプレビューページでこれをテストしましたが、再現できませんでしたが、自分のページでjQtouchを使用すると、同じ問題が発生します:/

于 2010-08-18T11:06:07.153 に答える