开发者

No reaction from my HTML buttons in phonegap

I have three HTML buttons and when I click on them there is no outer glow and they don't do anything.

I have also tryed to style them but they stay with the default design. I have just used ordinary code I just don't have a clue what's wrong with them

<input type="button" val开发者_Python百科ue="Proceed">
<input type="button" value="Cancel">


Don't use , instead use with CSS to create your buttons so they react to touch. It'll require some javascript as even most mobile browsers don't properly map touch events to the CSS :active pseudoclass.

Your "button":

<a class="button" id="yourButton">Button</a>

Some very basic CSS to toggle the background and text color on touch:

a.button {
    color:#fff;
    border:0px;
    padding:5px;
    background:#000;
}

a.button-active {
    background:#fff;
    color:#000;
}

And here's the javascript you would call in your onload on deviceready handler. I'm using xuijs here (xuijs.com), but you can use jQuery or any other javascript to add and remove classes:

x$('.button').on('touchstart', function(e) { 
    x$(e.currentTarget).addClass('button-active'); 
} );
x$('.button').on('touchend', function(e) { 
    x$(e.currentTarget).removeClass('button-active'); 
} );

This is a very basic example. Once you have this all setup, you can make any changes you want to the CSS to determine how the button will look when it is active and inactive.


Hmmm.. Your question is not that clear. But if you only want a glow in your buttons, you can take a look at how Formalize does it.

Here's a page showing the button glow effect (when pressed).

Update: Oooops, sorry, missed the "PhoneGap" part. The solution I gave above is only for normal html forms, I don't have experience with using phonegap yet. cheers. :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜