jQuery UI对话框，在按钮旁边添加元素
关于jQuery UI Dialog的一个好处是它有一个Buttons选项，可以自动正确定位它们。 我只是想知道：我可以以某种方式在按钮旁边放置元素吗？ 我有一个Ajax-Loader gif，我想在对话框的左下角显示，而按钮保持在右下方？
我知道我可以删除按钮并在HTML中手动创建它们，但由于jQuery已经为我处理了定位和样式，我想保留该function，如果它有意义的话。
$("#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'); } } }); 你基本上需要做的就是
//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看起来与此类似
loading...
或者就是这个
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'); } }, ...
一张纸条
- 你应该在ajax请求的
complete事件中调用.dialog('destroy')，否则在ajax请求完成之前对话框可能会被销毁，用户甚至可能看不到“loader”。
如何在第一个ui-dialog-button之前插入微调器？
buttons: { 'Create' : function() { $('
').insertBefore('.ui-dialog-buttonpane > button:first'); ...ajax stuff... $(this).dialog('destroy'); } }
最好的方法是创建另一个按钮，使其完全透明，没有边框，并添加动画gif作为其背景图像。 通过使用另一个按钮，您可以轻松找到相对于所有其他按钮的位置。
首先，为了能够更多地设置按钮样式，您需要创建一个更高级别的定义。 所以代替：
buttons: { 'Create': function() { $("#ajax-loader").show(); // Make the Ajax Call and whatever else is needed $(this).dialog('destroy'); }, Cancel: function() { $(this).dialog('destroy'); } }
这样做（注意方括号和一个缩进级别）：
buttons: [ { id: 'create-button', class: 'create-button-class', text: 'Create', click: function() { $("#ajax-loader").show(); // Make the Ajax Call and whatever else is needed $(this).dialog('destroy'); } }, text: 'Cancel', click: function() { $(this).dialog('destroy'); } } ]
您可以为每个按钮分配ID和类。 如果您指定了id和/或类，则可以对其应用CSS样式。
如果您愿意，可以创建一个普通的附加按钮并使用左侧的CSS属性将其推到按钮面板的最左侧，然后再将其设置为透明且没有边框。