jQuery UI 对话框按钮位于左侧
jQuery UI dialog button positioned on the left
我有一个对话框定义如下:
$('#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 () {}
};
我希望 Prev 和 Next 按钮在左侧,Save 和 Cancel 按钮在右侧,是否可以不求助于 window-pane
class?
你可以在里面行动 the create event:
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>
我有一个对话框定义如下:
$('#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 () {}
};
我希望 Prev 和 Next 按钮在左侧,Save 和 Cancel 按钮在右侧,是否可以不求助于 window-pane
class?
你可以在里面行动 the create event:
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>