Изменение цвета кнопок jQuery UI - PullRequest
Новая
       36

Изменение цвета кнопок jQuery UI

30 голосов
/ 08 декабря 2010

Есть ли простой способ изменить цвет кнопки пользовательского интерфейса jQuery?Модификация CSS не рекомендуется из документации, и делать это в любом случае сложно.Они говорят: «Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки пользовательских тем, которые легко создавать и поддерживать».Я понимаю, как сменить тему, но тогда как вы получаете разноцветные кнопки на одной странице?

Ответы [ 4 ]

17 голосов
/ 15 февраля 2011

Я только что сделал это: создайте новую тему с новой цветной кнопкой; скопируйте файлы градиента ..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;
}
8 голосов
/ 09 декабря 2010

Простейшим способом было бы добавить класс к вашим кнопкам (для разных цветов), а затем создать некоторый 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;
}
3 голосов
/ 02 сентября 2014

Попробуйте:

HTML: 

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

JQuery: 

$("#change_color").css("background","green");
0 голосов
/ 27 февраля 2018

Существует два (три?) Типа кнопок 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 или контрольная группа , тогда это другая разметка: 

<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();

Вы получаете эту сгенерированную разметку (2-я псевдокнопка , "Париж" проверен / нажат): 

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