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 })注意“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选择器更加优化。把它当成一个想法。

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

3 个答案: