Question

在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不正确，我无法解决此问题。

Answer 1

<强> SOLUTION：

经过两周的调试并尝试阅读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();
});

获取-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>

Firefox简单扩展以获取面板上的点击项目

1 个答案: