jQueryUIボタンにカスタムアイコンを設定できますか

Question

カスタム アイコンを使用して jQueryUI ボタン​​を作成することは可能ですか:jQueryUI で提供されるスプライト アイコンの一部ではないアイコン

3 つのチェックボックスのグループに ButtonSet 機能を使用していますが、標準で提供されているものよりも様式化されたアイコンが必要です...

Answer 1

CSSハックでそれを働いています。

通常どおり

セットアップボタンや主要アイコンに

の下に定義された「エラー」クラスを与えます

.Error
{
    background-image: url('Images/Icons/16/Error.png') !important;
}

背景画像のための！重要なオーバーライドUI-アイコンの定義ます。

Answer 2

ボタンの 1 つに対してこのアプローチを採用したところ、いくつかの興味深いことがわかりました。

1. 「! important」オーバーライドを使用する必要はありませんでした
2. ボタンの背景位置を設定する必要がありました（そうしないと、背景がボタンのかなり外側に表示されていたと思います）
3. jQueryUI のプライマリ アイコン名に好きなものを入れることもできるようです。プレースホルダーとして何かが必要なだけです。

私の用途では、次のようになりました。

JavaScript:

jQuery(function() {
    jQuery('#share-button').button({
        icons: { primary: "icons/share" }
    });

});

CSS:

#share-button > span.ui-icon {
    background-image: url(icons/share.png);
    background-position:0px 3px;}

HTML:

<button id='share-button'>Share</button>