Как использовать animate () для перемещения (слева или справа) навигационного меню вкладок jQuery? - PullRequest
Новая
       10

Как использовать animate () для перемещения (слева или справа) навигационного меню вкладок jQuery?

1 голос
/ 18 мая 2010

У меня проблема. Я хотел бы использовать функцию animate () для перемещения по меню навигации с вкладками jQuery.

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

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

Я использую тему, созданную с помощью функции ролика тем в пользовательском интерфейсе jQuery. В CSS для вкладок используется относительное позиционирование, а animate () работает только при использовании абсолютного позиционирования. CSS для вкладок jQuery: 

    .ui-tabs { padding: .2em; zoom: 1; }
    .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .1em .1em 0;   overflow: hidden;     max-height: 25px; }
     .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .1em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .2em 0.7em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

Так может кто-нибудь предложить, пожалуйста, работу вокруг, чтобы заставить это работать должным образом?

1 Ответ

1 голос
/ 18 мая 2010

Что бы я сделал, это поместил бы ваши вкладки в контейнер, который имеет большую ширину, чем его контейнер, а затем анимировал этот контейнер, например, 

<div id="topContainer" style="width: 800px; overflow: hidden;">
    <!-- calculate the width of #animateMe -->
    <div id="animateMe" style="width: 1250px; position: absolute;">
        ... <!-- your tabs here -->
    </div>
    ... <!-- tab content here -->
</div>

Возможно, вы не сможете сделать это с помощью функциональных возможностей вкладок пользовательского интерфейса jQuery.

Редактировать: После того, как вы немного поэкспериментируете, вы сможете работать с функциональностью вкладок пользовательского интерфейса jQuery.

...