我可以制作一个以列为中心的 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布局初始化错误

中心窗格元素不存在。

中心窗格是必需的元素

为什么会这样做，我该如何修复它？

提前致谢，请记住，我可能会犯一个非常低级的错误。 :)

Answer 1

您可能仍在将 layout() 应用于文档正文：

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

在这种情况下，布局引擎将找不到窗格元素，因为它们并不驻留在正文本身中。解决方案是将 layout() 应用于包装

元素：

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

Answer 2

根据您的最终目标，您可能想尝试扭转这一情况 - 将将布局居中的 div 放入 #ui-layout-center 中，并为其指定 margin: 0 auto;。