Как добавить перекрестное затухание на вкладках пользовательского интерфейса? - PullRequest
Новая
       24

Как добавить перекрестное затухание на вкладках пользовательского интерфейса?

4 голосов
/ 09 января 2011

Привет, я копирую вопрос из http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs,, потому что у меня такой же вопрос.

Привет всем

Я настроил интерфейс с вкладками, используя стандартный код вкладки пользовательского интерфейса. 

<script type="text/javascript">
$(function() {
$("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true')
});
</script>

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

То, что я хотел бы сделать, - это исчезновение tab1, постепенное появление tab 2. Создание перекрестного затухания.

Может кто-нибудь сказать мне, как этого добиться?

Заранее спасибо

Ответы [ 3 ]

6 голосов
/ 18 февраля 2011

Я думаю, что Jquery UI не может сделать это по умолчанию.Однако пользовательский интерфейс jQuery Tabs поставляется с событием "show" , где вы можете написать собственный код для самостоятельного переключения вкладок. 

$(document).ready(function() {
    $("#tabs").tabs({

        show: function(event, ui) {

            var lastOpenedPanel = $(this).data("lastOpenedPanel");

            if (!$(this).data("topPositionTab")) {
                $(this).data("topPositionTab", $(ui.panel).position().top)
            }         

            //Dont use the builtin fx effects. This will fade in/out both tabs, we dont want that
            //Fadein the new tab yourself            
            $(ui.panel).hide().fadeIn(500);

            if (lastOpenedPanel) {

                // 1. Show the previous opened tab by removing the jQuery UI class
                // 2. Make the tab temporary position:absolute so the two tabs will overlap
                // 3. Set topposition so they will overlap if you go from tab 1 to tab 0
                // 4. Remove position:absolute after animation
                lastOpenedPanel
                    .toggleClass("ui-tabs-hide")
                    .css("position", "absolute")
                    .css("top", $(this).data("topPositionTab") + "px")
                    .fadeOut(500, function() {
                        $(this)
                        .css("position", "");
                    });

            }

            //Saving the last tab has been opened
            $(this).data("lastOpenedPanel", $(ui.panel));

        }

    });
});

Демонстрация в реальном времени:

http://jsfiddle.net/FFTzU/7/

2 голосов
/ 05 апреля 2011

Отличный ответ, Ричард, только то, что мне было нужно! У меня была мысль, что ваше решение вызывает 2 анимации (постепенно исчезают и исчезают), которые на моей js-heavy странице выглядят немного менее плавно. Я немного отредактировал ваше решение, чтобы использовать z-index и 1 fade. По крайней мере, это немного смягчает ситуацию. 

$("#tabs").tabs({
  show: function(event, ui) {
    var lastOpenedPanel = $(this).data("lastOpenedPanel");
    if (!$(this).data("topPositionTab")) {
        $(this).data("topPositionTab", $(ui.panel).position().top)
    }
    // do crossfade of tabs
    $(ui.panel).hide().css('z-index', 2).fadeIn(1000, function() {
      $(this).css('z-index', '');
      if (lastOpenedPanel) 
      {
        lastOpenedPanel
          .toggleClass("ui-tabs-hide")
          .hide();
      }
    });

    $(this).data("lastOpenedPanel", $(ui.panel));
  } 
}).tabs('rotate', 3000);

Я добавил поворот в конце, так как это делает довольно приятное слайд-шоу!

Tom

0 голосов
/ 27 июня 2018

Я не знаю, сработали ли вышеуказанные ответы для более ранней версии пользовательского интерфейса jQuery, но свойства show и hide в настоящее время не работают таким образом.Эффект может быть достигнут с помощью beforeActivate: 

$("#tabbedArea").tabs({
    hide: 1000,
    beforeActivate: function(event, ui){
        ui.newPanel.css('zIndex', 1).fadeIn(1000, function(){
            $(this).css('zIndex', '');
        });
    }
});

Обратите внимание, что панели вкладок должны быть расположены абсолютно.

...