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

【问题标题】：Firefox simple Extension to get clicked items on panelFirefox 简单扩展以获取面板上的点击项目
【发布时间】：2015-08-29 06:31:44
【问题描述】：

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 的代码不正确，我无法解决。

【问题讨论】：

什么是输出？你在哪里打开弹出窗口？
@Manwal 不幸的是 console.log() 不起作用，我没有任何输出

标签： javascript jquery firefox firefox-addon

【解决方案1】：

解决方案：

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

【讨论】：

出色的工作和努力。请在这个 firefox-addon-sdk 区域闲逛，并帮助像您这样的其他人。你做得很棒，我看到你在这个过程中学到了很多东西！
@Noitidart 谢谢先生。