Microsoft 스타일의 탭

최근에 여러 줄 탭에 대한 stackoverflow에 대한 질문을했습니다. 아래는 그냥 탭 스타일 창처럼을 할 경우 그 수 있을까요Microsoft 스타일의 탭

링크를, 즉 첫 번째 줄에있는 탭을 선택하면, 내가 두 번째 줄에 밀어 할 것입니다. 내가 가진 문제는 동적 탭을 만드는 것입니다. Javascript/jquery를 사용하여 각 탭의 너비를 계산하고 두 번째 탭 줄을 시작할 지점을 결정할 수 있습니까?

감사

출처

2011-02-23 DG3

는 다음 솔루션 난 당신을 준 이전 질문은 그렇지 않다는 정말 좋아요. – thirtydot

아마도 [Ext JS] (http://dev.sencha.com/deploy/dev/examples/#sample-5)와 같은 것이 더 적합 할 것입니다. 참조 : [http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv.html](http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv. html) – thirtydot

@thirtydot. 이 예가 유용했습니다. 이는 새로운 요구 사항입니다. 선택한 탭이 첫 번째 줄에 있으면 Javascript를 사용하여 선택한 탭의 위치를 두 번째 줄로 옮기고 싶습니다. 나는 여기에서 묻고있는 것이 현명한 소리가되기를 바란다. – DG3

업데이트탭 자동 크기 조정.

이 Chrome/FF

DEMO에 & 소스를 테스트 : 당신은 자바 스크립트를 사용하는 것이 행복 경우http://ask.altervista.org/demo/microsoft-styled-tabs/

$(function() { 
     setLines(); 
     $('#windows-properties li a').click(function(e) { 
     e.preventDefault(); 
     var $li = $(this).parent(); 
      $(this.hash).show().siblings('.property-content').hide(); 
      var liTp = parseInt($li.position().top); 
      if (liTp < lastLiPos) { 
       $('li.line-' + liTp).wrapAll('<div id="move-lis"></div>'); 
       $('#move-lis').insertAfter('#windows-properties li:last'); 
       $('li.line-' + liTp).unwrap(); 
       setLines(); 
      } 
      $li.addClass('selected').siblings('li').removeClass('selected'); 
     }); 
     var $lstLi = $('#windows-properties li:last'); 
     var lastLiPos = parseInt($lstLi.addClass('selected').position().top); 
     $('.property-content:last').show(); 
    }); 
//.... other part of code in the demo source ...

출처

2011-02-23 17:58:39

나를 위해 작동하지 않습니다 (FF 3.6.13). – nico

조언 해 주셔서 감사합니다.) –

이제 괜찮습니다! ;) –

나는 창문을 어떻게하는지 모르겠지만, 내가이 동적 탭 수있을 것입니다 생각하지 않습니다. 대신 하나가 아닌 두 개의 목록을 만들 수 있습니다. 또는 스크립트를 사용하여 하나에서 두 개의 목록을 만들 수 있으므로 두 목록이 전체 선 너비에 걸쳐있게됩니다. & 아무 것도 하드 코딩 할 필요가 없습니다.

출처

2011-02-23 14:07:20

Microsoft 스타일의 탭

답변

관련 문제