移动网站中带有图片和文字的按钮的最佳做法

Question

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

<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"); });
        });
    }
}

Answer 1

I am not sure about the sensitivity of your button on mobile devices (you haven't shown any of your code for handling click events), but I think it is better to write your HTML like this:

<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>

Then use CSS in your stylesheet:

.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;
}

This makes it easy to dynamically turn a button on or off just by adding or removing the on class.

Although not necessary, you may also be interested in looking at CSS3 gradients to create simple gradient background images like that, and then degrade nicely to an image in browsers without any gradient support.

The class names "r" and "b" are not very descriptive. Unless some HTML/CSS minifier put those there and you have proper names in your development code, I would consider giving your classes more descriptive names as well.