如何通过点击sidebar ui组件中的“show-sidebar”li来展示插件的panel ui组件？我尝试了以下方法：
<body>
<ul>
<li onclick="addon.port.emit ('login')">Login</li>
<li onclick="addon.port.emit ('show-sidebar')">Show Sidebar</li>
</ul>
</body>
var sidebar = require("sdk/ui/sidebar").Sidebar ({...});
var panel = require("sdk/panel").Panel (
{
height: 59,
width: 120,
contentURL: Self.data.url("panel.html"),
contentScriptWhen: "ready",
onAttach: function()
{
panel.port.on ("login", function (data)
{
Tabs.open ("login-page-url");
panel.hide();
});
panel.port.on ("show-sidebar", function (data)
{
sidebar.show();
panel.hide();
});
}
});
但它给了我这个错误：
console.error: my-addon:
Message: TypeError: sidebar.show is not a function
答案 0 :(得分：0)
嵌入式html中不允许使用内联javascript。您应该使用Panel的属性contentScriptFile。
我使用你的代码给你发了一个例子。
数据/ panel.html
<body>
<ul>
<li id="login">Login</li>
<li id="sidebar">Show Sidebar</li>
</ul>
</body>
数据/的script.js
document.getElementById("login").onclick = function(){
document.getElementById("login").innerHTML = "pouet";
}
document.getElementById("sidebar").onclick = function(){
self.port.emit("show-sidebar");
}
<强> LIB / main.js
var sidebar = require("sdk/ui/sidebar").Sidebar ({
id: 'my-sidebar',
title: 'My sidebar',
url: require("sdk/self").data.url("panel.html")
});
var panel = require("sdk/panel").Panel (
{
height: 150,
width: 150,
contentURL: require("sdk/self").data.url("panel.html"),
contentScriptFile: require("sdk/self").data.url("script.js"),
contentScriptWhen: "end"
});
panel.port.on("login", function (data) {
console.log("event login");
panel.hide();
});
panel.port.on("show-sidebar", function (data) {
console.log("event show-sidebar");
sidebar.show();
panel.hide();
});
panel.show();
您可以使用另一个触发事件来加载js文件，请参阅here。我希望这个例子可以帮助你。