將XUL面板的大小設置爲自動

我正在爲Addon SDK（v.1.11）上的Firefox開發附加組件。將XUL面板的大小設置爲自動

我的插件使用工具欄按鈕來顯示一個XUL面板。此面板包含動態（使用jQuery's slideToggle(500)）展開/摺疊div的按鈕，修改面板的整體尺寸。

問題

調整大小被平穩地完成，並且因爲它們的高度/寬度被設置爲「自動」所包含的HTML元素被自動調整大小。但是，面板本身並不採用高度/寬度「自動」值，而只是整數。這迫使我手動調用一個函數來在摺疊/展開動作完成時調整面板大小。這產生了非常不愉快的效果。有沒有辦法允許面板自動調整其內容？

來源

2012-11-05 josesigna

現在系統並不理想，所以我一直通過一個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動畫後，當您的頁面大小完成changign後的resize事件。如果您爲文檔設置了靜態寬度或高度，則可能需要將$("body").width()和$("body").height()調用更改爲使用包含div。

來源

2012-12-03 20:32:32

我還沒有能夠得到這個工作，因爲我相信它有我的代碼相同的問題。窗口上的resize事件不會被觸發，因爲我實際上正在展開/摺疊正文中的元素，它不會修改窗口的大小，因爲它具有靜態高度/寬度（並且不能設置爲auto）。 – josesigna

如果該窗口根本沒有觸發調整大小，那麼您將需要爲您的slideToggle使用自定義回調函數。我將在上面添加一個示例。 –

將XUL面板的大小設置爲自動

回答

相關問題