jQuery UI对话框，添加按钮旁边的元素

jQuery UI对话框的好处之一是它有一个Buttons选项，可以自动正确定位它们。我只是想知道：我可以以某种方式在按钮旁边放置元素吗？我想要在对话框的左下角显示一个小的Ajax-Loader gif，而按钮则停留在右下角？jQuery UI对话框，添加按钮旁边的元素

我知道我可以删除按钮并在HTML中手动创建它们，但由于jQuery已经为我定位和样式，所以我希望保持该功能，如果它是有道理的。

$("#newProjectDialog").dialog({ 
     bgiframe: true, 
     resizable: false, 
     width: 400, 
     modal: true, 
     overlay: { 
      backgroundColor: '#000', 
      opacity: 0.5 
     }, 
     buttons: { 
      'Create': function() { 
       $("#ajax-loader").show(); 
       // Make the Ajax Call and whatever else is needed 
       $(this).dialog('destroy'); 
      }, 
      Cancel: function() { 
       $(this).dialog('destroy'); 
      } 
     } 
    });

来源

2009-12-17 Michael Stum

所有你基本上需要做的是

//depending on what #ajax-loader is you maybe need to style it (float:left, ...) 
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();

下面结合几方面的考虑票友版本。

我想象#ajax-loader以类似于此

<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>

或者即将

<img id='ajax-loader' src='loader.gif' />

JavaScript可以像这样

... 
'Create': function() { 
    var btnpane = $("div.ui-dialog-buttonpane"); 
    //prevent bad things if create is clicked multiple times 
    var there = btnpane.find("#ajax-loader").size() > 0; 
    if(!there) { 
     $("#ajax-loader").clone(true).appendTo(btnpane).show(); 
     // Make the Ajax Call and whatever else is needed 
     // if ajax call fails maybe add $("#ajax-loader", btnpane).remove(); 
     $(this).dialog('destroy'); 
    } 
}, 
...

的说明

你应该在complete事件Ajax请求别人对话的呼吁.dialog('destroy')可能会破坏Ajax请求完成之前，并且用户甚至有可能不会看到“装载机”。

来源

2009-12-17 03:27:48 jitter

谢谢。是的，这是我的生产代码当前正在执行的操作，“按钮事件”以Ajax调用和回调函数都会隐藏/关闭。 – 2009-12-17 06:29:26

我使用了“$（”。ui-dialog-buttonpane：first“）。append（aj）;”，其中aj是$（' 2009-12-17 20:35:05

太糟糕了，虽然我不能两次upvote，但是“there”检查对它自己很有帮助。 – 2009-12-17 20:35:47

如何在第一个ui-dialog-button之前插入微调器？

buttons: { 
    'Create' : function() { 
     $('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first'); 
     ...ajax stuff... 
     $(this).dialog('destroy'); 
    } 
}

来源

2009-12-17 03:19:12 tvanfosson

的.ui-对话框的按钮不存在:( – 2009-12-17 20:24:08

对不起 - 的.ui-对话框的buttonpane或的.ui-对话框的buttonpane>按钮：第一 – tvanfosson 2009-12-18 02:55:30

这工作不适合我，如果我删除。 >我得到了一个结果，但它的位置很糟糕，我可以做些什么来将按钮放置在第一个按钮旁边？ – 2011-11-11 09:30:48

jQuery UI对话框，添加按钮旁边的元素

回答

相关问题