改变jQuery UI按钮的颜色

Question

有没有一种简单的方法可以更改jQuery UI按钮的颜色？ 修改css不被文档建议，即使这样做也很棘手。他们说：“我们建议使用ThemeRoller工具创建和下载易于构建和维护的自定义主题。”我知道如何更改主题，但是如何在同一页上获得不同颜色的按钮呢？

- at.

Answer 1

我刚刚完成了以下步骤：创建一个带有新颜色按钮的新主题；从新主题图像文件夹中复制硬性和软性渐变文件；将它们重命名，以免与主题混淆；最后将样式添加到按钮上。这适用于渐变和颜色...

我刚刚尝试了这个方法来创建一个绿色的按钮：

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

- Mark Redman

---

我按照这个思路做了一些事情，但是使用了 CSS 渐变背景。我应该更新问题并附上我的解决方案...不过现在我将把答案归功于你。 - at.

我之前也尝试过这些解决方案...个人而言，我更喜欢上面的答案而不是渐变。主要是因为渐变在各种浏览器中的支持并不一致。此外，你可以使用上述解决方案自定义相同的背景纹理，而使用渐变可能无法获得相同的纹理。缺点是你需要访问另一个图像元素 - 但如果你正在使用jqueryui，你已经访问了许多图像 - 再多一个不应该有太大的影响。 - user1517108

Answer 2

最简单的方法是为您的按钮添加一个类（用于不同的颜色），然后编写一些 CSS，覆盖 jQuery UI 的 CSS。

示例：

var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();

Css

.ui-button.redButton {
    background-color: red;
}
.ui-button.greenButton {
    background-color: green;
}

- joekarl

---

将 background-color 设置为红色实际上并不会改变按钮的颜色。 - at.

按钮背景是图像而不是简单的颜色，您需要更改background-image并可能添加!important来强制执行。 - mu is too short

您可以将background:red放置在代码中。jQuery使用background元素来设置图像，因此将其用于设置颜色将替换图像。 - ContextSwitch

Answer 3

请尝试以下操作：

HTML代码如下：

<button type="button" id="change_color"> change button </button>

jQuery:

$("#change_color").css("background","green");

- Praveen Kumar K R

Answer 4

有两种（三种？）JQueryUI按钮类型；基本上，您可以像这样创建一个按钮：

<span class="myButtons">Click here</span>

然后你告诉JQueryUI它是一个按钮：

$('span.myButtons').button()

因此生成以下标记：

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>

你可以用“经典”的方式来设置样式：（.myButtons {}、.myButtons:hover {}等）

但是！

如果你的“按钮”是checkboxradio或controlgroup之一，那么它是另外的标记：

<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label class"danger" for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>

然后，如果您应用该方法：

$( "input" ).checkboxradio();

您将获得此生成的标记（第二个伪按钮，“巴黎”已被选中/点击）：

<fieldset>
      <legend>Select a Location: </legend>
      <label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label>
      <input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
      <label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label>
      <input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
      <label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label>
      <input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
</fieldset>

然后那些类可以（必须？）用于样式化伪“按钮”：

.ui-visual-focus {
  box-shadow: none;
}

label.ui-checkboxradio.ui-state-default {
  color: black;
  background-color: teal;
}

label.ui-checkboxradio.danger.ui-state-active {
  background-color: red;
}

- yPhil