jqueryui themeroller

Question

Я изучаю значки каркаса в пользовательском интерфейсе jQuery.

<span class="ui-icon ui-icon-circle-minus"></span>

создает значок со знаком минус внутри круга.
С помощью ThemeRoller Firefox Bookmarklet я смог изменить цвет значка на красный (чтобы он выглядел как кнопка удаления).

В: Как сделать так, чтобы один значок jQueryUI был красным, а другой - другим?

<span class="ui-icon ui-icon-circle-plus"></span>

Я бы хотел сделать это зеленым.

Answer 1

Используйте классы ui-state-..., чтобы изменить состояние элемента с помощью значка. Вам нужно будет разработать свою тему так, чтобы элементы в разных состояниях (выделение, наведение, активный, ошибка, по умолчанию) имели разные цвета.

<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>

Я бы рекомендовал не использовать состояния таким образом (то есть просто менять цвета). Я бы использовал состояния семантически и позволил бы значкам отображаться по мере необходимости, чтобы соответствовать состоянию. Если бы мне особенно нужны были красные / зеленые значки, я бы генерировал эти значки специально как изображения и просто использовал их напрямую, вместо того, чтобы пытаться разработать тему, чтобы получить разные цветовые варианты только для этих значков.

Что бы это ни стоило, я думаю, что FamFamFam Silk иконки очень хорошо интегрируются с пользовательским интерфейсом jQuery.

Answer 2

Вы не можете сделать это, по крайней мере, в контексте ThemeRoller. Для этого Themeroller использует одно изображение спрайта ... большое изображение, содержащее все значки.

Вы можете создать другую тему, такую ​​же, как изображение spritemap, в папке с изображениями, перейти в свой jQuery UI CSS и изменить свойство .ui-icon-circle-plus background-image.

Это должно выглядеть так:

.ui-icon-circle-plus { background-position: 0 -192px; }

Это должно выглядеть примерно так:

.ui-icon-circle-plus {
   background-image: url(RedIcons.png);
   background-position: 0 -192px; 
}

Вы можете посмотреть стили .ui-icon для изображения, которое он использует в данный момент.