Liferay로 jQuery UI 레이아웃 플러그인 사용

jQuery UI을 사용하여 3 개의 크기 조정이 가능한 패널로 기본 레이아웃을 만들었습니다. Liferay 6.2에서이 레이아웃을 사용하고 싶습니다.Liferay로 jQuery UI 레이아웃 플러그인 사용

는 을 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 로그에 오류가 발생하지 않지만 레이아웃이 올바르게 렌더링되지 않습니다. 레이아웃의 맨 아래 부분이 누락되었습니다.

enter image description here

출처

2014-12-15 Matt

jQuery UI 레이아웃을 제거하고 다른 요소로 바꾸면 HTML 요소가 여전히 윈도우의 일부만 채우는 것입니까? 어딘가에서 귀하의 사이트를 호스팅하고 링크를 제공 할 수 있습니까? – Trevor

예, Liferay 덕택에 jQuery UI 레이아웃 플러그인 기본 레이아웃을 사용하지 않아도 윈도우의 일부만 채울 수 있습니다. 포털을 호스팅 할 수는 없지만 .war 파일을 제공 할 수 있습니다. https://www.dropbox.com/s/kec9l1hs5acn89s/jqUI-1.0-SNAPSHOT.war?dl=0 – Matt

CSS는 문제가 될 수있다, 당신은 100 %에 HTML/신체의 높이를 설정 시도이?

CSS

html { 
    height:100%; 
}

또는 경우

는 #mainLayout의 DIV의

html,body { 
    height:100%; 
}

출처

2014-12-19 18:27:34 Trevor

응답 해 주셔서 감사합니다. 예, 시도했지만 도움이되지 않았습니다. – Matt

@Matt는 내가 볼 수 있도록 사이트를 온라인 상태로 만들 수 있습니까? – Trevor

죄송하지만 포털을 호스팅 할 수 없습니다. – Matt

내가 설정하지 않은 높이를 작동하지 않고 있기 때문에 트레버의 대답이 실현.

출처

2014-12-19 22:35:01 Matt

Liferay로 jQuery UI 레이아웃 플러그인 사용

답변

관련 문제