0

有没有办法让 jQuery [UI]就地创建对话框？还是轻松将其移回并使其正常工作？

YUI2 的面板让您可以自由地执行此操作，它假定您知道自己在做什么，并将标记准确地留在您放置的位置。
但是现在我已经开始使用更简单的 jQuery，我注意到了一个限制；jQuery UI 似乎只在body.

考虑这个例子；
假设您想使用 div 作为命名空间 css 的一种方式。
通过为所有选择器添加前缀来编写与功能相关的样式表.className，并在 div 中添加标记class="className"。

Some

<div class="sectiona">
    <div class="popup" title="A popup">
        This text should be <span class="emphasis">blue</span>
    </div>
</div>

irrelevant

<div class="sectionb">
    <div class="popup" title="B popup">
        This text should be <span class="emphasis">red</span>
    </div>
</div>

content

<script>$(function() { $('.popup').dialog(); });</script>

.emphasis {
    color : yellow;
}

.sectiona .emphasis {
    color : blue;
}

.sectionb .emphasis {
    color : red;
}

弹出的 div ( .popup) 将被移动到 body 中，丢失所有的 css！（显然在现实生活中会更复杂）。由于所有对话框/面板都是绝对定位的，并且我希望它们保留的 div 具有静态位置并且是 body 的子级，因此将它们保留在那里根本没有任何区别。

不要将这种 css 命名空间技术（如果这甚至是正确的措辞）作为想要这个的唯一原因，我敢肯定还有其他用例

4

1 回答 1

1

有一个appendTo选项，您需要为每个单独的弹出窗口指定它：

// HTML
// added a common "section" class to your divs
Some
<div class="section sectiona">
    <div class="popup" title="A popup">This text should be <span class="emphasis">blue</span>
    </div>
</div>
irrelevant
<div class="section sectionb">
    <div class="popup" title="B popup">This text should be <span class="emphasis">red</span>
    </div>
</div>
content

// javascript
$('.section').each(function () {
    $(this).find('.popup').dialog({
        appendTo: this
    });
});

小提琴

于 2013-09-24T08:47:46.160 回答