2011-02-19 3 views
9

portlet function of JQuery UI을 사용하여 기본 포털 페이지를 만듭니다. JQuery UI 페이지의 예제는 3 개의 열과 해당 열에 맞는 고정 크기의 포틀릿이있는 매우 간단한 예를 보여줍니다. 다양한 크기의 포틀릿을 사용할 수 있도록이 방법에 접근 할 수있는 방법이 있습니까?JQuery 포틀릿 - 다양한 포틀릿 크기를 가질 수 있습니까?

1) 하나의 포틀릿이 모든 3 열에 걸쳐 (3 * 1) 2) 어느 2 * 1 포틀릿 및 하나의 1을 가지고 : 난 3 열이 있으면

특히 내가 수하고자 * 1 포틀릿이 같은 행에 있으므로 3 열 모두를 사용합니다. 3) 변형이 있습니다.

당신에게

JP 감사

사람이 나에게 어떤 포인터를 줄 수 있다면 크게 감사하겠습니다은

답변

14

http://jsfiddle.net/93F2T/

display as a grid 기준으로합니다. 정렬 가능한 것을 하나 사용하고 충분한 공간이 없을 때 포틀릿을 다음 줄로 줄이십시오.

.portlet { 
    display: inline-block; 
    vertical-align: top; 
} 
+0

알렉세이, 나는 sortables 예를 통해 들어 왔지만 솔루션과 함께 다음과 같은 문제 : 1) 그들은 기술적으로 포틀릿이 닫는에 대한 포틀릿의 기능 (제목 표시 줄, 아이콘의 번호를 누락 된 것으로 나타 붕괴를 등등.) 2) 당신이 제공 한 예제에서 꽤 많은 것들이 코딩되어 있습니다. 세 번째 행 (1,2와 유사)을 추가하고 두 행 사이에서 항목을 이동하려면 어떻게해야합니까? 마찬가지로, 귀하의 예제를 재정렬하려면 div 3을 이동해야합니다 (div 3보다 div 1과 div 2를 움직일 수 없음). –

+0

1) 일을 이해하기 쉽도록 만들고, 포틀릿으로 대체하기 위해이 작업을 수행했습니다. 2) 모든 것을 하나의 sortable에 넣거나 jQuery draggables없이 자신의 솔루션을 코딩해야합니다. –

+0

대우를 받았습니다, 감사합니다! –