工具栏按钮类似于firefox - xul的后退/前进按钮

时间:2011-09-22 18:14:43

标签: firefox firefox-addon xul

我正在开发一个Firefox插件。我需要创建两个按钮,它们的外观和操作方式与后退和前进按钮完全相同。但不同的是我需要将自己的图标放在其中。我完全是空白的。任何指示都会非常有用。

[编辑] 我要求在Windows环境中的最新Firefox中创建两个带有后退/前进按钮外观的按钮(虽然有两个按钮,看起来像一个)。

感谢。

1 个答案:

答案 0 :(得分:1)

将您自己的图像添加到工具栏按钮非常简单。阅读这些链接,您将得到答案&不要忘记将图像链接到CSS文件中的按钮。

https://developer.mozilla.org/en/XUL_School/Adding_Toolbars_and_Toolbar_Buttons

https://developer.mozilla.org/en/XUL_Tutorial/Toolbars

https://developer.mozilla.org/en/CSS/-moz-border-image

https://developer.mozilla.org/en/custom_toolbar_button

https://developer.mozilla.org/en/XUL/Toolbars/Creating_toolbar_buttons

例如:

<window id="main-window">
  <toolbox id="navigator-toolbox">
    <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarName.label;"
      accesskey="&xulschoolhello.toolbar.accesskey;"
      customizable="true" mode="icons" context="toolbar-context-menu" 
      defaultset="xulschoolhello-hello-world-button"
      insertbefore="PersonalToolbar" />
  </toolbox>
</window>

CSS文件:

 //LInk you image here//
    toolbarbutton.xulschoolhello-toolbarbutton,
    window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
    toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
      list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
    }