但是！

Question

有没有一种简单的方法来改变jQuery UI Button的颜色？不鼓励修改css文档，这样做无论如何都很棘手。他们说，“我们建议使用ThemeRoller工具来创建和下载易于构建和维护的自定义主题。”我理解如何更改主题，但是如何在同一页面上获得不同的彩色按钮？

Answer 1

我刚刚这样做：使用新的颜色按钮创建一个新主题;从新主题图片文件夹中复制..hard ..和..soft ...渐变文件;重命名它们，以免混淆主题;最后将样式添加到按钮。这适合渐变和颜色...

我刚试了一个绿色按钮：

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;
}

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;
}

Answer 3

试试这个：

<强> HTML：

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

<强> jQuery的：

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

Answer 4

有两种（三种？）类型的JQueryUI按钮;基本上你这样做button：

<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>

你可以将这款经典款式设为＆＃34;经典＆＃34;方式：（.myButtons {}，.myButtons:hover {}等。）

但是！

如果你的＆＃34;按钮＆＃34;是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();

你得到这个生成的标记（第二个伪按钮，＆＃34;巴黎＆＃34;被选中/点击）：

<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>

然后those classes可以（必须？）用于设置伪＆＃34;按钮的样式＆＃34;：

.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;
}

改变jQuery UI按钮的颜色

4 个答案:

但是！