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

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

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

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

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

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

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

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

И как бы это работало, чтобы 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();
            });
        }
    });
});

jquery jquery-ui jquery-tabs jquery-address
person markratledge    schedule 26.04.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

$(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!
    }); 
});

Лично я бы поместил его в событие «показать» вкладки, но это не должно быть проблемой.

Я настроил скрипт с тестовым кодом, чтобы вы увидели, как это должно быть: 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');
}
person JohnP    schedule 27.04.2011
comment
А, отлично работает. Изучайте вещи здесь. И jsfiddle — отличный инструмент. Единственная проблема сейчас связана с полной перезагрузкой страницы или при первом посещении страницы, div кавычек пуст, что я могу понять, потому что ни одна вкладка не была запущена. Теперь мне интересно, есть ли способ включить некоторый статический текст при загрузке первой страницы в #quotescontainer, т. Е. Добро пожаловать ... вместо случайной цитаты? - person markratledge; 27.04.2011
comment
@songdogtech. Что ж, «show» также срабатывает при загрузке страницы. «Выбрать» срабатывает только тогда, когда кто-то нажимает на него. вы также можете просто поместить текст на саму вкладку, чтобы контент отображался по умолчанию. - person JohnP; 27.04.2011

arrow_upward
1
arrow_downward

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

$("#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.

person jhanifen    schedule 27.04.2011
comment
Вместо функции щелчка, используя приведенный выше пример JohnP, было бы лучше, просто включите вызов функции update_quote() в выбор вкладок. - person jhanifen; 27.04.2011