web-dev-qa-db-ja.com

jQuery Uiダイアログボタン、クラスを追加する方法？

この答えは別のスレッドで見つけました。

Jquery UIダイアログボックスに複数のボタンを追加する方法？

この構文を使用して、特定のボタンにクラスを追加するにはどうすればよいですか？

 $("#mydialog").dialog({
      buttons: {
        'Confirm': function() {
           //do something
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
    });
jqueryjquery-uiuser-interfacedialogjquery-ui-dialog
50
gerky

APIを介してこれを行うのに最適な方法はないように見えますが、 create のイベントハンドラーにクラスを追加することができます。

_$("#dialog").dialog({
    buttons: {
        'Confirm': function() {
            //do something
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    create:function () {
        $(this).closest(".ui-dialog")
            .find(".ui-button:first") // the first button
            .addClass("custom");
    }
});
_

2番目のボタンが必要な場合は、次を使用できます。

_$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button
_

キーは$(this).closest(".ui-dialog").find(".ui-button")で、ダイアログのボタンを選択します。その後、任意のセレクターを適用できます（:contains(...)など、順序ではなくテキストに基づいてボタンを選択する場合に便利です）。

以下に例を示します。 http://jsfiddle.net/jjdtG/

また、スタイルを適用するには、適用するスタイルのCSSセレクターがjQueryUIの組み込みセレクターより具体的である必要があることに注意してください。

49
Andrew Whitaker

Dialogのボタンにクラスを追加できます...

$('#mydialog').dialog({
  buttons:{
    "send":{
      text:'Send',
      'class':'save'
    },
    "cancel":{
      text:'Cancel',
      'class':'cancel'
    }
  });

これはあなたに役立つと思います。そして、あなたはより多くの答えを見つけることができます こちら 。

84
Imran Khan

それが役立つことを願っています！

$("#mydialog").dialog({
          buttons: {
            'Confirm': function() {
               //do something
               $(this).dialog('close');
            },
            "Cancel": {
                    click: function () {
                        $(this).dialog("close");
                    },
                    text: 'Cancel',
                    class: 'custom-class'
                }
          }
        });
42
LintonB

Openイベントハンドラーを使用します。

open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

清潔でシンプルなケーキ！

7
bpeterson76

LintonBのおかげで、スタイル、IDなどのボタンに関連付けられたすべてのプロパティを追加できます。

dialog_options.buttons = {
  'Modify': {
    click: function() {

      $(this).dialog('close');

      if (inputs.phone !== '') {
        inputs.phone.focus();
        inputs.phone[0].value = "";
      }
    },
    class: 'btn btn-labeled btn-warning',
    style: 'margin-right: 30px;',
    id: 'modificationId'
  },
  'Keep': {
    click: function() {
      $(this).dialog('close');

      _this.validatePhone(i);

    },
    class: 'btn btn-labeled btn-warning',
    id: 'conserverId'
  }
};
2
GeooffreyA