CODEWITHSUNDEEP
jquery-mobile
Dancer
Dancer

Reputation: 17671

Jquery Mobile - Disable Form Button styling

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

Upvotes: 1

Views: 3188

Answers (2)

gkond
gkond

Reputation: 4294

To disable automatic styling you can change default selector using CSS3 :not(), for example, or just change it to something else:

<script>
$(document).on("mobileinit", function(){
    $.mobile.button.prototype.options.initSelector = ".onlyMyButtons";
    // default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"
});
</script>

via http://jquerymobile.com/demos/1.0/docs/buttons/buttons-options.html

Upvotes: 2

Phill Pafford
Phill Pafford

Reputation: 85358

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

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:

disable disable a form button

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

If you need to theme the button look here:

UPDATE:

Live Example:

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>

Upvotes: 2

Related Questions