jQuery UI를 스크롤하는 방법은 무엇입니까?

나는 div가 600px X 150px이고 거기에 jQuery UI 탭을 붙여 넣어야합니다. 탭은 2 개 밖에 없지만 각 탭에는 많은 텍스트와 이미지가 포함되지만 div의 크기를 조정하는 것은 원하지 않습니다. div 또는 .ui-tabs에 CSS에서 오버플로 옵션을 삽입하면 div에서 2 개, 탭에서 2 개 스크롤되고 모든 탭 패널이 스크롤됩니다. 질문 : 탭 내용에 세로 스크롤을 삽입하는 방법은 무엇입니까?jQuery UI를 스크롤하는 방법은 무엇입니까?

미리 감사드립니다.

출처

2010-07-23 dsplatonov

나는 당신의 질문을 올바르게 이해한다면 나는 당신을위한 해결책이 있다고 생각합니다. jsFiddle에 live example이 있습니다.

전체 탭 요소에 적용되는 클래스와 각 탭 패널에 적용되는 클래스의 두 클래스를 추가했습니다.

.container{ 
    width: 600px; 
} 
.panel{ 
    height: 150px; 
    overflow: auto; 
}

는합니다 (container 클래스는 또한 당신이 jQuery를 UI ui-tabs 클래스에 추가하는 것이 너무 ui-tabs로 이름이 변경 될 수 있고, panel 클래스는 당신이 jQuery를 UI ui-tabs-panel 클래스에 추가하는 것이 너무 ui-tabs-panel로 이름이 변경 될 수 있습니다.)

여기

는

<div class='main'> 
    <div id="tabs" class='container'> 
     <ul> 
      <li><a href="#tabs-1">Tab 1</a></li> 
      <li><a href="#tabs-2">Tab 2</a></li> 
     </ul> 
     <div id="tabs-1" class='panel'> 
      <p>tab1 text...</p> 
     </div> 
     <div id="tabs-2" class='panel'> 
      <p>tab2 text...</p> 
     </div> 
    </div> 
</div>

내가 어떤 jQuery를 UI 탭 마법이를 연결하면 ... 내가 사용하는 마크 업입니다 :

$(document).ready(function() { 
    $("#tabs").tabs(); 
});

탭 안에 하나의 스크롤 막대가 있습니다.

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

출처

2010-07-23 19:30:19

감사합니다. 그것이 내가 필요한 것입니다. – dsplatonov

CSS 스타일러스 시트에 CSS 코드를 추가하는 것만으로 ui-tab-content 클래스에 CSS를 사용하십시오.

.ui-tab-content, .ui-tabs-panel{overflow: auto;}

감사

출처

2010-07-23 19:57:33 Muhit

jQuery UI를 스크롤하는 방법은 무엇입니까?

답변

관련 문제