Question

我正在使用JQuery UI对话，它呈现以下HTML。我希望按钮包含在span标签中。在调用对话时，有没有一种简单的方法可以做到。

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span class="ui-dialog-title" id="ui-id-20">
    </span>
    <button title="close" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false">
    </button>

由于

Answer 1

根据jQuery UI documentation，您可以将事件绑定到dialogopen事件：

$('#YourDialog').one('dialogopen',function(e,ui){
    $('button[title="close"]').wrap('<span></span>');
});

请注意.wrap()函数的使用，它允许您使用您选择的任何HTML包装所选元素。我还使用了.on()而不是.one()，因此事件不会多次触发（否则每次打开时都会包装该元素）。

Answer 2

是的，你可以这样做（Example）

var dlg = $('#d1').dialog({
    "title":"Dialog",
    "buttons":{ "OK" : function(){ $(this).dialog('close'); } }
});

// Find buttons and wrapp then with span
dlg
.closest('div.ui-dialog')
.find('button').wrap('<span class="btnWrapper"></span>');

顺便说一下，如果你想要这样的东西，你可以check this too，它可能很有用，它需要jQuery UI version - 1.10.0。

更改jquery UI对话标题栏HTML

2 个答案: