Вкладки пользовательского интерфейса JQuery заставляют экран «прыгать»

Question

Я использую последнюю версию вкладок jQuery UI . У меня есть вкладки, расположенные в нижней части страницы.

Каждый раз, когда я нажимаю на вкладку, экран перемещается вверх.

Как я могу предотвратить это?

Пожалуйста, посмотрите этот пример:

http://5bosses.com/examples/tabs/sample_tabs.html

Answer 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');
    }
});

Устанавливает вычисленную высоту панели перед переходом по вкладке. После появления новой вкладки высота снова устанавливается на «авто». Для параметра «Переполнение» задано значение «скрытый», чтобы предотвратить переход содержимого из панели при переходе от короткой вкладки к более высокой.

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

Answer 2

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

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

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

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

Answer 3

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

Как остановить всплывающее окно при нажатии на вкладку:

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

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

Answer 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' } });

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

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

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);
});

Я опубликую дальнейший прогресс.

Answer 5

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

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

Answer 6

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

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

$(...).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's outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

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

Answer 7

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

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

Answer 8

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

Answer 9

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

Вот код на вкладке:

<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

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

Answer 10

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