Question

Is it possible to overwrite the jquery mobile form button settings?

I want to use an image as my button active / selected states – but I’m struggling to disable the code & styling thats automatically added..

Is it possible to disable the styling?

Does anyone have any suggestions?

Cheers

Paul

Answer 1

Hmm I think you’re asking how to use a custom icon in a button, try looking over this documentation:

• http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html

Using 3rd party icon sets
You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab that has large
icons stacked on top of text labels. All that is required is a bit of
custom styles to link to the icons and position them in the navbar.
Here is an example using Glyphish icons and custom styles (view page
source for styles) in our navbar:

If you need to disable the button look here:

• http://jquerymobile.com/demos/1.0/docs/buttons/buttons-methods.html

disable disable a form button

$('[type='submit']').button('disable'); 

If you need to theme the button look here:

• http://jquerymobile.com/demos/1.0/docs/buttons/buttons-themes.html
• http://jquerymobile.com/themeroller

UPDATE:

Live Example:

• http://jsfiddle.net/JZJny/

JS

$('.imageClick').click(function() {
    alert('I have been clicked'); 
});

HTML

<div data-role="page" id="home">  
    <div class="content">
        <img class="imageClick" src="http://condo69.com/yahoo_site_admin/assets/images/clickhere.363151626_std.jpg" alt="click" height="42" width="42" />
    </div>
</div>