jquery - 在 Liferay 中使用 jQuery UI 布局插件

Question

我用了jQuery UI使用 3 个可调整大小的面板创建基本布局。我想在 Liferay 6.2 中使用这个布局。

Basic layout

在 liferay-portlet.xml 中，我包含了所有的 css 和 js 文件。

    <header-portlet-css>/styles/layout-default.css</header-portlet-css>
    <header-portlet-css>/styles/main.css</header-portlet-css>
    <header-portlet-javascript>/scripts/jquery-1.9.1.js</header-portlet-javascript>
    <header-portlet-javascript>/scripts/jquery-ui-1.9.2.min.js</header-portlet-javascript>
    <header-portlet-javascript>/scripts/jquery.layout.min-1.3.0.js</header-portlet-javascript>
    <footer-portlet-javascript>/scripts/set.layout.js</footer-portlet-javascript> 

set.layout.js

$(document).ready(function () { 

      // OUTER-LAYOUT
      $('#mainLayout').layout({
        center__paneSelector: "#rightPanel",
        west__paneSelector:   "#filter",
          west__size: 250,
        // MIDDLE-LAYOUT (child of outer-center-pane)
        center__childOptions: {
          center__paneSelector: "#graph",
          south__paneSelector:  "#details",
          south__size:      250
        }
      });

}); 

index.jsp 内容基本上类似于 jsfiddle 片段中的 html 内容。我在浏览器控制台日志或 tomcat 日志中没有收到任何错误，但布局未正确呈现。布局底部缺失。

Answer 1

这可能是 css 问题，您是否尝试将 Html/body 的高度设置为 100%？

CSS

html {
    height:100%;
}

或者如果这不起作用

html,body {
    height:100%;
}