Вкладки JQuery Scrolling/Paging

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

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

ОТВЕТЫ

Ответ 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>

Ответ 3

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

Ответ 4

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

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

Надеюсь, что это поможет