Вкладки JQuery UI Причиняет экран "Jump"

Ответ 1

Если вы активируете переходы на вкладке (т.е. .tabs({ fx: { opacity: 'toggle' } });), то вот что происходит:

В большинстве случаев прыжок не вызван браузером по ссылке "#". Перескакивание страницы происходит из-за того, что в середине анимации между двумя областями вкладок обе панели вкладок полностью прозрачны и скрыты (как показано на дисплее: нет), поэтому эффективная высота всей области вкладок становится кратковременно нулевым.

И если вкладка с нулевой высотой приводит к тому, что страница будет короче, тогда страница, похоже, будет подпрыгивать, чтобы компенсировать, когда на самом деле она просто изменяет размер, чтобы соответствовать (на мгновение) более короткому контенту. Имеет смысл?

Лучший способ исправить это - установить фиксированную высоту для раздела с вкладками. Если это нежелательно (потому что содержимое вашей вкладки меняется по высоте), используйте вместо этого:

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

Он установит вычисленную высоту панели перед переходом на вкладку. Как только появится новая вкладка, высота вернется к "авто". Переполнение установлено на "скрытый", чтобы предотвратить проникновение контента из панели при переходе с короткой вкладки на более высокую.

Это то, что сработало для меня. Надеюсь, это поможет.

Ответ 2

Если у вас есть что-то в этом роде:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

Попробуйте добавить return false; после команды активации вкладки:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

Ответ 3

Мне было дано решение для этого...

Как остановить просмотр экрана при нажатии на вкладку:

Оберните div, содержащий вкладки в div с фиксированной высотой.

См. пример здесь: http://5bosses.com/examples/tabs/sample_tabs.html

Ответ 4

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

Я нашел это в источнике jquery:

 // Show a tab, animation prevents browser scrolling to fragment,

Конечно, если у меня есть это:

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

мой код прыгает вверх и раздражает (но там анимация). Если я изменил это на следующее:

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

нет анимации вкладок, но переключение между вкладками плавное.

Я нашел способ сделать это прокруткой назад, но это не правильное исправление, так как браузер по-прежнему прыгает вверху после нажатия на вкладку. Прокрутка происходит между событиями tabsselect и tabsshow, поэтому следующий код возвращается к вашей вкладке:

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

Я сделаю все, что я сделал.

Ответ 5

Решение Майка продемонстрировало принцип значительно, но у него большой недостаток - если результирующая страница короткая, экран все равно будет прыгать вверх! Единственное решение - запомнить scrollTop и восстановить его после переключения вкладок. Но перед восстановлением увеличьте страницу (html-тег) соответствующим образом:

(изменить - изменено для нового API интерфейса JQuery + небольшое улучшение для больших страниц)

$(...).tabs({
    beforeActivate: function(event, ui) {
        $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
    },
    activate: function(event, ui) {
        if (!$(this).data('scrollTop')) { // there was no scrolltop before
            jQuery('html').css('height', 'auto'); // reset back to auto...
                    // this may not work on page where originally
                    // the html tag was of a fixed height...
            return;
        }
        //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
        if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
            return;                // nothing to be done
        // scrolltop moved - we need to fix it
        var min_height = $(this).data('scrollTop') + $(window).height();
            // minimum height the document must have to have that scrollTop
        if ($('html').outerHeight() < min_height) { // just a test to be sure
                            // but this test should be always true
            /* be sure to use $('html').height() instead of $(document).height()
               because the document height is always >= window height!
               Not what you want. And to handle potential html padding, be sure
               to use outerHeight instead!
                   Now enlarge the html tag (unfortunatelly cannot set
               $(document).height()) - we want to set min_height
               as html outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

Работает с эффектом fx.

Ответ 6

У меня была та же проблема с меню jquery ui - предупреждениеDefault() при событии клика якоря останавливает прокрутку страницы вверху страницы:

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });

Ответ 7

Попробуйте использовать event.preventDefault();. В событии клика, который переключает вкладки. Моя функция выглядит так:

    $(function() {
        var $tabs = $('#measureTabs').tabs();
        $(".btn-contiue").click(function (event) {
            event.preventDefault();
            $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs   ('option', 'active')+1  );
        });
    });

Ответ 8

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

Вот код за вкладку:

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

Я уже пробовал это без успеха:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

Вот простой пример (без возврата false): http://5bosses.com/examples/tabs/sample_tabs.html

Любые другие предложения?

Ответ 9

Попробуйте добавить минимальную высоту с помощью css в каждую из областей содержимого вкладки (а не сами вкладки). Это исправило это для меня.:)

Ответ 10

> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
>     scroll_to_x = window.pageXOffset;
>     scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
>     window.scroll(scroll_to_x, scroll_to_y); });

Спасибо за вашу помощь! Пожалуйста, дайте мне знать, что еще вы найдете.

Вышеприведенная функция работает (экран не перемещается постоянно)... но экран очень шаткий по щелчку.

Вот простой пример, показывающий, как нажатие на вкладки вызывает переход экрана вверх (без кода выше):  http://5bosses.com/examples/tabs/sample_tabs.html

Обратите внимание, что анимация не используется.

Ответ 11

Существует гораздо более простой способ, который я обнаружил из комментариев этой страницы, чтобы просто удалить href= "#" и он больше не прыгнет на вершину! Я проверял и работает для меня. Приветствия

Ответ 12

Я предпочитаю иметь href= "#" в моих ссылках, которые не принимают пользователя нигде, но вы можете сделать это, пока вы добавляете onclick = "return false;". Ключ, я думаю, не отправляет пользователя в "#", который, в зависимости от браузера, по умолчанию считается вершиной текущей страницы.

Ответ 13

У меня была та же проблема, плюс мои вращались сами по себе, поэтому, если бы вы были внизу страницы, окно браузера будет прокручиваться вверх. У меня была фиксированная высота для контейнера табуляции. Вид странной вещи по-прежнему заключается в том, что если вы покинете окно или вкладку и вернетесь, она все равно будет прокручиваться. Но не конец света.

Ответ 14

заменить href= "#" на href= "javascript: void (0);" в элементе 'a'

работает 100%

Ответ 15

У меня была такая проблема. Мой код:

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

Я просто удалил show, и он работал как шарм!

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });

Ответ 16

В моем случае я обнаружил, что вкладка href=#example1 заставила страницу перейти в положение id. Добавление фиксированной высоты к вкладкам не имело значения, поэтому я добавил:

$('.nav-tabs li a').click( function(e) { e.preventDefault(); });

Ответ 17

Вы пробовали:

fx: {opacity:'toggle', duration:100}