在 Firefox 的简单扩展中，我有:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id^='menuitem']").click(function() {
var id=$(this).attr('id');
addon.port.emit("id", id);
});
});
</script>
</head>
<body class="body">
<div id="menuitem_1" class="menu">ITEM 1</div>
<div id="menuitem_2" class="menu">ITEM 2</div>
<div id="menuitem_3" class="menu">ITEM 3</div>
</body>
</html>
现在我正在尝试通过
index.js 中的这段代码来处理 id:var tgbutton = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var contextMenu = require("sdk/context-menu");
var button = tgbutton.ToggleButton({
id: "updaterui",
label: ".Net Updater",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL: self.data.url("./popup.html"),
onHide: handleHide,
contentScript: "self.port.emit('resize', " +
"{width: 300," +"height: 145});"
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
panel.port.on("id", function (id) {
console.log(id);
});
panel.port.on("resize", function({width, height})
{
panel.resize(width, height);
});
panel.port.on("click-link", function(url) {
console.log(url);
});
我想通过点击获得
div id。单击 menuitem_1 后，我必须打开其他弹出窗口。用于单击 div 并获取 id 的此代码不正确，我无法解决该问题。 最佳答案
解决方案:
经过两周的调试并尝试阅读 mozilla 文档后，我现在可以解决这个问题。完整源代码:
** - - 更新 - - **
index.js:
var data = require("sdk/self").data;
var tgbutton = require('sdk/ui/button/toggle');
var panel = require("sdk/panel").Panel({
contentURL: data.url("panel.html"),
contentScriptFile: [data.url("jquery.min.js"),data.url("get-click.js")],
onHide: handleHide,
contentScript: "self.port.emit('resize', " +
"{width: 300," + "height: 145});"
});
var button = tgbutton.ToggleButton({
id: "updaterui",
label: "some lable",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
function handleChange(state) {
panel.show({
position: button
});
}
function handleHide() {
button.state('window', {checked: false});
}
panel.on("show", function () {
panel.port.emit("show");
});
panel.port.on("resize", function ({width, height}) {
panel.resize(width, height);
});
panel.port.on("id", function (id) {
console.log(id);
panel.hide();
});
get-click.js:
$(document).ready(function () {
$("[id^='menuitem']").click(function() {
var id=$(this).attr('id');
self.port.emit("id", id);
});
});
panel.html:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script>
<script src="get-text.js"></script>
<style type="text/css">
.body {
direction: rtl;
font-family: tahoma;
margin: 5px;
}
.menu{
width:96%;
height: 30px;
background-color:#fff;
padding-top:15px;
padding-right:10px;
clear: both;
cursor: pointer;
}
.menu:hover{
background-color: #ddd;
}
</style>
</head>
<body class="body">
<div id="menuitem_1" class="menu">dsfsf</div>
<div id="menuitem_2" class="menu">sssssssss</div>
<div id="menuitem_3" class="menu">fffffffffff</div>
</body>
</html>
关于javascript - Firefox 简单扩展以获取面板上的点击项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32283350/