Определить / вызвать функцию в изотопе onLayout - PullRequest
Новая
       14

Определить / вызвать функцию в изотопе onLayout

1 голос
/ 11 февраля 2012

Я использую http://isotope.metafizzy.co/docs/options.html#onlayout и он говорит следующее:

"Похоже на обратный вызов, onLayout - это функция, которая будет запускаться после каждого прохождения экземпляра Isotope через его логику компоновки."

$('#container').isotope({
   onLayout: function( $elems ) {
    // `this` refers to jQuery object of the container element
    console.log( this.height() );
    // callback provides jQuery object of laid-out item elements
    $elems.css({ background: 'blue' });
    }
});

Это означает, что когда" Макет "закончен, я могу запустить это: 

 $elems.css({ background: 'blue' });

У меня нет" $ elems ", но из того, что я могу понять, это означаетчто когда «onLayout» закончится, я могу запустить то, что я хочу, и я хотел бы запустить это: 

$("#container").width(); 
$("#head").animate({ width: newWidth}, "fast");

Но как и что такое «$ elems» внутри «()»?

Спасибо

1 Ответ

1 голос
/ 11 февраля 2012

Вы можете привязать пользовательские события к элементам следующим образом: 

$('#container').bind('my_event', function ()
{
    alert('my_event has just fired!');
});

И затем вызывать его с помощью .trigger(): 

$('#container').trigger('my_event');

Используя это, вы сможете установитьЯ думаю, что вы хотите довольно легко.

Обновление:

Вместо вызова этого кода: 

$('#container').isotope({
   onLayout: function( $elems ) {
    // `this` refers to jQuery object of the container element
    console.log( this.height() );
    // callback provides jQuery object of laid-out item elements
    $elems.css({ background: 'blue' });
    }
});

Позвоните: 

$('#container').isotope({
   onLayout: function( $elems ) {
        // `this` refers to jQuery object of the container element
        console.log( this.height() );
        // callback provides jQuery object of laid-out item elements
        $elems.css({ background: 'blue' });
        $("#container").width(); 
        $("#head").animate({ width: newWidth}, "fast");
    }
});
...