Removing round corners from the button in jquery mobile

问题

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

回答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.

回答2:

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

回答3:

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

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

来源：https://stackoverflow.com/questions/10886014/removing-round-corners-from-the-button-in-jquery-mobile

标签

jquery

jquery-mobile