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

Ответ 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
        }});

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

Ответ 2

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

.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

Ответ 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>

Ниже script ищет атрибут 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');
            });
  });

Ответ 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();
});​

Ответ 5

Мое решение добавить пользовательские значки в пользовательский интерфейс 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" }
});

Ответ 6

Основываясь на ответе 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');
      }
    });
}

Ответ 7

// 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 } });

Ответ 8

в 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" }
});