0

JQuery UI の外部アイコンを使用する簡単な方法はありますか?

ボタンに次のアイコンがあるとします。

  <script type="text/javascript">
    $(document).ready(function () {
        $('#aButton').button({
            icons: 
            {
                primary: "ui-icon-newicon"
            }
        });
    });
</script>

<button id="aButton">hello</button>

外部の jpeg または png を表示することはできますか? 既存の JQuery UI png ファイルを編集せずにこれを行う最も簡単な方法は何ですか?

ui-icons_xxxxxx_256x240.png以前は、nuget を使用して JQuery UI の新しいバージョンにアップグレードし、png ファイルが置き換えられるまで、ファイルで使用していないアイコンを手動で編集して置き換えることで、これを達成することができました。

編集：

このクラスを Site.css (ASP.NET MVC3 アプリ) に作成し、!important フラグを追加する必要がありました。状態に問題はありませんでした (ボタンが強調表示されているとき、ホバーなど)。

.ui-icon-newicon
{
    background-image: url(images/delete.png) !important;
    background-position: 0 0;
}
4

2 に答える 2

1

もちろん、独自のファイルを追加して、その特定のボタンに次のような CSS クラスを提供するだけです。

#aButton.ui-icon-custom {
    background-image: url(...);
    background-position: 0 0;
}
于 2012-07-16T09:23:58.363 に答える
1

CSS でそのクラスに独自のスタイルを定義することで、それを行うことができます。

.ui-icon-locked { background-image: url(images/custom.png); }
于 2012-07-16T09:24:04.570 に答える