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

StackOverflow https://stackoverflow.com/questions/624516

문제

내가 있는 웹 응용 프로그램을 동적의 번호 탭을 사이에 이르기까지 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; }

나는 그냥 제거 padding-bottom:.1em 고 그것을 문제를 해결하(단서는 두 번째 열의 요소가 따라 움직이는 선택과 변경).

도움이 되었습니까?

해결책

당신이 정말로 필요로하지 않는 확장에서 모두.사용 부동 리와 함께하는 스타일이 적용되지 않은 UL.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;
}

다른 팁

지 기술 솔루션이지만,염두에 두는 Nielsen 강력하게 권장하는 여러 행 탭:

거기에 하나의 행만의 탭이 있습니다.러 행을 만들 점프 UI 요소 파괴하는 공간 메모리고,따라서이 그것은 불가능한 사용자를 위해 기억하기 는 탭을 방문했습니다.또한,코스,여러 행 a 확실한 증상의 과도한 복잡성:더 필요한 경우 탭에 맞는 것 보다 단일 행해야 합를 단순화 디자인.

-- 탭을 사용:13 성 지침서

이 문제는 에서 설명하는 버그 보고서 에 jQuery UI 입니다.에는 버그 보고서가 첨부된 patch 는 이러한 문제를 해결하는 동안 보존 니다.ui-탭 탐색 테두리 아래에 아닌 선택 탭이 있습니다.환호를 받았다.

내가 좋아하지 않은 방법으로 탭을 렌더링할 때 파괴하는 두 번째 라인은,그래서 나는 플러그인을 소개하는"더보기"탭에서 대신의 파괴하는 두 번째 라인입니다.

https://github.com/jasonday/plusTabs

내가 찾는 다음과 같은 유용한 정렬 탭에 여러 줄이 있습니다.문제 중 하나는 탭을 클릭하지 않았으로 제대로 배치지 않으면 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');
    });

의 많은 훌륭한 답변을 사용할 수 있는 완전히 문제가 해결 하지만 여기에 내 자신의¢2.

하여 크게 문제를 단순화할 수 있습 추가 <hr> 스타일로 당신이 좋아하는 별도의 행 탭이 있습니다.내 생각에 이것은 또한 보이는 것보다 더 좋을 갖는 열의 행이 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top