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

Question

Легко использовать один из значков, доступных в стандартном наборе значков:

$("#myButton").button({icons: {primary: "ui-icon-locked"}});

Но что, если я хочу добавить один из моих собственных значков, который не является частью набора значков платформы?

Я думал, что это будет так же просто, как дать ему свой собственный класс CSS с фоновым изображением, но это не работает:

.fw-button-edit {
    background-image: url(edit.png);
}

Есть предложения?

Answer 1

Я также мог бы порекомендовать:

.ui-button .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

, затем просто введите код JS:

        jQuery('selector-to-your-button').button({
        text: false,
        icons: {
            primary: "you-own-cusom-class"   // Custom icon
        }});

Это сработало для меня и надеюсь, что оно работает и для вас!

Answer 2

Я считаю, что причина, по которой он не будет работать, заключается в том, что свойство background-image вашего значка переопределяется фоновым изображением спрайта значка jQuery UI по умолчанию. Рассматриваемый стиль:

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}

Это имеет более высокую специфичность, чем ваш .fw-button-edit селектор, таким образом перекрывая свойство фонового изображения. Поскольку они используют спрайты, набор правил .ui-icon-locked содержит только background-position, необходимый для определения положения изображения спрайта. Я считаю, что с помощью этого будет работать:

.ui-button .ui-icon.fw-button-edit {
    background-image: url(edit.png);
}

Или что-то еще с достаточной спецификой. Узнайте больше о специфике CSS здесь: http://reference.sitepoint.com/css/specificity

Answer 3

Это основано на информации, предоставленной Yi Jiang и Panayiotis выше, и на примере кода кнопки jquery ui :

Когда я выполнял миграцию более раннего приложения JSP с панелью инструментов сизображений на кнопку, я хотел, чтобы изображение было внутри самого объявления кнопки, а не создавало отдельный класс для каждой кнопки панели инструментов.

<div id="toolbarDocs" class="tableCaptionBox">
    <strong>Checked Item Actions: </strong>

    <button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
    <button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>

Конечно, было гораздо больше кнопок, чем две вышеупомянутые.Приведенный выше тег s является тегом struts2, но вы можете просто заменить его любым URL-адресом

        <button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>

В приведенном ниже сценарии выполняется поиск атрибута data-img из тега кнопки, а затем устанавливается его в качестве фонового изображения.для кнопки.

Он временно устанавливает ui-icon-bullet (любой произвольно существующий стиль), который затем изменяется позже.

Этот класс определяет временный стиль (лучше добавить дополнительные селекторы для конкретной панели инструментов, если выпланируйте использовать это, чтобы остальная часть вашей страницы оставалась неизменной).Фактическое изображение будет заменено приведенным ниже Javascript:

button.ui-button .ui-icon {
    background-image: url(blank.png);
    width: 0;
    height: 0; 
}

и следующим Javascript:

 $(document).ready(function () {
    $("#toolbarDocs button").each(
          function() { 
            $(this).button(
              { text: $(this).attr('data-img').length === 0? true: false, // display label for no image
               icons: { primary: "ui-icon-bullet"  }
              }).css('background-image', "url(" + $(this).attr('data-img') +")")
               .css('background-repeat', 'no-repeat');
            });
  });

Answer 4

Решение по этой ссылке отлично сработало: http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html

$(document).ready(function() {
    $("#btnClose")
    .text("")
    .append("<img height="100" src="logo.png" width="100" />")
    .button();
});​

Answer 5

в CSS

.ui-button .ui-icon.custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

в HTML

<button type="button" class="ui-button ui-widget ui-corner-all">
    <span class="custom-class"></span> CAPTION TEXT
</button>

в JavaScript

$("selector").button({
    icons: { primary: "custom-class" }
});

Answer 6

// HTML

<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
      <input type="radio" id="apple" name="radioSet"  value="1"><label for="apple">Apple</label>
      <input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>


// JQUERY

// Function to remove the old default Jquery UI Span and add our custom image tag

    function AddIconToJQueryUIButton(controlForId)
    {
        $("label[for='"+ controlForId + "'] > span:first").remove();
        $("label[for='"+ controlForId + "']")
        .prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");

    }

// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place

   // Set icons on buttons. pass ids of radio buttons
   $(document).ready(function () {
                 AddIconToJQueryUIButton('apple');   
                 AddIconToJQueryUIButton('mango');   
    });

   // call Jquery UI api to set the default icon and later you can change it        
    $( "#apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
    $( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });

Answer 7

Опираясь на ответ msanjay, я расширил это, чтобы работать с пользовательскими значками для кнопок jquery ui и переключателей:

<div id="toolbar">
    <button id="btn1" data-img="/images/bla1.png">X</button>
    <span id="radioBtns">
      <input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
      <input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
    </span>
</div>    

$('#btn1').button();
$('#radioBtns').buttonset();

loadIconsOnButtons('toolbar');

function loadIconsOnButtons(divName) {
    $("#" + divName + " input,#" + divName + "  button").each(function() {
      var iconUrl = $(this).attr('data-img');
      if (iconUrl) {
        $(this).button({
          text: false,
          icons: {
            primary: "ui-icon-blank"
          }
        });
        var imageElem, htmlType = $(this).prop('tagName');
        if (htmlType==='BUTTON') imageElem=$(this);
        if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
        if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
      }
    });
}

Answer 8

Мое решение для добавления пользовательских значков в пользовательский интерфейс JQuery (с использованием спрайтов):

CSS:

.icon-example {
    background-position: 0 0;
}

.ui-state-default .ui-icon.custom {
    background-image: url(icons.png);
}

.icon-example определяет положение иконки в файле пользовательских иконок. .ui-icon.custom определяет файл с пользовательскими значками.

Примечание: вам может потребоваться определить и другие классы пользовательского интерфейса JQuery (например, .ui-state-hover).

JavaScript:

$("selector").button({
    icons: { primary: "custom icon-example" }
});