jQuery
jquery.ui

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

More than 1 year has passed since last update.

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