0

Refer to the screenshot below, I have created a div to wrap another two div of image and text, then I use CSS position: absolute to make these div merge together.

However, I found that the button is not sensitive while testing on mobile devices, sometime I need to touch the button few time to take effect.

So, is there something wrong for my code and what is the best practice to create a button with image and text?

Thanks

enter image description here

<div class="r">
    <div class="a">
        <div class="i"><img src="store_btn_on.png" /></div>
        <div class="t">Shatin</div>
    </div>
    <div class="b">
        <div class="i"><img src="store_btn_off.png" /></div>
        <div class="t">Causeway Bay</div>
    </div>
    <div class="c">
        <div class="i"><img src="store_btn_off.png" /></div>
        <div class="t">Kowloon Bay</div>                            
    </div>
</div>

Update for the part of javascript

addButtonListener($("#store > .r > .a"), function(event, target){
        $("#some_content").css("display", "none");
        $("#other_content").css("display", "block");
        $(".r > .b > .a > img").attr("src" , "store_btn_on.png");
        $(".r > .b > .b > img, .r > .b > .c > img").attr("src" , "store_btn_off.png");
});

function addButtonListener(targets, job){
    if ("ontouchstart" in document.documentElement){
        targets.each(function(){
            $(this)[0].addEventListener('touchstart', function(event){
                event.preventDefault();
                $(this).attr({ "x": event.targetTouches[0].clientX, "diffX": 0, "y": event.targetTouches[0].clientY, "diffY": 0 });
                $(this).addClass("on");
            }, false);
            $(this)[0].addEventListener('touchmove', function(event){
                $(this).attr({
                    "diffX": Math.abs(event.targetTouches[0].clientX - $(this).attr("x")),
                    "diffY": Math.abs(event.targetTouches[0].clientY - $(this).attr("y"))
                });
            }, false);
            $(this)[0].addEventListener("touchend", function(event){
                $(this).removeClass("on");
                if ($(this).attr("diffX") < 5 && $(this).attr("diffY") < 5){ $(job(event, $(this))); }
            }, false);
        });
    }
    else {
        targets.each(function(){
            $(this).mousedown(function(event){ event.preventDefault(); $(this).addClass("on"); });
            $(this).mouseup(function(event){ event.preventDefault(); if ($(this).hasClass("on")){ $(job(event, $(this))); } $(this).removeClass("on"); });
            $(this).hover(function(event){ $(this).removeClass("on"); });
        });
    }
}
4

1 に答える 1

3

モバイル デバイスでのボタンの感度についてはわかりませんが (クリック イベントを処理するためのコードは表示されていません)、HTML を次のように記述した方がよいと思います。

<div class="r">
    <div class="button on">
        <span>Shatin</span>
    </div>
    <div class="button">
        <span>Bay</span>
    </div>
    <div class="button">
        <span>Bay</span>                           
    </div>
</div>

次に、スタイルシートで CSS を使用します。

.button {
    background: url(http://domain.com/images/store_btn_off.png) no-repeat 0 0;
    /* Additional button styles */
}

.button.on {
    background: url(http://domain.com/images/store_btn_on.png) no-repeat 0 0;
}

.button span {
    color: #FFF;
    margin: auto;
}

これにより、on クラスを追加または削除するだけで、ボタンを動的にオンまたはオフにすることが簡単になります。

必須ではありませんが、CSS3 グラデーションを調べて、そのような単純なグラデーション背景画像を作成し、グラデーションをサポートしていないブラウザーで適切に画像に分解することにも興味があるかもしれません。

クラス名 "r" と "b" はあまり説明的ではありません。HTML/CSS ミニファイアーがそれらをそこに置き、開発コードに適切な名前を付けない限り、クラスにもっとわかりやすい名前を付けることも検討します。

于 2012-06-02T03:34:05.597 に答える