여러 줄의 탭을 잘 처리하는 Jquery 탭 컨트롤이 있습니까?

Question

2에서 20 사이의 동적 탭 수가있는 웹 응용 프로그램이 있습니다.

현재 Jquery UI의 탭 플러그인을 사용하고 있지만 그 동작이 이상적이라고 생각하면 (예 : 약 12 ​​개의 탭 두 번째 탭 줄은 탭 선택과 함께 이동하며 두 줄 대신 3 줄 건너 뛰기가 있습니다.

두 번째 질문입니다. 두 번째 줄의 탭을 어떻게 멈출 수 있는지 처음부터 알기 쉽습니다.

또는 여러 줄의 탭을 처리하는 jQuery 용 탭 플러그인을 아는 사람이 있습니까 (만약 내가 찾을 수없는 경우). 해상도 ExtJS 또는 비슷한 것을 사용하여 끝날 수도 있지만이 응용 프로그램을 상당히 가볍게 유지하려고했습니다.

,이 문제가있는 스타일이 밝혀 이것은 내가 사용 된 JQuery와 UI 테마에 의해 발생되고 있었다 추가 조사 후 대답

했다

:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: .1em; border-bottom: 0; } 

난 그냥 패딩 바닥을 제거 : .1em 그리고 문제를 해결합니다 (단서는 요소의 두 번째 행이 선택 사항이 변함에 따라 움직이는 것이 었음).

Answer 1

확장자가 전혀 필요하지 않습니다. 스타일이없는 UL로 플로팅 LI를 사용하기 만하면됩니다. LI는 제대로 포장해야합니다. 일반적으로 같은 탭에서 단어를 보장하는 것이 좋습니다 (""를 " "으로 바꿈).

내 사용자 지정 탭 컨트롤은 ASP.Net에서 동적으로 작성되지만 탭 및 숨기기/표시 기능은 모두 jQuery입니다.

<div id="tabWrapper"> 
    <ul id="tabContainer"> 
     <li>Tab&nbsp;1</li> 
     <li>Tab&nbsp;2</li> 
     <li>Tab&nbsp;3</li> 
    </ul> 
</div> 

기본 CSS

#tabWrapper 
{ 
    border-bottom: solid 1px #676767; 
} 

#tabContainer 
{ 
    padding:0; 
margin:0; 
    position:relative; 
    z-index: 1; 
    float:left; 
    list-style:none; 
} 

#tabContainer li 
{ 
    float:left; 
    margin:0; 
    cursor: pointer; 
    background: f1f1f1; 
    border-top: solid 1px #676767; 
    border-left: solid 1px #676767; 
    border-right: solid 1px #ababab; 
    margin-bottom: -1px; 
} 

#tabContainer .selected, #tabContainer .selected:hover 
{ 
    background: #fff; 
} 

Answer 2

아니 기술적 솔루션,하지만 Nielsen 강력 탭의 여러 행에 대해 권장 것을 명심 :

이

탭의 한 행이있다. 복수 개의 행이 점프 UI 요소를 생성합니다.이 요소는 공간 메모리를 없애며 사용자가 이미 방문한 탭을 기억할 수 없습니다. 물론 여러 행은 과도한 복잡성이있는 확실한 증상입니다. 단일 행에 적합하지 않은 것보다 더 많은 탭이 필요한 경우 을 단순화해야합니다.

-Tabs, Used Right: The 13 Usability Guidelines

Answer 3

이 문제는 jQuery를 UI의 이슈 트래커에 described in a bug report입니다. 그 버그 보고서에서 나는이 문제를 해결하는 패치를 첨부했는데 .ui-tabs-nav 테두리는 선택되지 않은 탭 아래에 유지했습니다. 건배.

Answer 4

다음은 여러 줄의 정렬 가능한 탭에 유용하다는 것을 알게되었습니다. 내가 가지고있는 문제 중 하나는 axis: 'x'이 지정되지 않았다면 탭이 제대로 클릭되지 않았지만 선 사이를 드래그 할 때보기가 흉하게 보였기 때문입니다.

나는 다음과 같이이 문제를 개선하기 위해 관리 :

$('#tab-container') 
    .sortable({ 
     delay  : 200, 
     distance : 20, 
     axis  : 'x' 
    }) 
    .on('sort sortchange', function() { 
     $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px'); 
    }); 

Answer 5

내가 두 번째 라인에 위반하는 경우 렌더링 방식 탭을 좋아하지 않았다, 그래서 대신 "더 볼"탭을 소개하는 플러그인을 썼다 두 번째 줄을 끊는 것.

https://github.com/jasonday/plusTabs

Answer 6

가 완전히 문제를 해결하는 데 사용할 수있는 큰 응답을 많이하지만 여기 내 자신의 ¢ 2입니다.

문제를 크게 단순화하려면 <hr> 스타일을 추가하여 탭의 행을 구분할 수 있습니다. 내 생각에 이것은 열린 행을 갖는 것보다 더 멋지게 보인다.