web-dev-qa-db-ja.com

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. firebug などの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)
    }
});
jquerycssjquery-uibuttondialog
77
MegaMatt

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

別の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)
    }
});
124
Raphael Schweikert

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

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

私はあなたがそれを扱うことができる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番目のオプションを選択します...

6
jeroen

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

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

ロールダイアログを持つdivを選択し、その中に適切なボタンを取得してCSSを設定します。

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

たぶんこんな感じ？

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

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

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

これを行った後、htmlが示す内容は次のとおりです。 enter image description here

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

2
eragon2262

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

1
rfunduk

それでも機能しない場合は、ページスタイルシートに次のスタイルを追加します

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

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

0
Qammar Feroz

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

0
Rory