2

I am wondering how to add an image to the jquery button. Till now I was using the jquery ui button in my project and I got custom images from the graphics team, so I would like to implement them.

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

How to add custom image to this jquery button?

user525146
  • 3,918
  • 14
  • 60
  • 103

2 Answers2

5

I would just assign a class to the button...

$("#buttonId").button({

    icons: {primary: null},
    text: false

}).addClass("ButtonClass");

Then your CSS class could look something like this...

.ButtonClass
{
    background-image: url(../images/Button.png);   
    background-repeat: no-repeat; 
    border: none;    
}
Dzeimsas Zvirblis
  • 377
  • 2
  • 9
3
<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>

Unfortunately you do have to pass in a valid value for the primary icon even though it won't be used.

Live Example - http://jsfiddle.net/aMVrz/

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
  • Thanks, that was easy. But unfortunately I have a problem here. I have another button with another image. In this case when I set the primary icon background, both the buttons would take the same image. – user525146 Jun 21 '12 at 15:59
  • 1
    Give each button an ```id``` and use that in the CSS. See http://jsfiddle.net/aMVrz/1/. – TJ VanToll Jun 21 '12 at 16:29
  • I have another situation, the image is of 24x24 and my current button is not accommodating the image, its eating away the image. Won't the button re-size based on the image size? – user525146 Jun 21 '12 at 18:25
  • 2
    It will not since this is being applied as a ```background-size```. Your best bet is to do something like this - http://jsfiddle.net/aMVrz/2/. If you want more spacing you'll have to up the ```padding``` on the ```button``` and play with the ```top``` and ```left``` values on the ```span```. – TJ VanToll Jun 21 '12 at 18:42