2

我有一些 div 具有由“点击”功能控制的动态高度,如下所示:

$('.expand').click(function() {
  $(this).next('.collapse').slideToggle();
});

我正在尝试将jQuery wookmark 插件应用于 div,并且它可以工作,除了通过扩展其中一个部分来动态调整它们的高度。从文档中,我将其中一个示例复制到我的代码中,并且动态高度有效

        $(document).ready(new function() {
          // Prepare layout options.
          var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#container'), // Optional, used for some extra CSS styling
            offset: 30, // Optional, the distance between grid items
            itemWidth: 300 // Optional, the width of a grid item
          };

          // Get a reference to your grid items.
          var handler = $('.outerwrapper');

          // Call the layout function.
          handler.wookmark(options);

          // Capture clicks on grid items.
          handler.click(function(){
            // Randomize the height of the clicked item.
            var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
            $(this).css('height', newHeight+'px');

            // Update the layout.
            handler.wookmark();
          });
        });

你可以在这里看到这个工作。我怎样才能做到这一点,以便当您单击 div 内的标题之一时,布局会更新,就像在示例中那样。提前致谢。

4

1 回答 1

4

通常第三方 jQuery 插件包含某种“刷新”或“调整大小”功能。

快速浏览一下该功能,它似乎没有;但是,由于有一个“autoResize”选项(它将在浏览器调整大小时重新加载布局),您可以简单地创建一个触发“resize”事件的点击事件,如下所示:

JAVASCRIPT:

$("h1.resize").live("click", function()
{
    $(window).trigger('resize');
}); 

http://api.jquery.com/trigger/

http://api.jquery.com/resize/


编辑:再次重新阅读问题,看起来像这样:handler.wookmark();

应该刷新布局(基于您发布的代码)。所以你应该能够使用它而不是调整大小触发器。

$("h1.resize").live("click", function()
{
    handler.wookmark();
}); 
于 2012-04-04T17:56:55.683 回答