2011-09-15 2 views
4

이것은 간단한 프로젝트 일 것이라고 생각했지만 훨씬 더 복잡해 보입니다. 검색된 보 전체 페이지를 차지하는 jQuery UI 탭을 만들려고합니다. 따라서 탭의 너비와 높이는 브라우저 크기로 설정해야합니다.jQuery UI 탭 : 탭을 전체 페이지 크기로 설정

누구나 jQuery UI 탭을 사용하여 예제 또는 자습서를 제안 할 수 있습니까? http://jqueryui.com/demos/tabs/ 탭을 사용

답변

8

이 같은 탭과 각 탭에 대한 <div>을 정의하는 목록 둘러싸는 최상위 <div> 블록이 : 탭 위젯의 크기를 설정하려면

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a></li> 
     <li><a href="#tabs-2">Tab 2</a></li> 
    </ul> 
    <div id="tabs-1">Tab 1 Content HERE</div> 
    <div id="tabs-2">Tab 2 Content HERE</div> 
</div> 

를 추가 상단 <div>에 스타일 (속성이나 CSS를)

<div id="tabs" style="width:100%; height:100%"> 

정확히 당신이 원하는 페이지 레이아웃에 따라 달라집니다 적용해야 어떤 스타일.

+0

저는 많은 시간을 들여 답을 찾을 때까지 작동하지 않는 많은 복잡한 해결책을 보았습니다. –

+0

최신 jQuery (3.1)를 사용하여 더 이상 작동하지 않는 이유가 있습니까? 높이를 픽셀 단위로 설정할 수는 있지만 퍼센트는 아무 것도하지 않습니다. – Jodes

+0

@Jodes 같은 코드/다른 lib 버전으로 한 쌍의 예제를 함께 넣을 수 있습니까? – MrTrick

관련 문제