jquery - 如何将 jQuery UI 对话框包装在 div 容器中？

Question

我的 web portlet 正在部署到 liferay 环境，这意味着有多个 jQuery css 主题。我一直在解决多主题问题的方法是用我自己的类包装我的 portlet，并将该类作为容器添加到 jquery-ui css（例如，使用.my-portlet .ui-dialog {}）。

但是，当我使用 jQuery UI 创建对话框时，对话框容器被赋予了 class .ui-dialog，因此主题变成了 liferay 使用的任何主题。我的解决方案是在我自己的 div 中使用“my-portlet”类包装对话框，这应该会导致它使用我自己的 ui 主题。

我该怎么做呢？Using$(#item).dialog()自动将ui-dialog类应用为头容器。我真的不想修改 jQuery 代码。

score 3 · Accepted Answer

如果您没有需要移动到不同包装器的不同对话框，那么您可以简单地使用

$('.ui-dialog').appendTo('#wrapper');

score 2 · Accepted Answer

您可以使用appendTo但您必须拥有 jquery-ui 1.10.0 或更高版本

$( ".selector" ).dialog({ appendTo: "#someElem" });

检查 jquery-ui 文档。

score 1 · Accepted Answer

在 jQueryUI 1.10 之前，所有对话框都自动包装在一个<div>容器中，然后移动到 DOM主体元素中。

如果您希望它位于 DOM 中的其他位置，则必须在另一个元素中重新设置它的父级。为了使事情进一步复杂化，您还必须重置其draggable属性：

var dlg = $('#item').data('dialog').uiDialog;
$(dlg).appendTo('#newparent');
$(dlg).draggable('option', 'containment', 'parent');

我怀疑这种方法对您没有帮助，但如果您的意图是在 jQuery UI 提供的容器周围包装一个额外的容器 div。

或者，您可以在创建对话框时使用该dialogClass选项向对话框容器添加额外的类。

score 0 · Accepted Answer

如果你尝试这样的事情怎么办？

$('#item').dialog().wrapAll('<div class="my-portlet"></div>');

4 回答 4