Dialogのボタンそれぞれにclassを設定する

  • 17
    いいね
  • 0
    コメント

jquery-uiのdialogの複数のボタンに別々のclassを追加。

dialogは複数のボタンが作成できるが、
個別にclassを当てはめたい場合、openイベントでaddClassしたりする例もみられ、
自分もそのようにしてた。
たとえば↓

javascript-例えば
$(function() {
    //ダイアログ
    $('#dialog').dialog({
        title: 'ボタンに個別にクラスを設定する',
        buttons:[
            '更新する': function() {
                //ボタンを押したときの処理
            },
            '削除する': function() {
                //ボタンを押したときの処理
            },
            '閉じる': function() {
                $(this).dialog('close');
            }
        ],
        open: function() {
            //ここで各ボタンにaddClassなどで属性を設定
        }
    });
});

が、上記の様にせずとも、下記の記述で期待どおりの表現ができた。

javascript-できた!

$(function() {
    //ダイアログ
    $('#dialog').dialog({
        title: 'ボタンに個別にクラスを設定する',
        buttons:[
            {
                text: '更新する',
                class:'btn-update',
                click: function() {
                    //ボタンを押したときの処理
                }
            },
            {
                text: '削除する',
                class:'btn-delete',
                click: function() {
                    //ボタンを押したときの処理
                }
            },
            {
                text: '閉じる',
                class:'btn-close',
                click: function() {
                    $('#dialog').dialog('close');
                }
            }
        ]
    });
});

coffeescript+もうちょっと実用的に。
定義を別でやっとけばボタンの位置入れ替えとかが楽か。

coffeescript-できた!

#ボタンの定義
updateButton =
    text: '更新する'
    class: 'btn btn-update'
    click: ->
        #ボタンを押したときの処理
deleteButton =
    text: '削除する'
    class: 'btn-delete'
    click: ->
        #ボタンを押したときの処理
closeButton =
    text: '閉じる'
    class: 'btn-close'
    click: ->
        $('#dialog').dialog 'close'
$ ->
    #ダイアログ
    $('#dialog').dialog
        title: 'ボタンに個別にクラスを設定する'
        buttons:[
            updateButton
            deleteButton
            closeButton
        ]

↓textをhtmlにするとタグが使えるのでfontawesomeなどのアイコンをつけたりもできたのでメモとして追記(2017.02.15)

javascript
{
    html: '<i class="fa fa-close"></i> 閉じる',
    class: 'btn btn-default',
    click: function(){
        $(this).dialog('close');
    }
}

参考:

jQuery UI Dialog
jQuery UI Dialog option-buttons