jquery移动按钮背景颜色

Question

这是我的jquery移动按钮的代码

<a href="#" data-role="button" style="color:green; background-color:red";>
  Search
</a>  

我想更改按钮背景颜色,我尝试了内联样式,但它不工作,但文本颜色正常更改.

谢谢

Answer 1

只需使用"background:"代替"background-color:"

<a href="[url]" data-role="button" style="background: green; color: white;">Search</a>

测试它,它就像一个魅力.

Answer 2

jQuery Mobile初始化小部件并在您创建按钮链接时添加HTML结构.您可以使用此结构来定位按钮小部件及其后代元素,以更改我们要更改的样式:

HTML -

<a class="my-btn" data-role="button" href="#">
    Search
</a>

CSS -

.ui-page .ui-content .ui-btn.my-btn .ui-btn-inner {
    color      : green;
    background : red;
}?

这会将.ui-btn-inner元素作为元素的后代a.ui-btn(您将原始链接添加my-btn到我的类中),该元素位于jQuery Mobile伪页面中并设置它background和文本color.

这是一个演示:http://jsfiddle.net/WZ9pf/

文本颜色之前适用于您,因为它由后代元素继承,因此如果您color在body元素上设置文本,例如,color如果您未在树下指定另一个元素,则所有元素都将接收该文本.

因此,您可以看到jQuery Mobile对链接转换为按钮的作用,以下是HTML转换为:

<a href="#" data-role="button" class="my-btn ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-c ui-btn-up-c" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">
            Search
        </span>
    </span>
</a>

此外,如果您想轻松创建渐变,这里有一个很棒的工具:http://www.colorzilla.com/gradient-editor/

这是我从预制渐变中拉出来的红色:http://jsfiddle.net/WZ9pf/1/

Answer 3

JQuery 移动样式都是使用主题应用的。将链接添加到容器时，会自动为其分配一个与其父栏或内容框相匹配的主题样本字母，以将按钮直观地集成到父容器中，就像变色龙一样。

因此，放置在主题为“a”（默认主题中为黑色）的内容容器内的按钮将自动分配为“a”按钮主题（默认主题中为木炭）。

您可以在此处查看现有主题。 http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html

如果您想创建自己的主题滚轴，可以使用主题滚轴： http://jquerymobile.com/themeroller/

来源：http ://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html