Измените значок кнопки UI jQuery с собственным изображением
В настоящее время у меня есть следующая кнопка UI jQuery:
$('#button').button(
{
label: 'Test',
icons: {primary: 'ui-icon-circle-plus', secondary: null}
}
);
Я хочу использовать собственное изображение для кнопки, названной 'custom.png'.
Как я могу достигнуть этого?
3 ответа
Определите стиль самостоятельно, например:
.ui-icon-custom { background-image: url(images/custom.png); }
Затем просто используйте его при вызове .button () , например:
$('#button').button({
label: 'Test',
icons: {primary: 'ui-icon-custom', secondary: null}
});
Предполагается, что ваш пользовательский значок находится в папке изображений под вашим CSS ... то же место, что и карта значков jQuery UI. Когда значок создается, он получает такой класс: class = "ui-icon ui-icon-custom" , и этот класс ui-icon выглядит следующим образом (возможно, другое изображение , в зависимости от темы):
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
Итак, в вашем стиле вы просто переопределяете это background-image , при необходимости измените ширину, высоту и т. д.
найдите в файле jquery ui css класс ui-icon-circle-plus , затем скопируйте его для своего собственного изображения.
Взгляните на комментарий Ника Крейвера. Я попробовал ответить, как есть, но мне это все равно не помогло. Проблема (я предполагаю) заключалась в том, что класс ui-icon-custom находился в конце списка классов и, похоже, не заменял его исходным классом ui-icon фоновая картинка.
Чтобы заставить его работать, я добавил! Important в конец иконки css, вот так
.ui-icon-custom { background-image: url(images/custom.png) !important; }
Возможно, вам придется изменить свойства высоты и ширины, но у меня это сработало.