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

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] (https://jqueryui.com/dialog/)
[jQuery UI Dialog option-buttons] (http://api.jqueryui.com/dialog/#option-buttons)