Интегрировать функцию jQuery в другую в пользовательском интерфейсе Tabs

#jquery #jquery-ui #jquery-tabs #jquery-address

#jquery #jquery-пользовательский интерфейс #jquery-вкладки #jquery-адрес

Вопрос:

Я пытаюсь интегрировать одну функцию в другую функцию и озадачен.

Что я пытаюсь сделать, так это добавить функцию jQuery, которая будет вызывать случайную кавычку, и я хочу, чтобы эта функция срабатывала при смене вкладки в пользовательском интерфейсе jQuery Tabs.

Это функция случайной кавычки:

 $.get('quotes.txt', function(data) {
        var quotes = data.split("@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });

А ниже приведена инициализация tabs (вместе с другой функцией, которая сворачивает divs при изменении вкладки):

 $(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
        }                  //I assume it goes near here, but no luck
    }); 
});

Должна ли функция кавычек сначала вызывать переменные?

И как бы это сработало, чтобы сделать quote div также использующим эффект прозрачности fx при изменении кавычек?

Редактировать 27.04.11

Это работает и использует эффект fx в функции:

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

        fx: {
            opacity: 'toggle'
        },

        select: function (event, ui) {
            $(".entry-content").hide();

            $('div#quotescontainer').load('quotes.html', function () {
                var $quotes = $(this).find('div.quote');
                var n = $quotes.length;
                var random = Math.floor(Math.random() * n);
                $quotes.hide().eq(random).fadeIn();
            });
        }
    });
});

Ответ №1:

Код должен заключаться в фигурные скобки

 $(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
            // <-- code goes here
        }                  //I assume it goes near here, but no luck <-- NO!
    }); 
});

Лично я бы поместил ее в событие ‘show’ вкладки, но это не должно быть проблемой.

Я настроил скрипку с некоторым тестовым кодом, чтобы вы увидели, как это должно быть:http://jsfiddle.net/PyN5Y/1

 $( "#tabs" ).tabs({
    select: function(event, ui) {
        alert('triggered on select');
        doStuff();    
    },
    show: function(event, ui) {
        alert('triggered on show');
        doStuff();
    }
});

function doStuff() {
    alert('doing stuff');
}

1. Ах, отлично работает. Изучайте материал здесь. И jsfiddle — отличный инструмент. Единственная проблема сейчас заключается в полной перезагрузке страницы или первом посещении страницы, когда div в кавычках остается пустым, что я могу понять, потому что ни одна вкладка не была запущена. Теперь мне интересно, есть ли способ включить некоторый статический текст при загрузке первой страницы в #quotescontainer , т. Е. «Добро пожаловать …» вместо случайной цитаты?

2. @songdogtech. Ну, ‘show’ на самом деле срабатывает и при загрузке страницы. ‘Select’ срабатывает только тогда, когда кто-то нажимает на нее. вы также могли бы просто поместить текст на саму вкладку, чтобы содержимое отображалось по умолчанию.

Ответ №2:

Вот как я бы отслеживал изменения на вкладках, а затем запускал вашу функцию цитирования.

 $("#tabs ul li a").click(function(e) {
  update_quote();
}); 

function update_quote() {
    $.get('quotes.txt', function(data) {
        var quotes = data.split("@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').fadeOut();
        $('.quotes').html(quotes[idx]);
        $('.quotes').fadeIn();
    });
}

Функцию update_quote можно было бы очистить и упростить, я сохранил ее очень подробной, чтобы вы могли видеть, как ее обновлять. Вы также можете объединить свои эффекты jquery в цепочку.