jquery - Jqueryダイアログの新しいボタン

Question

スクリーンショットが示すように、ダイアログの上部にある閉じるボタンの横に新しいボタンを追加できますか？これを実装できるかどうか、または制限があるかどうかはわかりません

ありがとう

Answer 1

イベントを使用しcreateてボタンを追加できます。これは、ボタンが2回以上追加されないようにする簡単な方法です。

var newBtn = '<a href="#" class="myDialogBtn"><span class="ui-icon ui-icon-alert"></span></a>';

$('#dialog').dialog({
    title: 'Test Dialog',
    create: function() {
        $(this).prev('.ui-dialog-titlebar').find('.ui-dialog-title').after(newBtn)
    }
})

ブラウザコンソールの既存のボタンを調べて、必要な追加のcssをコピーします

デモ：http：//jsfiddle.net/eh4Aj/

APIリファレンス：http ：//api.jqueryui.com/dialog/#event-create

Answer 2

これを試して、JqueryUiダイアログの関数を開くために以下のコードを追加してください

$(".ui-dialog-titlebar").append("<input type=\"button\" id=\"yourID\" value=\"My Custom\">");

Answer 3

jquerybefore関数を備えたボタンを挿入することで、jqueryuiダイアログをカスタマイズできます。

JQueryコード：

<script language="javascript" type="text/javascript">

$(document).ready(function() {
    $('#trigger').click(function(){
      $("#dialog").dialog();
      $(".ui-dialog-titlebar-close").before('<input name="newBtn" id="newBtn" type="button" style="float:right;" value="BUTTON"/>');
    }); 
}); 
</script>

HTMLコード：

<input name="trigger" id="trigger" type="text" />
<div id="dialog" style="display:none">
    <div>
        Content
    </div>
</div>