Как использовать иконки пользовательского интерфейса jQuery без кнопок?

jQuery UI поставляется с некоторыми хорошими значками. Как я могу использовать их без кнопок? Скажите, как создать ссылку со знаком "плюс" и реагировать на зависание и щелчок, меняя значки? Здесь - это демонстрация только с добавленным значком.

Обновление 1: На значке наведения следует изменить цвет от серого до черного (см. здесь). В моей демонстрации это черное с самого начала.

Обновление 2: Здесь почти что мне нужно - http://jsfiddle.net/and7ey/gZQzt/6/ - но без этого фона прямоугольник, мне нужно только знак плюс.

Обновление 3: Похоже, было бы лучше не использовать стандартные стили пользовательского интерфейса jQuery, а ссылаться непосредственно на images, но я не знаю, как это использовать.

Кажется, мне нужно определить CSS как:

width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;

Позиции можно легко найти в файле jquery.ui.theme.css. Но как я должен:

  • определить правильный URL-адрес фонового изображения?
  • изменить CSS, чтобы реагировать на щелчок, зависать?

Ответы

Ответ 1

Наконец, я решил использовать файлы изображений jQuery UI - Как использовать один значок из разных файлов изображений?:

a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}

Ответ 2

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

<a href="#" class="ui-icon ui-icon-plusthick"></a>

Если вы хотите добавить текст в ссылку, а также значок, вам нужно будет установить значок на отдельный элемент из текста. Например:

<a href="#"><span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span></a>

Чтобы изменить значок при наведении, вам нужно будет использовать javascript. Для этого требуется jQuery:

$(".MySelector").hover(function() { 
    $(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() { 
    $(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});

Ответ 3

Это не "хорошо", но, по крайней мере, это работает. Пожалуйста, уточните свой вопрос, что должно произойти при нажатии и зависании.

Пример

http://jsfiddle.net/gZQzt/2/

HTML

<a href="#" class="img-link">
    <span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
    <span class="link-text">Link</span>
</a>

CSS

.img-link {
    text-decoration: none;
}

.link-text {
    text-decoration: underline;
}

Ответ 4

Попробуйте следующее:

<a>
  <span class="ui-icon ui-icon-plusthick"></span>
</a>

и

$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});

Вы можете увидеть это здесь: http://jsfiddle.net/gZQzt/4/

Ответ 5

Так как я не могу ответить на все ответы, вот что я сделал с использованием кода Кайла Траубермана:

<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>

В принципе, вы должны поместить состояние в отдельный div. Это изменяет изображение на нужный цвет, но также добавляет границу и блеск, поэтому мне пришлось отключить это с помощью nones. Вам может понадобиться цвет: нет; там также.

Вероятно, есть более простой способ сделать это, но я пока мало знаю о CSS.

Ответ 6

Значок пользовательского интерфейса в качестве якоря (без текста):

Работает для меня:

<a href="#" onclick="location.href='http://wow.com'; return false;"><span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span></a>

Релевантно: порядок имен классов ui.