我正在插件 SDK (v.1.11) 上为 Firefox 开发插件。
我的插件使用工具栏按钮来显示 XUL 面板。此面板包含动态（使用jQuery's slideToggle(500)）展开/折叠 div 的按钮，修改面板的整体尺寸。
问题
调整大小很顺利，并且包含的 HTML 元素会自动调整大小，因为它们的高度/宽度设置为“自动”。但是，面板本身不采用高度/宽度“自动”值，只有整数。这迫使我在折叠/展开动作完成时手动调用一个函数来调整面板的大小。这会产生非常不愉快的效果。有没有办法让面板自动调整其内容？
【问题讨论】：
标签： firefox firefox-addon firefox-addon-sdk
系统现在并不理想，所以我一直通过处理面板自动调整大小的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 动画之后触发 resize 事件。如果您为文档设置了静态宽度或高度，您可能希望更改 $("body").width() 和 $("body").height() 调用以使用包含 div。
【讨论】：