web-dev-qa-db-ja.com

jqueryダイアログの保存キャンセルボタンのスタイル

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

jqueryjquery-uijquery-ui-dialog
47
Sabya

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

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
});
53
Andriy Tkach

JQueryUI 1.8.9では、classNameではなくclassesを使用すると機能します。

$('#element').dialog({
  buttons:{
    "send":{
      text:'Send',
      className:'save'
    },
    "cancel":{
      text:'Cancel',
      className:'cancel'
    }
  });
40
Alex Torrance

JQuery UI 1.8.13を使用していますが、必要に応じて次の構成が機能します。

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

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

ps：「クラス」を引用符で囲むことを忘れないでください jsの予約語であるためです！

16
daveoncode

この質問が投稿されてからしばらく経ちましたが、次のコードはすべてのブラウザーで機能します（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')}
    }
  ]
});
11
maxp

Jquery uiのバージョン1.8.16の時点では、どのように動作するかがわかります。

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});
10
MattPII

これらのソリューションは、ページ内に一度に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つのページに複数のダイアログがある場合に多くの苦痛が軽減されます。

7
Angry Dan

他のスレッド を見た後、確認ダイアログのボタンにアイコンを追加するこのソリューションを思い付きました。これはバージョン1.8.1でうまく機能するようで、他のスタイリングを行うように変更できます。

$("#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>");

私はそれを行うためのより良い方法があったかどうかを確認することに興味がありますが、これはかなり効率的なようです。

4
paul

JQuery UI 1.8.22で次のコンストラクトを使用する必要がありました。

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

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

2
JonnyDotNet

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 () {}
});
1
Willy David Jr

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

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});
1
Paul Lorentzen

jquery ui 1.8.5を確認してください http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js にあり、ダイアログ用の新しいボタンがありますUIの実装

0
Ionut Popa