jQuery Mobile 选择性地覆盖按钮上的 ui-btn-inner 类？答案

【问题标题】：jQuery Mobile selectively override the ui-btn-inner class on buttons?jQuery Mobile 选择性地覆盖按钮上的 ui-btn-inner 类？
【发布时间】：2013-10-08 23:06:20
【问题描述】：

所以这里详细介绍了如何通过覆盖页面上的类来删除按钮上的填充：Can the button padding be adjusted in Jquery Mobile?

但我该怎么做：

.ui-btn-inner {
padding: 0;}

并有选择地将其应用于一个按钮，即：

<button data-icon="false" onclick="alert('clicked me')">Button Name</button>

这样做是行不通的：

<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>

想法？创意解决方案？

谢谢

【问题讨论】：

我还没有关于如何选择性地应用 css 类覆盖的答案，但我所拥有的是这种解决方法，可以从我所在的 ui-grid 内的特定按钮中删除类使用：$('.ui-grid-b').each(function() { $(this).find('span').each(function(){ $(this).removeClass('ui-btn-inner'); }) });
在测试中——即使绑定到 pageLoad 事件，上面评论的技巧似乎也不能 100% 起作用。仍在寻找真正的解决方案。

标签： css jquery-mobile

【解决方案1】：

只需为该按钮设置一个新类，然后如下更改子类。

HTML：

<a href"#" data-role="button" class="myClass">Text</a>

CSS：

.myClass .ui-btn-inner{
    padding: 0px;
}

【讨论】：

【解决方案2】：

我想我终于找到了解决方案（现在一直在尝试解决）！

使用 CSS 的“级联”部分来帮助您。例如，如果您的按钮使用主题“a”，则可以将 .ui-btn-inner 的填充规则仅应用于主题为“a”的按钮。只需在您要更改的类前面加上主题属性即可。

HTML:
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>

CSS:
.ui-btn-up-a .ui-btn-inner, .ui-btn-hover-a .ui-btn-inner, .ui-btn-down-a .ui-btn-inner { padding: 0px; }

如您所见，这意味着您必须为按钮的每个状态创建规则，否则当您触摸按钮时，填充将在瞬间返回。

只需将不同的主题（例如“b”）应用于应保留其填充的按钮。使用这种类型的 CSS 继承，您完全可以使用按钮。

您可以拥有无限数量的主题。我去主题滚轮并为字母表中的每个字母创建一个默认主题。然后，只需用 CSS 覆盖它们即可。

当我尝试将 jQuery Mobile 用于工作项目时，这是一个很大的症结所在。他们已经有了 UI 设计，我的任务是让 jQuery Mobile 完全匹配它。

【讨论】：

【解决方案3】：

我只是想让图标显示没有边框或背景，所以我使用了你的示例，但是图标被向上移动了，所以我用它来重新定位它：

.ui-btn-up-mytheme .ui-btn-inner, 
.ui-btn-hover-mytheme .ui-btn-inner, 
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}

html 标记：

<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
 data-theme="mytheme" data-shadow="false"  ></a>

【讨论】：