javascript - 动态改变工具栏按钮的图像？ -- 使用 Erik Vold 的工具栏按钮.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 工具栏按钮库的图像属性。

如有任何帮助，我们将不胜感激。

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. 输入工具栏按钮完成。

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

   

更新库

该库托管于 github here .

如果您使用 Add-on Builder对于您的附加组件，当有可用更新时，您只需单击小刷新按钮即可。