jQuery 스플리터 문제 div가 크기 조정되지 않음

스플리터에 jQuery 플러그인을 사용하고 있습니다 (http://methvin.com/splitter/4psplitter.html). 내 경우에는 두 개의 열이 수직으로 나뉘어져 있고 두 개의 열이 수평으로 나뉘어져 있습니다. 다른 게시물에서는 사람들이 다른 플러그인을 사용하여 언급 한 것을 보았습니다. 불행히도 다른 사람들이이 플러그인을 사용하도록 결정했습니다.jQuery 스플리터 문제 div가 크기 조정되지 않음

모든 스플리터가 나타나고 드래그 가능합니다. 그러나 수직 스플리터는 완벽하게 작동하지만 수평 스플리터는 드래그 가능하지만 크기가 조정되지 않습니다. 대신 하위 div는 위쪽 div의 위나 아래로 드래그하거나 바인딩되지 않은 것처럼 간격을 만듭니다. 나는 나의 배치를 아래에 배치 할 것이다.

불합리한 점은 splitters를 드래그하는 동안 camelCase 메서드에서 jQuery 라이브러리 (1.7.2)에서 최대 호출 스택 초과 오류가 발생한다는 것입니다.

더 많은 정보가 필요하면 알려주세요. 왜 이러한 정보가 작동하지 않는 지에 대한 총체적 인 손실이 있습니다.

html로 :

<div id="splitContainer"> 
     <div id="leftSplitter"> 
      <div id="leftSplitterTopPane"> 
       <div class="webpartHeader" style="border-bottom: 5px solid white;"> 
        <span class="webpartHeaderSpacer">Header</span> 
       </div> 
       <div id="LeftTop_Container" class="webpartBody" style="height: 200px; overflow: auto;"> 
        <br /> 
        <!--TopLeft--> 
       </div> 
      </div> 
      <div id="leftSplitterBottomPane" style="border-right:5px solid white;"> 
       <div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white; "> 
        <span class="webpartHeaderSpacer">Header</span> 
       </div> 
       <div id="LeftBottom_Container" class="webpartBody"> 
        <br /> 
        <!--BottomLeft--> 
       </div> 
      </div> 
     </div> 
     <div id="rightSplitter"> 
      <div id="rightSplitterTopPane"> 
       <div class="webpartHeader" style="border-bottom: 5px solid white;"> 
        <span class="webpartHeaderSpacer">Header</span> 
       </div> 
       <div id="RightTop_Container" class="webpartBody" style="height: 200px;"> 
        <br /> 
        <!--TopRight--> 
       </div> 
      </div> 
      <div id="rightSplitterBottomPane"> 
       <div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white;"> 
        <span class="webpartHeaderSpacer">Header</span> 
       </div> 
       <div id="RightBottom_Container" class="webpartBody"> 
        <br /> 
        <!--BottomRight--> 
       </div> 
      </div> 
     </div> 
    </div>

CSS의 :

#splitContainer { 
height: 469px; 
width: 100%; 
} 

#leftSplitter { 
height: 480px; 
width: 100%; 
} 

#rightSplitter { 
height: 480px; 
width: 100%; 
} 

#leftSplitterBottomPane div { 
overflow: auto; 
} 

#leftSplitterTop div { 
overflow: auto; 
} 

#rightSplittertopPane div { 
overflow: auto; 
} 

#rightSplitterBottomPane div { 
overflow: auto; 
} 

#splitContainer div { 
overflow: hidden; 
} 

.hsplitbar { 
height: 5px; 
background: #aaa; 
margin-bottom: 2px; 
} 

.vsplitbar { 
width: 5px; 
background: #aaa; 
top: 0; 
} 

#RightBottom_Container { 
height:187px; 
} 

#LeftBottom_Container { 
height:187px; 
}

자바 스크립트 :

$(document).ready(function() { 

    $("#leftSplitter").splitter(
    { 
     type: "h", 
     accessKey: "J", 
     resizeToHeight: true, 
    }); 

    $("#rightSplitter").splitter(
     { 
      type: "h", 
      resizeToHeight: true, 
      accessKey: "P" 
     }); 

    $("#splitContainer").splitter(
     { 
      type: "v", 
      outline: false, 
      sizeLeft: 250, 
      resizeToWidth: true, 
      accessKey: 'I' 
     }); 
});

개발 기간 동안 고정; 나중에 다른 언어로 리팩터링했다. 더 이상 적합하지 않습니다.

출처

2013-06-16 Anthony Mason

이 문제가 해결되었습니다. 컨테이너 div의 200px 높이의 인라인 스타일을 제거하여 문제를 해결했습니다. 나중에 jquery 및 종속성이있는 다른 라이브러리의 상위 버전으로 업그레이드하여이 문제를 해결했습니다. WPF/XAML은이 부분의 기초가되지 않아 관련성이 거의 없습니다.

출처

2013-06-17 16:31:56

jQuery 스플리터 문제 div가 크기 조정되지 않음

답변

관련 문제