CSS/jQuery : 컨테이너 크기를 조정할 때 스크롤 영역을 올바르게 다시 크기 조정하려면 어떻게해야합니까?

jQuery를 사용하여 탭 영역을 표시하고 있으며 탭 아래에 테이블이 있습니다. 모든 것은, 탭과 테이블, 크기가 재조정 할 수 있습니다.CSS/jQuery : 컨테이너 크기를 조정할 때 스크롤 영역을 올바르게 다시 크기 조정하려면 어떻게해야합니까?

테이블에 스크롤 막대가 있으므로 컨테이너의 크기를 조정할 때 스크롤 막대의 크기를 조정할 수 있습니다.

지금은 두 가지 문제점이 있습니다.

1) 스크롤 막대가 탭 바로 아래에서 탭 컨테이너 개체의 맨 아래까지 연장되도록하고 싶습니다. 나는 사용자가 창 크기를 조정할 때 동적 인 것을 원한다. 하지만 스크롤 바의 아래쪽을 컨테이너 아래쪽에 정확하게 놓을 수는 없습니다.

2) 전체 컨테이너 (탭과 테이블)는 드래그 할 수 있습니다. 그러나 이것은 스크롤 막대의 드래그를 불가능하게하는 것 같습니다 (스크롤을 "드래그"할 수 없습니다. "엘리베이터".. 스크롤 막대의 화살표 나 "엘리베이터 샤프트"를 클릭해야합니다.) jQuery의 'handle'매개 변수가 작동하지 않습니다.

문제를 재현 할 수 있도록 모든 코드가 포함되어 있습니다.이 .htm 파일을 열고 창을 늘리십시오. .. 스크롤러 작업, 당신은 내 문제를 볼 수 있습니다 창 큰 스트레칭하게 스크롤러 풀 멀리 용기의 바닥에서

모든 시도하는 것은 매우 감사합니다 도움이하는

편집! -> I 스크롤 가능한 것을 표시하려는 나의 시도 영역에서 "탭 클릭"기능이 비활성화되었습니다. 아래 코드에는 실제로 세 가지 문제가 있습니다. 탭을 클릭하여 아무런 조치를 취할 수 없습니다. (당신이 그것을 클릭하면 하나 개의 탭으로, 내용이 명백하게 된 div의 내 오버레이가 그 기능을 끊었다. 숨겨야합니다!)

<html><head> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"> 
</script> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> 
</script> 


<style type="text/css"> 
#grid-tabs { 
    width: 720px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    height: 185px; 
} 
.outer-container{ 
    height:   100%; 
    position:  relative; 
    top:   -45px; 
} 
.filler{ 
    height:   60px; 
    position:  relative; 
    top:   -60px; 
} 
.inner-container{ 
    height:   auto; 
    overflow-y:  scroll; 
    position:  relative; 
    top:   -15px; 
} 
.scroll-area{ 
    height:   70%; 
    position:  relative; 
    top:   0px; 
} 
table{ 
    border:1px solid #62bbe8; 
} 
td { 
    width: 50px; 
} 

</style> 
</head><body> 

<div id='grid-tabs'> 
    <ul> 
    </ul> 

    <div class='outer-container'> 
     <div class='filler'> 
     </div> 
     <div class='inner-container'> 
      <div class='scroll-area'> 
      <table class='content'> 
       <tbody> 
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> 
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> 
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> 
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr> 
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr> 
        <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr> 
        <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr> 
        <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr> 
        <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr> 
        <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr> 
        <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr> 
        <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    jQuery('#grid-tabs').tabs({collapsible:true}).draggable().resizable(); 
    jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1"); 

</script> 
</body>

출처

2010-01-23 user254610

부드러운 크기 조정을 위해이 항목을 체크 아웃 할 수도 있습니다. http://stackoverflow.com/questions/244758/jquery-animation-smooth-size-transition/ – Daan

OK, 난 내 자신의 질문에 대답하고있다.

세 가지 문제를 해결하고 제대로 크기가 조정 된 스크롤 막대가있는 드래그 가능한 탭 영역을 만들 수있었습니다.

여기에 최종 코드가 있습니다. See it in action at JS Bin.

참고이 라인에 포함 된 마법 :

 jQuery('#grid-tabs').tabs({collapsible:true}) 
      .draggable({handle:'ul'}) 
      .resizable({alsoResize:'.container'});

alsoResize! 그게 속임수 야. 그리고 "ul"을 내 손잡이 (탭 섹션으로 드래그 할 수 있음을 의미)로 만들면 이제 스크롤 막대가 작동합니다.

Perfect! 이것이 도움이 되었기를 바랍니다.

<html><head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"> 
    </script> 
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> 
    </script> 


    <style type="text/css"> 
    #grid-tabs { 
     width: 720px; 
     overflow-x: hidden; 
     overflow-y: hidden; 
     height: 185px; 
    } 
    .container{ 
     height:   auto; 
     overflow-y:  scroll; 
     position:  relative; 
     top:   0px; /* changed */ 
    } 
    .scroll-area{ 
     height:   70%; 
     position:  relative; 
     top:   0px; 
    } 
    table{ 
     border:1px solid #62bbe8; 
    } 
    td { 
     width: 50px; 
    } 

    </style> 
    </head><body> 

    <div id='grid-tabs'> 
     <ul> 
     </ul> 

      <div class='container'> 
       <div class='scroll-area'> 
       <table class='content'> 
        <tbody> 
         <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> 
         <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> 
         <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> 
         <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr> 
         <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr> 
         <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr> 
         <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr> 
         <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr> 
         <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr> 
         <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr> 
         <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr> 
         <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr> 
        </tbody> 
       </table> 
       </div> 
      </div> 

    </div> 

    <script type="text/javascript"> 
     jQuery('#grid-tabs').tabs({collapsible:true}).draggable({handle:'ul'}).resizable({alsoResize:'.container'}); 
     jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1"); 

    </script> 
    </body>

출처

2010-01-24 11:58:43 user254610

CSS/jQuery : 컨테이너 크기를 조정할 때 스크롤 영역을 올바르게 다시 크기 조정하려면 어떻게해야합니까?

답변

관련 문제