1

我有一个 HTML 表单，我想在我的网站中多次使用它，所以它被打包在一个视图中，每次我想使用它时，我都会加载相同的视图。有时我在作为模式工作的jquery 对话框小部件中使用它。

由于我已经在表单中定义了一个标题，我想将其用作对话框标题栏，默认替换那个标题栏。但是我想保留默认功能：关闭按钮和可拖动的事实。

原始的 HTML

<div id="form-info">
    <p class="title">The title</p>
    <form>
        <!--the form-->
    </form>
</div>

dialog()jQuery运行后的html

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">&nbsp;</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
    <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button>
</div>
<div id="form-info" class="ui-dialog-content ui-widget-content">
    <p class="title">The title</p>
    <form>
         <!--the form-->
    </form> 
</div>

我想达到的目标：

<div id="form-info" class="ui-dialog-content ui-widget-content">
    <p class="title ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        The title
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"></button>
    </p>
    <form>
         <!--the form-->
    </form> 
</div>

span里面的标签ui-dialog-titlebar是可选的，我不需要它们，但我不在乎 jQuery 是否把它们放在那里。

我发现了很多关于隐藏标题、使用 CSS 自定义标题、隐藏关闭按钮的问答......但没有什么比这更重要的了。

4

1 回答 1

0

如果您不需要其他地方的段落，您可以将标记更改为

<div id="form-info" title="The title">
<form>
    <!--the form-->
</form>
</div>

或者，如果您需要它，您可以像这样在对话框的打开事件期间移动标题

$("div#form-info").dialog({
    autoOpen: true,
    open: function() {
             var $formTitle = $("p.title", this);
             $(this).prev().find(".ui-dialog-title").text($formTitle.text());
             $formTitle.remove();
    }
});

有关工作示例，请参阅此JSFiddle

于 2013-10-21T13:38:59.933 回答