Когда document.ready не означает document.ready - PullRequest
Новая
       12

Когда document.ready не означает document.ready

1 голос
/ 04 мая 2011

Я делаю несколько вещей с помощью функций, представленных ниже, в пользовательском интерфейсе jQuery Tabs - меняя изображения в соответствии с атрибутом данных, выбирая случайную кавычку и сворачивая некоторые элементы div - все при смене вкладок во вкладках jQuery UI.И я также изменяю макет с помощью CSS в первой функции.

Проблема в том, что готовый документ на самом деле не работает.Если я вернусь на вкладку 0 с другой страницы, используя URL-адрес #hash, первое событие связывания пропускается, а CSS не меняется.

Есть ли способ заставить document.ready действительно работать?И вносить ли изменения в CSS последовательно? 

$(document).ready(function () {

    $('#tabs').bind('tabsshow', function (event, ui) {

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

        $('#wrapper').css('width', '586px'); //show certain CSS for the 0 tab
        $('#wrapper').css('margin', '80px auto');
        $('#col2, #footer, #headermain h1, .hide').css('display', 'none');

        if (ui.index != 0) {
            $('#wrapper').css('width', '875px'); //show certain CSS for all other tabs
            $('#wrapper').css('margin', '15px auto');
            $('#col2, #footer, #headermain h1, .hide').css('display', 'block');

        }
    });

    $(function () { //tab change fx
        $('#tabs').tabs({
            fx: {
                opacity: 'toggle'
            },


            select: function (event, ui) {
                $(".entry-content").hide('fast'); //collapse any open divs in other tabs on tab change
                $(".bkcontent").hide('fast');


                $('div#quotescontainer').load('quotes.html', function () {
                    var $quotes = $(this).find('div.quote'); //pull a random quote for the sidebar
                    var n = $quotes.length; //on any tab change
                    var random = Math.floor(Math.random() * n);
                    $quotes.hide().eq(random).fadeIn();
                });

                var img = $(ui.panel).data("image");
                $("#headerwrapper").animate({
                    opacity: 'toggle'
                }, function () { //change header image to the 
                    $(this).css("background-image", "url(" + img + ")") //data attr of the tabs div
                    .animate({
                        opacity: 'toggle'
                    });
                });
            }

        });
    });
});

1 Ответ

2 голосов
/ 04 мая 2011

http://bugs.jqueryui.com/ticket/3867

Попробуйте связать, прежде чем позвонить .tabs()

EDIT

Это потому, что вы используете событие "select" для этих функций. Это означает, что они запускаются только при нажатии на вкладку. Вы также хотите, чтобы они запускались, когда пользователь переходит непосредственно на вкладку через хеш в URL.

Я думаю, что использование show вместо select может поставить вас на правильный путь.

Я также думаю, что может иметь смысл сделать что-то вроде: 

var $tabs = $('#tabs').bind('tabsshow', function (event, ui) {

            $('#wrapper').css('width', '586px'); //show certain CSS for the 0 tab
            $('#wrapper').css('margin', '80px auto');
            $('#col2, #footer, #headermain h1, .hide').css('display', 'none');

            if (ui.index != 0) {
                $('#wrapper').css('width', '875px'); //show certain CSS for all other tabs
                $('#wrapper').css('margin', '15px auto');
                $('#col2, #footer, #headermain h1, .hide').css('display', 'block');

            }
        }).tabs({
            fx: {
                opacity: 'toggle'
            },


            show: function (event, ui) {
                $(".entry-content").hide('fast'); //collapse any open divs in other tabs on tab change
                $(".bkcontent").hide('fast');


                $('div#quotescontainer').load('quotes.html', function () {
                    var $quotes = $(this).find('div.quote'); //pull a random quote for the sidebar
                    var n = $quotes.length; //on any tab change
                    var random = Math.floor(Math.random() * n);
                    $quotes.hide().eq(random).fadeIn();
                });

                var img = $(ui.panel).data("image");
                $("#headerwrapper").animate({
                    opacity: 'toggle'
                }, function () { //change header image to the 
                    $(this).css("background-image", "url(" + img + ")") //data attr of the tabs div
                    .animate({
                        opacity: 'toggle'
                    });
                });
            }


    });

Я правильно понял скобки? :)

В любом случае, важно то, что эти функции необходимо вызывать, когда отображается содержимое вкладки, а не только выбранное. Если show не работает, вам может потребоваться написать функцию, которая ищет хэш URL-адреса (то есть средство просмотра открывается непосредственно на вкладку) и запускает эти другие функции в зависимости от того, что видит.

...