0

我正在使用 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>

谢谢

4

2 回答 2

0

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

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

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

于 2013-11-04T15:52:55.203 回答
0

是的，你可以做这样的事情（示例）

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>');

顺便说一句，你也可以检查一下，如果你想要这样的东西可能会很有用，它需要 jQuery UI version - 1.10.0。

于 2013-11-04T16:38:05.400 回答