将XUL面板的调整大小设置为自动

Question

我正在为addon SDK上的Firefox开发一个添加（v.1.11）。

我的插件使用工具栏按钮显示XUL面板。该面板包含动态的按钮（使用jQuery的Slidetoggle（500））展开/折叠divs，修改了面板的整体尺寸。

问题

调整大小是平稳完成的，并且包含的HTML元素会自动调整大小，因为它们的高度/宽度设置为"自动"。但是，面板本身不具有高度/宽度的"自动"值，而只能符合整数。这迫使我手动调用功能来调整面板大小后，当崩溃/扩展运动完成。这会产生非常不愉快的效果。有没有办法允许面板自动调整其内容大小？

Answer 1

系统现在不是理想的选择，因此我一直在通过resize端口事件连接内容和面板，该事件处理面板的自动加强。这是它的工作方式。

在您的面板或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事件。

（update）

如果您没有从DOM获得$(window).resize()事件，那么您必须将一些手册挂钩到Slidetoggle函数。尝试将回调函数连接到您制作的每个slidetoggle呼叫。这是一个例子：

function emitResize() {
       self.port.emit("resize", { "width" :  $("body").width(),
                                  "height" : $("body").height() });
}
$('#yourid').slideToggle('fast', emitResize);

这将触发每个slidetoggle动画之后的调整大小事件。如果您为文档设置了静态宽度或高度，则可能需要更改$("body").width()和$("body").height()调用以使用contanddiv。