53

jQuery UIダイアログのボタンにアイコンを追加することは可能ですか? 私はこのようにしてみました：

$("#DeleteDialog").dialog({
    resizable: false,
    height:150,
    modal: true,
    buttons: {
        'Delete': function() {
            /* Do stuff */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
        $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
    }
});

open 関数のセレクターは正常に動作しているようです。「開く」に次を追加すると：

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');

次に、赤いテキストの [削除] ボタンが表示されます。それは悪くないのですが、削除ボタンにも小さなゴミ箱のスプライトがあればいいのにと思います。

編集：

私は受け入れられた答えに微調整を加えました：

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

上余白を追加するとアイコンが押し下げられ、垂直方向の中央に配置されたように見えます。ボタンの幅に 25 ピクセルを追加すると、ボタンのテキストが 2 行目に折り返されなくなります。

4

13 に答える 13

52

私はこれを試してみましたが、うまくいきます:)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]
于 2010-08-03T04:11:12.373 に答える
36

jQuery UI 1.10 以降でネイティブにサポート

jQuery UI バージョン 1.10.0 から、openイベント ハンドラーに頼らずにボタン アイコンをきれいに指定できるようになりました。構文は次のとおりです。

buttons: [
    {
        text: "OK",
        icons: { primary: "ui-icon-check" }
    },
    {
        text: "Cancel",
        icons: { primary: "ui-icon-closethick" }
    }
]

secondaryアイコンの指定も可能です。

実際に見てください。

于 2013-06-25T21:05:10.960 に答える
18

この行を試して、ゴミ箱アイコンを削除ボタンに追加してください。スプライトは別の要素にある必要があります。

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

ボタンの上部にアイコンが表示されないようにするには:

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');
于 2010-03-26T18:50:26.217 に答える
8

次のように、ボタンに id やその他の属性を追加することもできます。

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }
于 2011-04-21T21:45:33.757 に答える
6

このバージョンは、ボタンのテキストを気にせずに動作します

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}
于 2010-10-28T01:55:38.057 に答える
2

これが私が使用するものです。最初のダイアログ定義中に、対象のボタンに ID を割り当てます。

    buttons:
    [
        {
            id: "canxButton",
            text: "Cancel",
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () { ...

次に、次のようにテキスト/アイコンを変更できます。

$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });
于 2015-06-10T20:30:59.883 に答える
1

または、他のダイアログに影響を与えたくない場合は、

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}
于 2010-09-09T22:59:09.770 に答える
1

次のように、「。ui-dialog.ui-button」に高さを割り当てます。

.ui-dialog .ui-button {
    height:36px;
}
.ui-icon-kl_exit {
    height:32px; 
    width:32px;
    display:block;
    background-image: url('../icons/exit32.ico');
}
于 2010-07-11T11:02:30.500 に答える
1

私は同じ問題に出くわしました。jqueryは、ボタン内のテキストとしてではなく、ボタン自体の「テキスト」と呼ばれる属性にテキストを保存しているようです。

私は次のように解決しました：

    $dialog.dialog({
        resizable:false,
        draggable:false,
        modal:true,
        open:function (event, ui) {
            $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
            //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
            $(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
        },
        buttons:[
            {
                text:"OK",
                click:function () {

                },
                "class":"add"
            },
            {
                text:"Cancel",
                click:function () {

                },
                "class":"cancel"
            }
        ]
    });
于 2012-08-15T09:28:09.190 に答える
1

これを自分で行う必要があることに気付いたので、単なる更新です。

両方とも同じ閉じるボタンを持つ複数のダイアログがあるので、影響を与えるダイアログに直接アイコンを配置する方法について話しておくと便利です。同じテキスト。

また、選択したソリューションには、実際には、位置の問題を修正する定義済みの CSS クラスがいくつかありません。

次のコードは、元の質問で求められていたことを、もう少し正確に達成する必要があります。削除ボタンのあるすべてのダイアログに同じゴミ箱アイコンを適用したい場合は、 $('#DeleteDialog').parent() セレクターを $('.ui-dialog-buttonpane') に変更すると、その目的が達成されます。

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');
于 2010-08-10T19:15:25.590 に答える
1

ダイアログ > ボタン オプションのドキュメントによると、オブジェクトまたはオプションの配列を渡すことができます。後者では、ボタンをカスタマイズできます。

ボタン

タイプ:オブジェクトまたは配列
デフォルト: []

複数のタイプがサポートされています:

  • Object : キーはボタンのラベルで、値は関連付けられたボタンがクリックされたときのコールバックです。
  • Array : 配列の各要素は、ボタンに設定する属性、プロパティ、およびイベント ハンドラーを定義するオブジェクトである必要があります。さらに、 のキーをicons使用してボタンのアイコン オプションを制御したり、 のキーをshowText使用してボタンのテキスト オプションを制御したりできます。

$(function() {
  var buttons = [];
  buttons.push({
    text: "Yes",
    // icon options
    icons: { primary: "ui-icon-check" },
    // attributes
    "class": "hawt-button",
    title: "Aye!"
  });
  buttons.push({
    text: "Yes to All",
    icons: { secondary: "ui-icon-check" }
  });
  buttons.push({
    text: "Please",
    icons: { primary: "ui-icon-notice" },
    // text options
    showText: false
  });
  buttons.push({
    text: "Cancel",
    icons: { secondary: "ui-icon-close" },
    // properties
    disabled: true
  });
  $("#dialog").dialog({
    width: "auto",
    buttons: buttons
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

.ui-button.hawt-button {
  color: hotpink;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>

于 2015-05-06T11:02:51.947 に答える
1

クラスベースのアプローチはどうですか？

_layout.cshtmlファイルに次のようなものを入れます。

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

次に、ダイアログを作成しているファイルで、次のようにします。

$("#doStuff-dialog").dialog({
    title: "Do Some Stuff",
    modal: true,
    buttons: [
        {
            text: "Yes",
            class: "my-button-submit",
            click: function () {
                $(this).dialog("close");
            }
        },
        {
            text: "No",
            class: "my-button-cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ],
    open: function () {
        stylizeButtons($("#doStuff-dialog").parent());
    }
});

これにより、テキストの検索に頼る必要がなくなり、ダイアログで最小限のコードが必要になります。アプリケーション全体でこれを使用して、クラスを与えるだけで jquery UI スタイル/アイコンをボタンに適用します。

于 2012-12-11T22:10:55.890 に答える