jQuery Mobile有选择地覆盖按钮上的ui-btn-inner类吗？

问题描述：

因此它在这里详细了解如何通过重写页面上的类来删除的按钮填充：Can the button padding be adjusted in Jquery Mobile?jQuery Mobile有选择地覆盖按钮上的ui-btn-inner类吗？

但是我怎么借此：

.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的网格内的特定按钮删除类： '$（ 'UI栅-b '）。每个（函数（）{ \t \t \t \t \t \t \t $（本）.find（' 跨度'）。每个（函数（）{ \t \t \t \t \t \t \t \t $（this）.removeClass（'ui-btn-inner'）; \t \t \t \t \t \t \t}） \t \t \t \t \t \t}）;' – cvocvo

在测试 - 似乎结合到页面加载事件时上述评论特技不起作用100％甚至。仍在寻找一个真正的解决方案。 – cvocvo

答

我想我终于找到了解决方案（一直在努力，现在弄明白了一段时间）！

使用CSS的'cascading'部分来帮助你。如果您的按钮使用主题'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完全匹配它。

答

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

HTML：

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

CSS：

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

答

我只是想有没有边界或背景来显示，所以我用你的榜样的图标，但图标被转移了，所以我用这个要重新定位：

.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>

jQuery Mobile有选择地覆盖按钮上的ui-btn-inner类吗？

相关推荐