47

アプリケーションでjqueryuiダイアログを使用しています。jqueryダイアログで「保存」ボタンと「キャンセル」ボタンのスタイルを変えるにはどうすればよいですか？したがって、「保存」は「キャンセル」よりも魅力的です。「キャンセル」にハイパーリンクを使用できますが、同じボタンパネルに配置するにはどうすればよいですか？

4

12 に答える 12

54

jQuery UI ダイアログ (バージョン 1.8 以降) でカスタム クラスを追加する方法は次のとおりです。

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
});
于 2009-08-23T17:21:15.163 に答える
40

jQueryUI 1.8.9では、動作するのclassNameではなく使用しclassesます。

$('#element').dialog({
  buttons:{
    "send":{
      text:'Send',
      className:'save'
    },
    "cancel":{
      text:'Cancel',
      className:'cancel'
    }
  });
于 2011-02-02T15:20:48.677 に答える
16

私は jQuery UI 1.8.13 を使用しており、必要に応じて次の構成が機能します。

var buttonsConfig = [
    {
        text: "Ok",
        "class": "ok",
        click: function() {
        }
    },
    {
        text: "Annulla",
        "class": "cancel",
        click: function() {
        }
    }
];

$("#foo").dialog({
    buttons: buttonsConfig
// ...

ps: "class"は js の予約語なので、引用符で囲むことを忘れないでください。

于 2012-01-04T10:59:45.967 に答える
11

この質問が投稿されてからしばらく経ちましたが、次のコードはすべてのブラウザーで機能します (MattPIIの回答は FFox と Chrome で機能しますが、IE ではスクリプト エラーがスローされることに注意してください)。

$('#foo').dialog({
    autoOpen: true,
    buttons: [
    {
        text: 'OK',
        open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
        click: function() { alert('OK Clicked')}
    },
    {
        text: "Cancel",
        click: function() { alert('Cancel Clicked')}
    }
  ]
});
于 2012-05-02T14:34:46.177 に答える
10

以下のjqueryuiバージョン1.8.16の時点で、私はそれをどのように機能させましたか。

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});
于 2011-12-15T18:25:20.407 に答える
7

一度にページに 1 つのダイアログしかない場合は、これらのソリューションはすべて非常にうまく機能しますが、一度に複数のダイアログのスタイルを設定したい場合は、次の方法を試してください。

$("#element").dialog({
    buttons: {
        'Save': function() {},
        'Cancel': function() {}
    }
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();

ボタンをグローバルに選択する代わりに、ウィジェット オブジェクトを取得してそのボタン ペインを見つけ、各ボタンを個別にスタイルします。これにより、1 つのページに複数のダイアログがある場合に多くの手間が省けます

于 2010-12-20T21:49:18.740 に答える
4

after looking at some other threads I came up with this solution to add icons to the buttons in a confirm dialog, which seems to work well in version 1.8.1 and can be modified to do other styling:

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

I'd be interested in seeing if there was a better way to do it, but this seems pretty efficient.

于 2010-05-21T21:40:22.790 に答える
2

jQuery UI 1.8.22 では、次の構成を使用する必要がありました。

var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');

これにより、すべての書式設定が削除され、必要に応じて代わりのスタイルが適用されます。
ほとんどの主要なブラウザーで動作します。

于 2012-09-20T08:27:40.023 に答える
1

JQuery UI 1.8.11 バージョンがあり、これが私の作業コードです。要件に応じて、高さと幅をカスタマイズすることもできます。

$("#divMain").dialog({
    modal:true,
    autoOpen: false,
    maxWidth: 500,
    maxHeight: 300,
    width: 500,
    height: 300,
    title: "Customize Dialog",
        buttons: {
            "SAVE": function () {
                //Add your functionalities here
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {}
});
于 2016-11-09T06:21:58.260 に答える
1

この関数は、ダイアログ ボックスのすべてのボタンにクラスを追加します。その後、通常どおりスタイルを設定 (または jQuery で選択) できます。

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});
于 2010-07-30T18:18:13.337 に答える
0

jquery ui 1.8.5をチェックしてください。http：//ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.jsで入手でき 、 ダイアログuiを実装するための新しいボタンがあります。

于 2010-09-17T11:45:09.077 に答える
-1

UI ダイアログによって生成された HTML を見てみました。ボタン ペインを次のようにレンダリングします。

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

キャンセル ボタンにクラスを追加するのは簡単なはずです。

$('.ui-dialog-buttonpane :last-child').css('background-color', '#ccc');

これにより、[キャンセル] ボタンが少し灰色になります。このボタンのスタイルは自由に設定できます。

上記のコードは、キャンセル ボタンが最後のボタンであると想定しています。それを行うためのばかげた方法は

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );
于 2009-07-16T16:31:27.307 に答える