Question

我正在为Addon SDK（v.1.11）开发Firefox的附加组件。

我的插件使用工具栏按钮显示XUL面板。此面板包含动态（使用jQuery's 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。

将XUL面板的大小调整为auto

1 个答案: