Добавьте изображение к кнопке jquery

Question

Мне интересно, как добавить изображение в кнопку jquery. До сих пор я использовал кнопку jquery ui в своем проекте, и у меня были пользовательские изображения из графической команды, поэтому я хотел бы их реализовать.

submit.button({ icons: {primary:'ui-icon-trash'}, text: false }) 

Как добавить пользовательскую картинку к этой кнопке jquery?

Answer 1

<button>Trash</button> 
<style> 
    .ui-button ​.ui-button-icon-primary { 
     background: url('/my-custom-trash-image.png'); 
    }​ 
</style> 
<script> 
    $(function() { 
     $('button').button({ 
      icons: { 
       primary: 'ui-icon-trash' 
      }, 
      text: false 
     }); 
    }); 
</script> 

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

Живой пример - http://jsfiddle.net/aMVrz/

Answer 2

Я бы просто назначить класс к кнопке ...

$("#buttonId").button({ 

    icons: {primary: null}, 
    text: false 

}).addClass("ButtonClass"); 

Тогда ваш класс CSS может выглядеть следующим образом ...

.ButtonClass 
{ 
    background-image: url(../images/Button.png); 
    background-repeat: no-repeat; 
    border: none;  
}