Removing round corners from the button in jquery m

Question

I have following button markup in a single/multiple page jquerymobile page template.

<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" >About Us</a>

I need to disable the round corners of this button using the button option as given in the jquerymobile docs.

I have tried $('a').buttonMarkup({ corners: "false" }) in every events such as pagebeforecreate, pageinit, pagecreate and mobileinit

I never got it working and have been struggling with it to make it for quite a long time. I dont want to use data attribute data-corners="false" for now.

Please suggest any ideas

Answer 1

This should work: $('a').buttonMarkup({ corners: false }) note "false" should not be a string.

Anyway, if you want to make that the default behaviour, you could try something like:

$(document).bind('mobileinit', function(){
    $.fn.buttonMarkup.defaults.corners=false;
});

that should work the same as having data-corners="false" on every button.

Answer 2

$(function(){
    $('body *').removeClass('ui-btn-corner-all');
});

Make jquery selector more optimized. Take it as just an idea.

Answer 3

You can override the JqueryMobile css in your css

Normal jqm

.ui-btn-corner-all {
    -moz-border-radius:                 1em /*{global-radii-buttons}*/;
    -webkit-border-radius:              1em /*{global-radii-buttons}*/;
    border-radius:                      13px /*{global-radii-buttons}*/;
}

In your css just add

.ui-btn-corner-all{-moz-border-radius:0;-webkit-border-radius: 0;border-radius: 0;}