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

Question

我正在Addon SDK（v.1.11）上为Firefox开发一个插件。

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

问题

调整大小可以顺利完成，并且包含的​​HTML元素的高度/宽度设置为“自动”，因此它们的大小会自动调整。 但是，面板本身不采用高度/宽度“自动”值，而仅采用整数。 这迫使我在折叠/展开运动完成后手动调用一个函数来调整面板的大小。 这会产生非常不愉快的效果。 有没有办法让面板自动调整其内容大小？

Answer 1

该系统目前尚不理想，因此我一直通过处理面板自动调整大小的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。