Question

我在配置jquery UI.Layout插件时遇到了一些困难。当我阅读文档时，这一切似乎都很简单，但是......事情不起作用。

我正在使用当前版本的插件1.3.0我相信，并且谷歌cdn 1.5.1的jquery。对于jquery ui而言，如果重要的话，则为1.8.10。

首先，当页面加载时我会弹出一个弹出窗口：

布局容器“DIV / #content”没有高度。因此布局是0高度，因此'隐形'！

这似乎是一个合理的错误消息所以我修改了我的CSS以提供#content {height：100％;}并清除了浏览器缓存但是没有，问题仍然存在。

第二个问题：虽然调整器栏实际存在（我可以在firebug中看到它，并且只要我知道它在哪里与它交互），似乎应该有一些匹配的css文件与库调整大小。然而，UI.Layout页面上的演示似乎没有任何CSS，它们工作正常！例如，我想要的就是这样，http://layout.jquery-dev.net/demos/example.html，当我查看源代码时，没有样式或没有包含css。

我错过了什么？

Answer 1

这真的很难记录..我在墙上敲打着我的头，直到我尝试了这个....你需要设置一个CSS规则，明确说明你的“容器”的垂直高度..或者那个恼人的警报将会爆发......很可能你的南方窗格不会出现......希望这会有所帮助！

html, body, #myContainer { 
    width:  100%; 
    height: 100%; 
    overflow: hidden; 
}

Answer 2

如果您的div最初为空，则上一个答案将无法正常运行。以下是诀窍，没有显示滚动条：

#myContainer {
    width : 100%;
    height : 100%;
    position:absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

Answer 3

也许这才是真正的原因。 https://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple：

render : function () {
    this.$el.html(this.template(options));
    return this;
}

这是有道理的，如果你从不处理子视图，那就完美无缺。但是一旦你需要子视图 - 在任何真正的应用程序中似乎很早就会发生 - 你会意识到jQuery的.html（）首先调用.empty（），它解除了所有子节点上所有jQuery事件的绑定。因此，第一次渲染（）时一切正常，但只要再次调用它，子视图中this.events中定义的所有事件都将被解除绑定。

UI.Layout jquery插件

3 个答案: