jQuery Mobile：显式覆盖所有角的圆角

Question

jQuery Mobile 通过添加类 ui-corner-all 自动圆化输入元素的所有角。我注意到，如果我在 Chrome 检查器中手动将此类更改为 ui-corner-left，那么我会正确地在左侧（顶部和底部）仅获得圆角。当然，这可以通过一行 jQuery 轻松完成，例如

$('#myid').removeClass('ui-corner-all').addClass('ui-corner-left');

我的问题是，有没有一种方法可以指示 jQuery Mobile 立即应用此类，而无需在 JQM 完成工作后执行这段额外的代码？

Answer 1

基本上可以应用以下内容，但您关心的是在没有额外代码执行的情况下运行，让我们看看我们是否有机会得到它，即使我正在寻找同样的问题，但以下是我的解决方案。

$('div').live('pageshow',function(event){
     $('#myid').removeClass('ui-corner-all').addClass('ui-corner-left');
});

Answer 2

您可以通过在 index.html 文件中指定所需的 jquery mobile 类来覆盖默认值。一个很好的例子是，而不是：

<ul id='myid' data-inset='true' data-theme='a' data-role='listview'  class='ui-listview ui-listview-inset ui-shadow'>

它会自动插入这个

class ui-corner-all

，然后添加你自己的类：

<ul id='myid' data-inset='true' data-theme='a' data-role='listview'  class='ui-listview ui-corner-left ui-listview-inset ui-shadow'>

在firefox中，ui-corner-all类不会自动为我添加，也许你正在使用旧版本的jquery mobile并且需要升级。
如果您想在 javascript 文件中动态执行此操作：

$("#my_page_id").live("pagecreate",function(){
    var ul = $("<ul id='myid' data-inset='true' data-theme='a' data-role='listview'  class='ui-listview ui-listview-inset ui-corner-left ui-shadow'>");
    ul.append($('<li class="ui-li ui-li-static  ui-body-a ui-corner-left">').append("Code Slayer!!!"));
    $('mydiv_in_mypage').html(ul);   

});

就像重新重写 div 的内容一样，自动删除旧内容。如果您要在列表中显示大量信息，您可能需要使用

$.mobile.showPageLoadingMsg('a','Page Loading', true);

，然后在页面完全显示后隐藏该消息。

Answer 3

嘿，你可以这样做

  <a  href="#panel"  data-corners="false"></a>