Вкладки пользовательского интерфейса jQuery: показывать еще один div с каждой активной вкладкой - PullRequest
Новая
       7

Вкладки пользовательского интерфейса jQuery: показывать еще один div с каждой активной вкладкой

0 голосов
/ 22 апреля 2011

Я использую пользовательский интерфейс jQuery Tabs со стандартной структурой вкладок (http://jqueryui.com/demos/tabs/). Я не включил здесь все html, так как это излишне, если вы знакомы с пользовательским интерфейсом Tabs.

Но в этом случае мне нужно показать другое изображение для каждой активной вкладки. То есть другое изображение в #headerwrapper, когда #tabone активен, и другое, когда #tabtwo активен, и т. д. И в идеале постепенно увеличивать / уменьшать эти изображения с помощью эффекта непрозрачности fx.

Моя вкладка init выглядит так: 

var $tabs= $("#tabs").tabs({
    });

Похоже, мне нужно сделать это (согласно ответу Мэтта ниже), чтобы найти активную вкладку: 

$('#tabs').tabs({
select: function(event, ui) { .... });

Но мне не повезло с ответом Мэтта.

Это оболочка заголовка и изображение CSS: 

#headerwrapper {
background: url(images/image.jpg) top center no-repeat;
height:88px;
}

Можно ли показывать разные изображения для каждой вкладки и изменять их (т. Е. Fx: {opacity: 'toggle'}) по мере их изменения?

Ответы [ 2 ]

1 голос
/ 22 апреля 2011

Вы можете использовать data-* атрибуты: 

$("#tabs").tabs({
    select: function($event, ui) {
        /* Extract the image from the active tab: */
        var img = $(ui.panel).data("image");

        /* Animate the header out, set the background css, then animate back in: */
        $("#headerwrapper")
            .animate({ opacity: 'toggle' }, function() {
                $(this).css("background-image", "url(" + img + ")")
                    .animate({ opacity: 'toggle' });
            });
    }
});

И для каждой вкладки будет определено data-image: 

<div id="tabs-1" data-image="http://placekitten.com/g/300/88">...</div>

Вот рабочий пример: http://jsfiddle.net/8muBm/2/

1 голос
/ 22 апреля 2011

Вы можете установить само изображение.Поэтому в зависимости от того, на какой вкладке вы находитесь, вы можете переименовать изображения в header0, header1 и т. Д. Вы можете использовать 

$('#example').tabs({
    select: function(event, ui) {
        var selected = $('#example').tabs('option', 'selected');
        $("#headerimg").attr("src", "/new/image/header" + selected + ".jpg");
    }
});

.Вы можете получить текущую выбранную вкладку.В противном случае вы всегда можете использовать оператор if / else.

...