jQuery UI对话框按钮位于左侧

Question

我有一个定义如下的对话框：

$('#dgReport').dialog({
modal: true,
autoOpen: false,
width: 450,
title: '',
resizable: false,
buttons: [
{
text: 'Prev',
id: 'btnPrevReport',
click: function () { }
},
{
text: 'Next',
id: 'btnNextReport',
click: function () { }
},

{
text: 'Save',
click: function () {

}
},
{
text: 'Cancel',
click: function () {
$(this).dialog('close');
}
}
],
open: function () {}
};

我希望Previ和Next按钮在左边，Save和Cancel在右边，是否可以不使用window-pane类？

Answer 1

您可以在创建事件中执行操作：

create: function (e) {
var dbs = $(this).closest('.ui-dialog').find('.ui-dialog-buttonset');
dbs.css('width', '100%');
dbs.find('.ui-button:contains("Save"), .ui-button:contains("Cancel")')
.css({'float': 'right', 'margin-right': '0px'});
}

$('button').on('click', function(e) {
$('#dgReport').dialog( "open" );
});
$('#dgReport').dialog({
modal: true,
autoOpen: false,
width: 450,
title: '',
resizable: false,
buttons: [
{
text: 'Prev',
id: 'btnPrevReport',
click: function () { }
},
{
text: 'Next',
id: 'btnNextReport',
click: function () { }
},

{
text: 'Save',
click: function () {
}
},
{
text: 'Cancel',
click: function (e) {
$(this).dialog('close');
}
}
],
create: function (e) {
var dbs = $(this).closest('.ui-dialog').find('.ui-dialog-buttonset');
dbs.css('width', '100%');
dbs.find('.ui-button:contains("Save"), .ui-button:contains("Cancel")').css({'float': 'right', 'margin-right': '0px'});
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button>Open Dialog</button>
<div id="dgReport" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>