jQuery移动按钮背景色



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

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

我想更改按钮背景颜色,我已经尝试过内联样式,但它不起作用,但是文本颜色正常变化。

谢谢

只需使用"background:"而不是"background-color:">

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

测试了它,它就像一个魅力。

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/

文本

颜色以前对您有用,因为它被后代元素继承,因此,例如,如果您在body元素上设置文本color,则如果您不进一步指定树下的另一个文本,则所有元素都将收到该文本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/

下面是一个示例"红色"按钮。

只需将 data-theme="f" 添加到您的按钮标签中,然后这可能是一种推荐的方法,您可以在其中创建自己的主题按钮

.ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f {
  color: white;
  font-weight: bold;
  text-decoration: none; }
.ui-btn-up-f {
  border: 1px solid #711414;
  background: #ab2525;
  text-shadow: 0 -1px 1px #711414;
  background-image: -moz-linear-gradient(top, #c44f4f, #ab2525);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c45e5e), color-stop(1, #9e3939));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#c44f4f', EndColorStr='#ab2525')"; }
.ui-btn-hover-f {
  border: 1px solid #6e0000;
  background: #b54a4a;
  text-shadow: 0 -1px 1px #690101;
  background-image: -moz-linear-gradient(top, #d47272, #b54a4a);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d47272), color-stop(1, #b54a4a));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d47272', EndColorStr='#b54a4a')"; }
.ui-btn-down-f {
  border: 1px solid #782323;
  background: #c44f4f;
  text-shadow: 0 -1px 1px #782323;
  background-image: -moz-linear-gradient(top, #9e3939, #c44f4f);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9e3939), color-stop(1, #c44f4f));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9e3939', EndColorStr='#c44f4f')"; }

来自 https://gist.github.com/1057852 的代码参考

> 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

如果按钮定义为:

<button type="button" id="yourbutton">Hello</button>

那么设置背景的代码是:

$('#yourbutton').parent().find('.ui-btn-inner').css("background-color",highcolor);

您不仅要覆盖背景颜色,还要覆盖背景图像渐变为您想要的颜色,它非常适合我

.ui-btn {
    background: #00BCD4;
    background-image: -moz-linear-gradient(top, #00BCD4, #00BCD4);
    background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #00BCD4), color-         stop(1, #00BCD4));
   color:#FFFFFF;
   text-shadow:0px 0px 0px ;
   font-size: 40px;
   border: none;

}

<button class="my-btn">submit</button>

.css

.my-btn {
   background:#ea5514 !important;
   color:#ffffff !important;
}​

最新更新