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');
}
}
参考: