jQuery Mobile:如何自定义按钮

时间:2011-09-22 17:02:48

标签: jquery-mobile

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

2 个答案:

答案 0 :(得分:10)

为链接指定一个类,并使用CSS更改背景图像。

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

...

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

答案 1 :(得分:10)

我想说,自定义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主题,以及如何将默认按钮转换为您想要的任何内容:

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/