jQuery Mobile：如何自定义按钮答案

【问题标题】：jQuery Mobile: How to customize buttonjQuery Mobile：如何自定义按钮
【发布时间】：2011-09-22 17:02:47
【问题描述】：

如何将<a data-role="button"> 按钮的背景更改为我的图像？另外，如何在左侧按钮的顶部添加自定义图标？

【问题讨论】：

【解决方案1】：

给链接一个类并使用 CSS 来改变背景图片。

<a data-role="button" class="my-button">

...

.my-button {
    background-image: url('images/my-button.png') !important;
}

【讨论】：

@Petey - !important 基本上意味着“不要覆盖这种风格”。确实，使用它不是一个好习惯。见stackoverflow.com/questions/7369216/…

【解决方案2】：

我会说自定义 jQuery Mobile 按钮的推荐方法是添加自定义主题。

<a data-role="button" data-theme="my-site">Button</a>

这将使您能够更好地控制按钮的不同元素和状态。例如，您可以通过编写与您的自定义主题名称相关联的类的代码（它们会自动添加到按钮）来定位 CSS 中按钮的不同状态：

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

请记住，默认按钮是由边框、阴影，当然还有背景渐变组成的。按钮内还有由框架自动生成的其他 HTML 元素。根据您想要自定义的具体内容，您可能需要针对按钮中的其他类（ui-icon、ui-btn-text、ui-btn-inner 等）。

这里有一个教程，它解释了如何对 jQuery Mobile 按钮进行高级定制。这些文章展示了如何进行一些基本的自定义，如何重置 jQuery Mobile 主题，以及如何将默认按钮变成你想要的任何东西：

【讨论】：