在工具栏上添加按钮

动手之前,必须先安装SDK并学习cfx基础.

这篇教程使用动作按钮API,需要Firefox 29或更新版本。

如果要给工具栏添加一个按钮,需要使用动作按钮切换按钮模块。

新建一个目录,打开它,执行cfx init

然后,把这三个图标保存到data文件夹:

icon-16.png
icon-32.png
icon-64.png

随后打开lib目录下的main.js文件,添加如下代码:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://www.mozilla.org/");
}

现在输入cfx run来执行附加组件。按钮添加到了浏览器顶部的工具栏上:

你无法设置按钮的初始位置,但是用回可以使用浏览器的自定义功能移动它。其中的id属性是必需的,用来记录按钮的位置,因此,你最好不要在后续版本中修改它。

单击按钮,https://www.mozilla.org/将会在新的标签页中加载。

设定图标

icon属性可以设定单个或是一组不同大小图标。如果你用的是一组不同大小的图标,浏览器将会自动选择最适合当前屏幕分辨率的,然后显示在浏览器界面的按钮上。更多内容,参考设定多个图标

图标文件必须打包在附加组件内:它不可以指向一个远程文件。

你只要正确地设置了按钮的icon属性,它就会立刻生效。你可以改变全局的,在特定窗口的或者是特定标签页中显示的图标或者是其他状态属性。更多内容,参考更新状态

附加一个面板

如果你想把一个面板附加到按钮上,使用切换按钮API。这就和动作按钮API类似,只不过多了一个boolean值属性,表示按钮是否被checked。附加面板,要把按钮传递给面板的show()方法。更多细节,参考切换按钮文档

显示更多样的内容

添加按钮做不到的复杂界面功能,需要使用工具栏API。 使用工具栏API你可以得到一个用户界面内容的水平条。可以添加按钮或者是可以包含HTML,CSS,javaScript的frame到工具栏上。

进一步学习

文档标签和贡献者

 此页面的贡献者: zhu91aizhu, ziyunfei, addOn, magiclogy
 最后编辑者: zhu91aizhu,