2013-07-30 3 views
2

닫을 때 특정 치수에서 ui-layout-west 창의 너비를 설정하려고합니다. 기본적으로 "토글 러"를 누르면 this example에서 볼 수 있듯이 창은 완전히 닫힙니다. 내가 원하는 것은 "서쪽 구역"을 "40px"로 설정하고 여전히 내용의 일부를 유지하는 것입니다. 현재이 물마루 CSS를 설정할 수 있지만 서쪽 창은 사라집니다. 더 잘 이해하려면 my JsFidle example을 참조하십시오.닫을 때 JQuery 레이아웃 고정 너비

div.ui-layout-resizer.ui-layout-resizer-west.ui-layout-resizer-closed.ui-layout-resizer-west-closed { 
    left: 40px !important; 
} 

이 효과를 가장 효과적으로 얻으려면 어떻게해야합니까? 가능한 한 JQuery 플러그인 설정에 의존하고 CSS는 적게 사용하고 싶습니다.

답변

2

나는 닫힌 상태가 닫히고 사라 졌음을 의미하므로 여전히 프레임을 볼 수 없다고 생각합니다. 내가하고 싶은 것을 정확히 이해했다면, 커스텀 코드로 클로즈 액션을 오버라이드 (override)함으로써 가짜로 만들 수 있습니다.

이 작업에는 onclose_start 콜백을 재정의하고 크기를 설정 한 다음 false를 반환하여 창을 닫지 않도록합니다. 이는 시스템이 우려하는 한 창은 실제로 닫히지 않는다는 것을 의미합니다.

아래 코드는 모든 것을 수행하며, 이전 변수를 저장하는 서쪽 창 상태 객체에 새로운 변수를 만듭니다. 생성 기능의 시작 부분에 정의되어 있습니다 (시스템이 정의되지 않은 경우 불평하지는 않지만). 전역 변수 나 다른 저장 장치를 사용할 수도 있습니다. 서쪽 등을 위해 일하는 것뿐만 아니라 더 일반적인 기능을 만들 수 있습니다.

정확하게 작동하는 방법을 잘 모르겠다면 if 조건을 이용해야 할 수도 있습니다.

$(document).ready(function() { 
    var mylayout = $("body").layout(
     {west: { 
      minSize: 40, 
      onclose_start: function() {      
       var closed_size = 40;   
       var current_size = mylayout.state.west.size; 

       if (current_size <= closed_size) { 
        mylayout.sizePane('west', mylayout.state.west.old_size);      
       } else { 
        mylayout.sizePane('west', closed_size);      
        mylayout.state.west.old_size = current_size; 
       }      
       return false; 
      }} 
     }); 
    mylayout.state.west.old_size = mylayout.state.west.size; 
    }); 
+0

고맙습니다! 그것은 작동합니다. 이제는 완전히 닫을 수 있도록 세 번째 옵션 만 삽입하면됩니다. –