CSSをjQueryダイアログボタンに適用する

そのため、現在、[保存]と[閉じる]の2つのボタンがあるjQueryダイアログがあります。以下のコードを使用してダイアログを作成します。

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

ただし、このコードを使用すると、両方のボタンが同じ色になります。[キャンセル]ボタンを[保存]とは異なる色にしたいのですが。いくつかの組み込みのjQueryオプションを使用してこれを行う方法はありますか？私はドキュメントからあまり助けを得ませんでした。

作成している[キャンセル]ボタンは事前定義されたタイプですが、[保存]は自分で定義していることに注意してください。それが問題に関係があるかどうかはわかりません。

どんな助けでもいただければ幸いです。ありがとう。

更新：コンセンサスは、ここを移動するための2つの道があるということでした：

1. 以下のようなFirefoxのプラグインを使用してHTMLを点検放火犯、およびjQueryのボタンに適用されていることをCSSクラスを注意し、それらを上書きで刺しを取ります。注：私のHTMLでは、両方のボタンがまったく同じCSSクラスを使用し、一意のIDが使用されていなかったため、このオプションは使用できませんでした。
2. ダイアログを開いたときにjQueryセレクターを使用して、必要なボタンをキャッチし、CSSクラスを追加します。

2番目のオプションを選択し、jQuery find（）メソッドを使用しました。これは、：firstまたは：first-child b / cを使用するよりも適切だと思うため、変更したいボタンが必ずしも最初にリストされているボタンであるとは限りません。マークアップ。検索を使用すると、ボタンの名前を指定して、CSSを追加することができます。私が最終的に得たコードは以下のとおりです。

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

誰もここでそれを与えていないようで、それははるかにきれいできれいなので、私は同様の質問への私の答えを再投稿しています：

代替buttonsプロパティ構文を使用します。

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

openイベントハンドラーを使用して、追加のスタイルを適用できます。

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

私はあなたがそれを扱うことができる2つの方法があると思います：

1. 2つのボタンの間に（クラス、IDなどに）違いがある場合は、firebugなどを使用して確認し、それを使用して特定のボタンに対処します
2. ：first-childのようなものを使用して、たとえば最初のボタンを選択し、それを別のスタイルにします

ダイアログの1つでfirebugを使用してソースを見ると、次のようになります。

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

したがって、たとえば、いくつかのスタイルを.ui-state-focusに追加することで[送信]ボタンに対処できます（jqueryのスタイルを確実にオーバーライドするためのセレクターをいくつか追加することもできます）。

ちなみに、この場合、フォーカスが変わったときの問題を回避するために、2番目のオプションを選択します...

「class」の「className」という単語を変更する必要があります

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

多分このようなもの？

$('.ui-state-default:first').addClass('classForCancelButton');

ロールダイアログがあるdivを選択し、適切なボタンを取得してCSSを設定します。

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

特定のボタンにのみ適用される特定のスタイルを定義するための簡単な答えもあり、ダイアログを宣言するときにJqueryに要素スタイルを宣言させることができます。

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

それを行った後、ここにhtmlが示すものがあります：

これを行うことで設定できますが、後でjqueryを使用して変更するのは必ずしも簡単ではありません。

生成されたマークアップを調べて、選択したボタンのクラスに注意し、自分でスタイルを設定してみませんか？

コードが吐き出すHTMLを見て、ボタンの1つ（または両方）（おそらくidまたはname属性）を一意に識別する方法があるかどうかを確認してから、jQueryを使用してそのアイテムを選択し、それにcssクラス。

それでも注意が必要な場合は、ページスタイルシートに次のスタイルを追加してください

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

ダイアログボタンの背景色を変更します。