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每次内容窗口大小从展开或折叠发生变化时，这将通过面板端口系统发送一个事件。

（更新）

如果您没有$(window).resize()从 DOM 获得事件，那么您将不得不将更多手动的东西连接到您的 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。

于 2012-12-03T20:32:32.243 回答