jQuery Mobile：显式覆盖所有角的舍入答案

【问题标题】：jQuery Mobile: explicitly override the rounding of all cornersjQuery Mobile：显式覆盖所有角的舍入
【发布时间】：2014-09-04 19:02:52
【问题描述】：

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

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

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

【问题讨论】：

您可以修改 JQM 源代码以将一个类替换为另一个类，或者您可以修改 JQM css 以使 ui-corner-all 以您想要的方式工作。但我认为您当前的解决方案应该没问题。为什么要关注一行代码？您是否看到页面加载时 JQM 已经做了多少工作？一点点代码应该不会造成那么大的麻烦。
是的，你是对的 - JQM 已经运行了如此多的代码，以至于一行代码在性能方面并不会真正产生影响。我真正的动机是试图保持 UI 的集中和“声明性”。但是有了这个解决方案，我的 UI 最终不仅在 CSS 和标记本身之间被分割，而且在一些奇怪的 JS 代码之间被分割。

标签： jquery jquery-mobile rounded-corners

【解决方案1】：

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

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

【讨论】：

你所做的只是复制并粘贴我上面写的相同代码；将其包装在 pageshow 处理程序中与我的问题无关。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

嘿，你可以这样做

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

【讨论】：