Изменить значок кнопки jQuery UI с собственным изображением - PullRequest
Новая
       20

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

24 голосов
/ 12 июля 2010

В настоящее время у меня есть следующая кнопка jQuery UI: 

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

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

Как мне этого добиться?

Ответы [ 7 ]

34 голосов
/ 16 июля 2010

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

Что я сделал, чтобы получитьчтобы это работало, было добавлено! важным до конца иконки css вроде так 

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

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

32 голосов
/ 12 июля 2010

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

.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, при необходимости меняем ширину, высоту и т. д.

5 голосов
/ 09 февраля 2012

Может быть, я что-то упускаю в ОП, но у меня это работает без особых проблем. Вы можете определить кнопку как 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>
1 голос
/ 25 ноября 2013

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

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

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

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

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

1 голос
/ 12 июля 2010

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

0 голосов
/ 30 августа 2016

легко или просто 

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

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

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

0 голосов
/ 29 сентября 2015

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

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>

В «data-icon» просто поместите все, что вы хотите, и jquery создаст для вас класс.

...