2

Addon SDK (v.1.11) で Firefox のアドオンを開発しています。

私のアドオンは、ツールバー ボタンを使用して XUL パネルを表示します。このパネルには、動的に ( jQuery の slideToggle(500)を使用して) div を展開/折りたたむボタンが含まれており、パネル全体のサイズを変更します。

問題

サイズ変更はスムーズに行われ、含まれる HTML 要素は高さ/幅が「自動」に設定されているため、自動的にサイズ変更されます。ただし、パネル自体は高さ/幅の「自動」値を取りません。整数のみです。これにより、折りたたむ/展開するモーションが終了したときに、手動で関数を呼び出してパネルのサイズを変更する必要があります。これは非常に不快な効果を生み出します。パネルのサイズをコンテンツに合わせて自動的に変更できるようにする方法はありますか?

4

1 に答える 1

0

システムは現在理想的ではないため、パネルresizeの自動サイズ変更を処理するポート イベントを介してコンテンツとパネルを接続しています。仕組みは次のとおりです。

Panel または main.js コードで、resizeイベントをリッスンします。

Panel.port.on("resize", function (sizes) {
  Panel.resize(sizes.width, sizes.height);
});

次に、コンテンツ パネルのコードで次のようなものを使用します (DOM の準備ができたら)。

$(window).bind('resize', function () {
   self.port.emit("resize", { "width" :  $("body").width(),
                              "height" : $("body").height() });
});

resizeこれにより、コンテンツ ウィンドウのサイズが展開または折りたたみによって変更されるたびに、パネル ポート システムを介してイベントが送信されます。

（アップデート）

DOM からイベントを取得していない場合は$(window).resize()、slideToggle 関数にさらに手動で何かを接続する必要があります。すべてのslideToggle呼び出しにコールバック関数を接続してみてください。次に例を示します。

function emitResize() {
       self.port.emit("resize", { "width" :  $("body").width(),
                                  "height" : $("body").height() });

}

$('#yourid').slideToggle('fast', emitResize);

これにより、ページのサイズ変更が完了すると、すべての slideToggle アニメーションの後にサイズ変更イベントがトリガーされます。ドキュメントに静的な幅または高さを設定している場合は、含まれる div を使用するように$("body").width()およびの呼び出しを変更することをお勧めします。$("body").height()

于 2012-12-03T20:32:32.243 に答える