jquery - jqueryボタンに画像を追加する

Question

jqueryボタンに画像を追加する方法を知りたいです。これまで、プロジェクトでjquery uiボタンを使用していて、グラフィックチームからカスタムイメージを取得したので、それらを実装したいと思います。

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

このjqueryボタンにカスタム画像を追加するにはどうすればよいですか？

Answer 1

ボタンにクラスを割り当てるだけです...

$("#buttonId").button({

    icons: {primary: null},
    text: false

}).addClass("ButtonClass");

そうすると、CSSクラスは次のようになります...

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

Answer 2

<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/