在 isotope onLayout 中定义/调用函数

发布于 2025-01-04 16:50:13 字数 820 浏览 0 评论 0原文

我正在使用 http://isotope.metafizzy.co/docs/options.html#onlayout 它这样说：

“与回调类似，onLayout 是一个函数，每次同位素实例运行其布局逻辑时都会触发该函数。”

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

这意味着当“Layout”完成时我可以运行这个：

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

我没有“$elems”，但据我所知，这意味着当“onLayout”完成时我可以运行我想要的东西并且我想运行this：

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

但是“( )”中的“$elems”如何以及是什么？

谢谢

原文

I'm using http://isotope.metafizzy.co/docs/options.html#onlayout and it says this:

"Similiar to a callback, onLayout is a function that will be triggered after every time an Isotope instance runs through its layout logic."

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

That means that when "Layout" has finished i can run this:

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

I don't have "$elems" but from what i can understand that means that when "onLayout" has finished i can run what i want and I would like to run this:

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

But how and what is "$elems" inside the "( )" ?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

☆獨立☆ 2025-01-11 16:50:13

您可以将自定义事件绑定到元素上，如下所示：

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

You can bind custom events on to elements like so:

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

And then call it with .trigger():

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

Using this, you should be able to set up what you want pretty easily, I think.

Update:

Instead of calling this code:

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

Call this:

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

回复收藏 0 原文

~没有更多了~