jquery - 从jquery mobile中的按钮中删除圆角

Question

我在单/多页 jquerymobile 页面模板中有以下按钮标记。

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

我需要使用 jquerymobile 文档中给出的按钮选项禁用此按钮的圆角。

我已经尝试$('a').buttonMarkup({ corners: "false" })过每个事件，例如 pagebeforecreate、pageinit、pagecreate 和 mobileinit

我从来没有让它工作，并且一直在努力让它工作很长时间。我现在不想使用数据属性 data-corners="false" 。

请提出任何想法

Answer 1

这应该工作：$('a').buttonMarkup({ corners: false })注意“假”不应该是一个字符串。

无论如何，如果您想将其设为默认行为，您可以尝试以下操作：

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

data-corners="false"这应该与每个按钮上的相同。

Answer 2

您可以在您的 css 中覆盖 JqueryMobile css

正常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}*/;
}

在你的 CSS 中添加

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

Answer 3

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

使 jquery 选择器更加优化。把它当作一个想法。