Question

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

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

虽然如何做到这一点？使用$(#item).dialog()会自动将ui-dialog类应用为头部容器。我真的不想修改jQuery代码。

Answer 1

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

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

检查jquery-ui文档。

Answer 2

如果您没有不同的对话框，需要将其移动到不同的包装器，那么您只需使用

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

Answer 3

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

如果你想让它坐在DOM的其他地方，你必须在另一个元素中重新使用它。为了使问题更加复杂，您还必须重置其draggable属性：

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

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

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

Answer 4

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

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