如何将样式表添加到工具栏

时间:2015-12-17 21:18:23

标签: css firefox-addon-sdk

使用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; }

3 个答案:

答案 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 }

请参阅self/data documentation

NB2 :SDK使用toggleaction按钮的自定义窗口小部件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中使用大写字母作为按钮,因为它们完全删除了 - 只允许使用小写字母和连字符。
  • 元素的id与按钮声明中给出的id不同。请参阅下文,了解如何提供此标识符。
  • 要在样式表文件的url中指定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