JQuery Scrolling/Paging Tabs

Question

Я пытаюсь создать простую панель вкладок для сайта, который имеет возможность прокрутки для вкладок, которые не помещаются на странице. Это довольно просто и не требует никакого аякса или динамически загружаемого контента ... он просто отображает все вкладки, а когда вы нажимаете один, он переводит вас на другую страницу.

я рыскал по интернету и не могу найти ничего, кроме: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html однако это очень тяжелый и сложный ... Я ищу легкий например в JQuery. Если кто-то может помочь, я буду благодарен!

Answer 1

Я закончил тем, что писал его сам с DIV, который переполнение установлено в скрытый. Затем, используя jquery ниже, переместите вкладки в div.

$(document).ready(function() 
    { 
     $('.scrollButtons .left').click(function() 
     { 
     var content = $(".tabs .scrollable .content") 
     var pos = content.position().left + 250; 
     if (pos >= 0) 
     { 
      pos = 0; 
     } 
     content.animate({ left: pos }, 1000); 
     }); 
     $('.scrollButtons .right').click(function() 
     { 
     var content = $(".tabs .scrollable .content") 
     var width = content.children('ul').width(); 
     var pos = content.position().left - 250; 
     //var width = content.width(); 
     if (pos <= (width * -1) + 670) 
     { 
      pos = (width * -1) + 600; 
     } 
     content.animate({ left: pos }, 1000); 
     }); 
    }); 

Мой Html выглядит следующим образом:

<div class="tabs"> 
    <div class="scrollable"> 
     <div class="content"> 
      <ul> 
       <li>Tab1</li> 
       <li>Tab2</li> 
       <li>Tab3</li> 
       <li>Tab4</li> 
       <li>Tab5</li>      
       </ul> 
     </div> 
    </div> 
    <div class="scrollButtons"> 
     <ul> 
      <li> 
       <div class="left"> 
       </div> 
      </li> 
      <li> 
       <div class="right"> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

Не могли бы вы просто обернуть вкладки в DIV с помощью overflow-x: auto set в CSS?

Answer 3

Я всегда использую JQuery UI tabs в качестве отправной точки для вкладок. Вы можете настроить загрузку пользовательского интерфейса JQuery в разделе загрузки веб-сайта. Этот метод должен быть легче любой другой реализации, если вы уже используете JQuery на своем веб-сайте.

Из окна, вкладки пользовательского интерфейса JQuery не дают вам прокрутки, которые вы желаете. Это, на мой взгляд, может быть достигнуто путем изменения CSS, но, скорее всего, будет проще, если вы измените навигацию своего сайта (т. Е. Создадите больше уровней, используйте более короткие названия).

Надеется, что это помогает

Answer 4

Я только что создал плагин сам: дом проекта: http://jquery.aamirafridi.com/jst