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

任何帮助，将不胜感激。

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") );

您可以在此处找到该库的工作示例。（不过，目前它有点过时了。）

安装库

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

1. 下载工具栏按钮完成。
2. 将其添加到您的packages目录中。（在您的 SDK 目录下或在您的插件目录下。）

如果您使用Add-on Builder来创建您的插件：

1. 单击库文件夹旁边的加号按钮：

   

2. 输入Toolbar Button Complete.

3. 单击添加库按钮：

   

更新库

该库托管在github上 。

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