动态更改toolbarbutton的图像？ - 使用Erik Vold的toolbarbutton.js

Question

var self = require("sdk/self");
var toolbarbutton = require("toolbarbutton");

var toolbarbutton = toolbarbutton.ToolbarButton({
  id: "annotator_toolbar_button",
  label: "Web Annotator 2013",
  image: self.data.url("stop.png"),
});

toolbarbutton.moveTo({
  toolbarID: "nav-bar",
  insertbefore: "home-button",
  forceMove: false // only move once
}); 

toolbarbutton.image = self.data.url("start.png");// this command

我无法为Firefox插件sdk更改Erik Vold的toolbarbutton库的图像属性。

任何帮助都将不胜感激。

Answer 1

您可以使用库Toolbar Button Complete，这是我的toolbarbutton.js的分支。

使用库

您可以像使用原始toolbarbutton.js一样使用此库，但它也有更多选项和功能。

在你的main.js文件中：

var self = require("sdk/self");
var toolbarbutton = require("toolbarbutton");

var button = toolbarbutton.ToolbarButton({
  id: "annotator_toolbar_button",
  label: "Web Annotator 2013",
  image: self.data.url("stop.png"),
});

/* Only move button if installing for first time */
var forceMove = (self.loadReason === "install");

button.moveTo({
  toolbarID: "nav-bar",
  insertbefore: "home-button",
  forceMove: forceMove
}); 

button.button().setAttribute( "image", self.data.url("start.png") );

您可以找到库here的工作示例。 （目前它有点过时了。）

安装库

如果您在计算机上使用附加SDK：

1. 下载Toolbar Button Complete。
2. 将其添加到您的packages目录中。 （在您的SDK目录下或您的附加组件目录下。）

如果您使用Add-on Builder创建附加组件：

1. 点击图书馆文件夹旁边的加号按钮：

   

2. 输入Toolbar Button Complete。

3. 单击“添加库”按钮：

   

更新库

图书馆托管在github here。

如果您使用Add-on Builder作为附加组件，则可以在有可用更新时单击小刷新按钮。