如何向工具栏添加样式表 [英] How to add stylesheet to toolbar

问题描述

使用Firefox Addon SDK，我创建了一个带有多个按钮的工具栏，我想为这些按钮创建鼠标悬停效果。

Using the Firefox Addon SDK, I am creating a toolbar with several buttons and I want to create a mouseover effect for the buttons.

a 鼠标悬停事件，但我会必须创建一个 mouseout 事件才能恢复正常，所以我想最好的方法是使用css

At first I thought to use a mouseover event, but then I would have to create a mouseout event to return it to normal, so I figured the best way would be to use css

在我的旧XUL版本的我的插件，我能够附加样式表通过链接到它的XUL代码，只是添加css为我的 #buttonID ，这完美地工作。

In my old XUL version of my addon I was able to attach the stylesheet by linking to it in the XUL code and just add css for my #buttonID, which worked perfectly.

但是如何使用Addon SDK为我的工具栏添加css样式表？

But how do I add the css stylesheet for my toolbar using the Addon SDK?

（我没有产生任何错误），但我认为这只是为了内容;如果这个是正确的，那么我不知道如何绑定到元素：

Here's what I've tried so far (which does not produce any errors), but I think this is just for content; if this is correct, then I'm not sure how to bind to the element:

const { browserWindows } = require("sdk/windows");
const { loadSheet } = require("sdk/stylesheet/utils");


//This is how to load an external stylesheet
for(let w of browserWindows){
    loadSheet(viewFor(w), "./myStyleSheet.css","author"  );
}

我也尝试过：

var Style = require("sdk/stylesheet/style").Style;
let myStyle = Style({source:'./myStyleSheet.css'});
for(let w of browserWindows){ 
    attachTo(myStyle, viewFor(w))
};

并且：

var { attach, detach } = require('sdk/content/mod');
const { browserWindows } = require("sdk/windows");
var { Style } = require('sdk/stylesheet/style');

var stylesheet = Style({
  uri: self.data.url('myStyleSheet.css')
});

for(let w of browserWindows){ 
    attach(stylesheet, viewFor(w))
};

这里是我的css：

#myButton:hover{list-style-image(url("./icon-16b.png")!important; }

推荐答案

在浏览器工具箱中测试此工具：

Tested this in Browser Toolbox:

const { require } = Cu.import("resource://gre/modules/commonjs/toolkit/require.js"); // skip this in SDK
const { browserWindows: windows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { attachTo } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
let style = Style({ source: "#my-button{ display: none!important; }" });
// let self = require("sdk/self");
// let style = Style({ uri: self.data.url("style.css") });

for (let w of windows)
    attachTo(style, viewFor(w));

已注释的部分允许从样式表文件中的数据目录中加载。

The commented part allows to load from a stylesheet file in the addon data directory.

需要导入SDK加载器才能在工具箱中使用它。
在SDK插件中，直接使用 require 。

Notice that you need to import SDK loader to use it in the toolbox. When in an SDK addon, just use require directly.

NB ：拼写有区别： self.data.url vs {uri}

NB: there is a difference in spelling: self.data.url vs { uri }

请参阅自我/ data documentation 。

NB2 ：SDK使用自定义窗口小部件ID方案 toggle 和 action 按钮，因此您的按钮ID可能不是您期望的：

NB2: SDK uses a custom widget ID scheme for toggle and action buttons so your button ID might not be what you expect:

const toWidgetId = id => 
    ('toggle-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');

或

const toWidgetId = id =>
    ('action-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');

这篇关于如何向工具栏添加样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！