工具栏按钮类似于后退/前进按钮的Firefox - XUL [英] Toolbar button similar to Back/Forward buttons of firefox - xul

问题描述

我正在开发一个Firefox插件。我需要创建两个按钮，看起来像后退和前进按钮。但不同的是我需要把自己的图标放在里面。我完全是空白的。任何方向将是非常有帮助的。

我编写了两个带有后退/前进按钮的按钮（虽然有两个按钮，看起来像一个）在Firefox环境中的最新Firefox。

谢谢。

解决方案

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

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

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

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

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

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

例如：

 <窗口ID = 主窗口 > 
< toolbox id =navigator-toolbox> 
< toolbar id =xulschoolhello-toolbartoolbarname =& xulschoolhello.toolbarName.label; 
 accesskey =& xulschoolhello.toolbar.accesskey; 
 customizable =truemode =iconscontext =toolbar-context-menu
 defaultset =xulschoolhello -hello-world-button
 insertbefore =PersonalToolbar/> 
< / toolbox> 
< / window> 
  

CSS文件：

  // LInk你在这里的图像// 
 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）; 
} 
  

I am developing a Firefox addon. I need to create two buttons which exactly looks and operates like back and forward buttons. But the difference is I need to put my own icon inside them. I am completely blank. Any directions will be really helpful.

[Edit] I am asking for creating two buttons with the look and feel of back/forward button(Although there are two buttons, it seems like one) in the latest Firefox on windows environment.

Thanks.

解决方案

It's really easy to add your own Image to toolbar buttons. Read these links you'll have your answer & don't forget to link your images for the buttons in CSS file.

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

For example:

<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 File:

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

这篇关于工具栏按钮类似于后退/前进按钮的Firefox - XUL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！