Как добавить пользовательский значок в стандартную тему пользовательского интерфейса 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

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

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

Это имеет более высокую специфичность, чем ваш селектор .fw-button-edit, тем самым перекрывая proerty фона изображения. Поскольку они используют спрайты, набор правил .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 и Панайотиса выше, и jquery ui button sample code:

Как я переносе ранее приложения 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> 

ниже сценарий выглядит для атрибута данных-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

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

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

Answer 5

Опираясь на 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 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

Решение в этом ссылка работала отлично для меня: 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 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" } 
});