2

以下のように、「クリック」機能によって制御される動的な高さを持つ div がいくつかあります。

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

jQuery wookmark プラグインを divに適用しようとしていますが、セクションの 1 つを展開して高さが動的にサイズ変更される場合を除いて、機能します。ドキュメントから、例の1つをコードにコピーしたところ、動的な高さが機能しました

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

これが機能しているのを見ることができますhere。例のように、div 内の見出しの 1 つをクリックすると、レイアウトが更新されるようにするにはどうすればよいですか。前もって感謝します。

4

1 に答える 1

4

通常、サードパーティの jQuery プラグインには、何らかの「更新」または「サイズ変更」機能が含まれています。

関数をざっと見てみると、関数がないように見えます。ただし、「autoResize」オプション (ブラウザーのサイズ変更時にレイアウトをリロードする) があるため、次のように「サイズ変更」イベントをトリガーするクリック イベントを簡単に作成できます。

ジャバスクリプト:

$("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 に答える