jquery 레이아웃 용 사용자 정의 토글러

Question

layout.jquery 플러그인을 사용하고 있습니다. Wast Pane 용 사용자 정의 토글 러를 만들려고합니다. 회전식 텍스트 div를 토글러로 만들려면 어떻게해야합니까? 아래 첨부 된 이미지를 참조하십시오.

JSFIDDLE :https://jsfiddle.net/kap0e06s/3/

HTML :

<div class="myDiv" style="height:400px"> 
    <div class="ui-layout-center">Center</div> 
    <div class="ui-layout-north">North</div> 
    <div class="ui-layout-south">South</div> 
    <div class="ui-layout-east">East</div> 
    <div class="ui-layout-west">West</div> 
</div> 

JS :

$('.myDiv').layout({ 
    resizeWhileDragging: true, 
    sizable: false, 
    animatePaneSizing: true, 
    fxSpeed: 'slow', 
    west__spacing_closed: 0, 
    west__spacing_open: 0, 
    north__spacing_closed: 0, 
    north__spacing_open: 0, 

    }); 

Answer 1

것은 죄송합니다 ... t를 만들 수 없습니다 그는 제대로 jsfiddle. 다음은 수정 된 코드 : JS :

 // OUTER-LAYOUT 
    $('.myDiv').layout({ 
     resizeWhileDragging: true, 
     sizable: false, 
      livePaneResizing:   true, 
     animatePaneSizing: true, 
     fxSpeed: 'slow', 
     west__spacing_closed: 0, 
     west__spacing_open: 0, 
     north__spacing_closed: 0, 
     north__spacing_open: 0, 

     east__spacing_open: 50, 

    }); 

CSS :

사용자 정의 toggler에 사용할 수있는 옵션들이있다

 body { 
     background-color: white; 
    } 

    .ui-layout-center, 
    .ui-layout-north, 
    .ui-layout-south, 
    .ui-layout-east, 
    .ui-layout-west { 
     border: 0px; 
    } 

    .ui-layout-toggler{ 
     background-image: url("http://placehold.it/50/ff9933/ffffff?text=Panel"); 

     } 

Answer 2

.

먼저 CSS를 사용하여 실제 회전 된 텍스트와 배경색 또는 텍스트/탭 이미지 중 하나를 선택해야합니다. 당신이 선택에 따라, 방법은

이미지가 TOGGLER 방법

이미지를 사용하는 경우, CSS와 함께이를 할당 ... 다르다. 원하는 경우 창 열기 및 닫기 상태에 대해 서로 다른 이미지를 사용할 수 있습니다.

는 ... togglers 또는 resizers/스플리터 등을위한 일반적인 클래스에 '측면'를 추가, 레이아웃의 특정 창을 대상

.ui-layout-resizer-west 
.ui-layout-toggler-west 

상기 특정 '상태를 대상 선택기를 좁히려

'는 toggler 요소가 들어있는 리사이 바의 경계를 넘어 확장

.ui-layout-toggler-west-open 
.ui-layout-toggler-west-closed 

... 같은 상태를 추가 (옵션은 0 픽셀 폭으로 설정) 때문에 오버 플로우 CSS가 설정되어 있는지 확인 이것을 허용합니다. 이것은 이미지 메서드 또는 회전 된 텍스트 메서드를 사용하는 경우에도 적용됩니다.

다음은 함께 사용하는 샘플 CSS입니다. 일부 속성은 레이아웃에 의해 요소에 하드 코딩 스타일을 대체 할 '중요한'이 필요하다는 여기

.ui-layout-resizer-west { 
    overflow: visible !important; 
} 
.ui-layout-toggler-west { 
    backgound: url(close-panel-image.png) center; 
    width: 16px; 
} 
.ui-layout-toggler-west-closed { 
    backgound-image: url(open-panel-image.png); 
} 

은 당신의 질문은 이미 보여 그뿐만 아니라, 관련 레이아웃 옵션은 ... 있습니다.

togglerLength_open: 50, 
togglerLength_closed: 50 

는 그 이미지의 배경을 사용하여 경우 어떻게해야 ... 레이아웃이 제대로 리사이 바의 내부를 중심으로 할 수 있도록 toggler 요소의 높이/길이는 CSS보다는 여기에서 설정해야합니다 .

또한 toggler 요소 내에 텍스트 또는 HTML 를 삽입 할 수 있습니다

회전 TEXT 방법. 토글러는 자동 생성되므로 옵션에이 내용을 지정합니다.

CSS는 거의이 방법에 대한 동일하지만 대신 배경 이미지의 원하는 서식 색상과 글꼴을 지정 ...

.ui-layout-resizer-west { 
    overflow: visible !important; 
} 
.ui-layout-toggler-west { 
    backgound-color: orange; 
    color: white; 
    font-size: 12px !important; 
    font-weight: bold; 
    transform: rotate(-90deg); 
    width: 16px; 
} 

는 이전 버전의 브라우저를 지원하는 변환을 위해 브라우저 접두사를 추가하려면; 당신이 모두 개방과 폐쇄 상태에 대한 동일한 텍스트를 원한다면 ... https://css-tricks.com/snippets/css/text-rotation/

당신이 레이아웃 옵션에서 원하는 텍스트를 지정

togglerLength_open: 50, 
togglerLength_closed: 50, 
togglerContent_open: 'CLOSE', 
togglerContent_closed: 'PANEL' 

를 참조, 나는 당신이 단지 togglerContent 옵션을 사용할 수 있습니다 생각합니다. 원하는지 확인하기 위해 테스트 할 수 있습니다.

열거 나 두 가지 방법 중 하나를 사용하여 패널을 닫을 때 마지막으로, 당신은 추가 로직을 추가 할 수 있습니다 ..

1. 사용하여 표준 콜백. 여기에는 onclose_start과 같은 옵션이 포함되어 있으므로 은을 중단 할 수 있습니다.

2. 레이아웃을 만든 후에는 표준 jQuery를 사용하여 표준 클릭 이벤트를 바인딩 해제 한 다음 나만의 이벤트를 추가하십시오. 둘 이상의 버튼/동작이 포함 된보다 복잡한 사용자 정의 토글 러를 사용하는 경우 필요합니다. 이러한 토글 러의 샘플은 레이아웃 웹 사이트에서 찾을 수 있습니다.