Измените значок кнопки jQuery UI с собственным изображением

В настоящее время у меня есть следующая кнопка пользовательского интерфейса jQuery:

$('#button').button(
  {
    label: 'Test',
    icons: {primary: 'ui-icon-circle-plus', secondary: null}
  }
);

Я хочу использовать собственное изображение для кнопки под названием "custom.png".

Как я могу это достичь?

Ответ 1

Определите стиль самостоятельно, например:

.ui-icon-custom { background-image: url(images/custom.png); }

Затем просто используйте его при вызове .button(), например:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

Предполагается, что ваш пользовательский значок находится в папке с изображениями под вашим CSS... там же, где обычно отображается карта значков jQuery. Когда созданный значок получает такой класс: 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, при необходимости меняете ширину, высоту и т.д.

Ответ 2

Взгляните на комментарий Ника Крейвера. Я попробовал его ответ так, как есть, но мне это все равно не помогло. Проблема (я предполагаю) заключалась в том, что класс ui-icon-custom был в конце списка классов и, похоже, не переопределял его на исходное фоновое изображение класса ui-icon.

То, что я сделал, чтобы заставить его работать, добавить! важно до конца значка css, как это

.ui-icon-custom { background-image: url(images/custom.png) !important; }

Возможно, вам придется изменить свойства высоты и ширины, но это сработало для меня.

Ответ 3

Возможно, я что-то упустил в OP, но это работает для меня без особых проблем. Вы можете определить кнопку как DIV и поместить в нее таблицу. Никакой переопределения css и вы все равно можете использовать как jquery определенные значки, так и свой собственный значок нестандартного размера. Вы также можете поместить значок в любом месте текста (сверху, влево, вправо и т.д.).

$(document).ready(function()
{
    $('#btn').button();
});

<div id='btn'>
<table>
<tr>
<td><img src='images/custom.png' width="24" height="24" /></td>
<td>Search</td>
</tr>
</table>
</div>

Ответ 4

найдите файл jquery ui css для класса ui-icon-circle-plus, затем скопируйте его для собственного изображения.

Ответ 5

Если только изображение отображается на кнопке без ярлыка или текста, я делаю это:

$('#button').button();

чтобы заменить этот элемент изображения, чтобы стать кнопкой:

<img src="images/custom.png" width="28" height="28" id="button">

Но если вы предпочитаете следовать этикетке или тексту, лучше объяснить объяснение tschlarm выше.

Ответ 6

Проверьте эту ссылку:

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

.bouton-image { background: #004963; width: 80px; }
.ui-icon-wifi {
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;
}

<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

Ответ 7

легко или легко

#bildwechseln {
background-image: url('../images/my-png/bild.png');
width: 140px;
height: 140px;}

<button id="bildwechseln"></button>

Приветствия из Германии