jquery - 我可以使 JQuery UI 布局在列中居中吗

Question

我是 JQuery UI 的新手，我已经了解了布局一直延伸到页面边缘的基本示例。我想要的是这种布局，但内容位于居中的列中，并且您可以在每一侧看到背景颜色。所以我用一些非常简单的 CSS 在外部添加了一个 div，如下所示:

.frame
{
   width:900px; 
   margin:0 auto;
}

<div class="frame">
    <div class="ui-layout-north">
    </div>
    <div class="ui-layout-center">
    </div>
    <div class="ui-layout-east">
    </div>
    <div class="ui-layout-west">
    </div>
    <div class="ui-layout-south">
</div>

唉，我没有像普通的 div 那样工作，而是得到一个弹出窗口，上面写着:

UI Layout Initialization Error

The center-pane element does not exist.

The center-pane is a required element

为什么会这样，我该如何解决？

提前致谢，请记住，我可能犯了一个非常愚蠢的错误。 :)

Answer 1

可能你还在申请layout()到文档正文:

$("body").layout({
    // options...
});

在那种情况下，布局引擎将找不到 Pane 元素，因为它们不驻留在正文本身中。一个解决方案是应用 layout()到你的 wrapper <div>元素代替:

$("div.frame").layout({
    // options...
});