这是我的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;
}