Прокручиваемые кнопки Tab

Question

Я готовлю tabpanel, где количество вкладок неизвестно (динамически). Поэтому я предоставляю навигацию, если есть больше вкладок, чем позволяет размер экрана. Чтобы достичь этого, я использую стиль margin, так как я не хочу использовать фиксированную ширину. Но проблема в том, что я не могу перемещать одну вкладку за один клик левой/правой стрелки. В настоящее время я перемещаю 20px одним щелчком, что неточно.
Уверен, что что-то мне не хватает, но я не могу его найти. Может ли кто-нибудь помочь?

Любое альтернативное решение также приветствуется.

Адрес jsfiddle.

Answer 1

Здесь ваш требуйте код TabStrip. если это полезно, пожалуйста, проголосовав.

JSFIDDLE

var incWidth = 0, divWidth = 0, OlWidth = 0,marginWidth = 50; 
    (function($) { 
     $.fn.showScrollIcons = function(){ 
      OlWidth = $('.checkOL').width(); 
      divWidth = this.width(); 
      if(divWidth >= OlWidth){ 
       $('.arrow').hide(); 
       if(incWidth){ 
//      $('.arrow.leftArrow').show(); 
         $('.arrow.leftArrow').hide(); 
         $('.showTab').removeClass('showTab'); 
         $('.checkOL .checkLI:first-child').addClass('showTab'); 
         $('.checkOL').animate({'marginLeft':"+=" + incWidth}); 
         incWidth = 0; 
        } 
       } 
       else{ 
        $('.arrow').show(); 
        if(!incWidth){ 
         $('.arrow.leftArrow').hide(); 
        } 
        if(divWidth + incWidth >= (OlWidth - 12)){ 
         $('.arrow.rightArrow').hide(); 
        } 
       } 
      }; 
     })(jQuery); 
     $(document).ready(function(){ 
      $('.rightArrow').click(function(){ 
       var outerWidth = 0; 
       var currentTab = $('.showTab'); 
       if(currentTab.next().length){ 
        currentTab.next().addClass('showTab'); 
        currentTab.removeClass('showTab'); 
        outerWidth = currentTab.outerWidth(); 
       } 
       incWidth += outerWidth; 
       $('.checkOL').animate({'marginLeft':"-=" + outerWidth}); 
       checkArrowHide(); 
      }); 
      $('.leftArrow').click(function(){ 
       var outerWidth = 0; 
       var currentTab = $('.showTab'); 
       if(currentTab.prev().length){ 
        currentTab.prev().addClass('showTab'); 
        currentTab.removeClass('showTab'); 
        outerWidth = $('.showTab').outerWidth(); 
       } 
       incWidth -= outerWidth; 
       $('.checkOL').animate({'marginLeft':"+=" + outerWidth}); 
       checkArrowHide(); 
      }); 
      $('.tabBtn').showScrollIcons(); 
      $(window).resize(function(){ 
       $('.tabBtn').showScrollIcons(); 
      }); 
      function checkArrowHide(){ 
       if(!incWidth){ 
        $('.arrow.leftArrow').hide(); 
       } 
       else{ 
        $('.arrow.leftArrow').show(); 
       } 
       if(divWidth + incWidth >= (OlWidth - 12)){ 
        $('.arrow.rightArrow').hide(); 
       } 
       else{ 
        $('.arrow.rightArrow').show(); 
       } 
      } 
     }); 

Answer 2

Мне нравится стиль. Но вот альтернатива. используя overflow-x:auto;, вы можете автоматически создавать полосу прокрутки, когда вкладки выходят из-под контроля.

JSFiddle