Jquery 对话框新按钮答案

【问题标题】：Jquery dialog new buttonJquery 对话框新按钮
【发布时间】：2013-01-01 06:36:01
【问题描述】：

如截图所示，我可以在对话框顶部的关闭按钮旁边添加一个新按钮吗，我不知道这是否可以实现或有任何限制

谢谢

【问题讨论】：

标签： jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

您可以使用create 事件来添加您的按钮。这是一种确保按钮不会被多次添加的简单方法

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

【讨论】：

【解决方案2】：

请试试这个，添加下面给出的代码来打开Jquery Ui Dialog的功能

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

【讨论】：

【解决方案3】：

您可以通过插入带有 jquery before 函数的按钮来自定义 jquery ui 对话框，

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>

【讨论】：