javascript - How to show/hide sidebar from panel -
how can show sidebar
ui component of addon clicking on 'show-sidebar' li
in panel
ui component? tried following:
panel.html
<body> <ul> <li onclick="addon.port.emit ('login')">login</li> <li onclick="addon.port.emit ('show-sidebar')">show sidebar</li> </ul> </body>
main.js
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(); }); } });
but it's giving me error:
console.error: my-addon: message: typeerror: sidebar.show not function
the inline javascript not allowed in embedded html. should use property contentscriptfile
of panel.
i post example using code.
data/panel.html
<body> <ul> <li id="login">login</li> <li id="sidebar">show sidebar</li> </ul> </body>
data/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();
you can use trigger event when loading js file see here. hope example can you.
Comments
Post a Comment