使用Firefox Addon SDK,我创建了一个包含多个按钮的工具栏,我想为按钮创建鼠标悬停效果。
起初我想使用mouseover event,但是我必须创建一个mouseout
事件才能恢复正常,所以我认为最好的方法是使用css
在我的旧版XUL版本的插件中,我能够通过在XUL代码中链接到样式表来附加样式表,只需为我的#buttonID
添加css,它完美无缺。
但是如何使用Addon SDK为工具栏添加css样式表?
这是我到目前为止所尝试过的(不产生任何错误),但我认为这只是针对内容;如果 正确,那么我不确定如何绑定元素:
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; }
答案 0 :(得分:1)
在浏览器工具箱中测试过:
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));
注释部分允许从插件data
目录中的样式表文件加载。
请注意,您需要导入SDK加载程序才能在工具箱中使用它。
在SDK插件中,只需直接使用require
。
NB :拼写有所不同:self.data.url
vs { uri }
NB2 :SDK使用toggle和action按钮的自定义窗口小部件ID方案,因此您的按钮ID可能与预期不符:
const toWidgetId = id =>
('toggle-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');
OR
const toWidgetId = id =>
('action-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');
答案 1 :(得分:0)
使用此代码,您应该可以使用鼠标悬停或悬停来改变它的外观。
#buttonID {
//Normal state css here
}
#buttonID:hover {
//insert css stuff here
}
答案 2 :(得分:0)
这是在javascript文件中:
const { browserWindows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { loadSheet } = require("sdk/stylesheet/utils");
const { ActionButton } = require("sdk/ui/button/action");
var StyleUtils = require('sdk/stylesheet/utils');
var myButton = ActionButton({
id: "mybutton",
label: "My Button",
icon: { "16": "./icon-16.png", "32":"./icon-32.png", "64": "./icon-64.png" },
onClick: function(state) {
console.log("mybutton '" + state.label + "' was clicked");
}
});
//this is how you attach the stylesheet to the browser window
function styleWindow(aWindow) {
let domWin = viewFor(aWindow);
StyleUtils.loadSheet(domWin, "chrome://myaddonname/content/myCSSfile.css", "agent");
}
windows.on("open", function(aWindow) {
styleWindow(aWindow);
});
styleWindow(windows.activeWindow);
这是
的css//don't forget to add the .toolbarbutton-icon class at the end
#action-button--mystrippedadonid-mybuttonid .toolbarbutton-icon,{
background-color: green;
}
这里有几个问题。
id
中使用大写字母作为按钮,因为它们完全删除了 - 只允许使用小写字母和连字符。content
(在loadSheet函数调用中),还需要在addon文件夹的根目录中创建chrome.manifest
,并把它放在其中:content spadmintoolbar data/
其中"数据"是根文件夹中的真实目录的名称。我需要一个data/
文件夹,因此我可以为按钮声明加载图标,但是您需要在chrome.manifest
中声明您的虚拟目录jpm init
不适合您。如何获取css文件的元素ID:
获取按钮元素的id
以便在外部样式表中使用的简单方法是测试您的插件,然后使用浏览器工具箱的检查器找到元素,从那里你可以从输出的代码中获取id。
但是,如果您想自己计算,请尝试使用此公式。
[button-class]
=按钮的sdk类。操作按钮变为action-button
[mybuttonid]
=您在sdk按钮声明中给出了按钮id
[myaddonname]
=您在name
文件中添加了package.json
个插件。[strippedaddonid]
=在id
文件中获取您分配了插件的package.json
,并删除所有@符号或点,并将其全部更改为小写。现在把它们放在一起(不要包括方括号):
`#[button-class]--[strippedaddonid]-[mybuttonid]]`
示例:action-button--myaddonsomewherecom-mybutton
真的很简单吗?
样式表附加代码的信用额转到mconley