Firefox Addon SDK中内容脚本中的JQuery UI

Question

我正在使用Addon Builder开发Firefox插件.我在我的插件面板中使用JQuery UI,并且还希望从与面板绑定的内容脚本中使用它.在面板页面一切正常.在内容脚本中,JQuery似乎可以工作,但我看不到JQuery UI调用的影响,例如下面的滑块案例.

以下是我定义面板的main.js的一部分:

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panel.js")
        ]
});

这是触发自定义事件的调用:

panel.port.emit("loadingDataEvent", t );

在panel.js中,以下部分尝试使用JQuery和JQuery UI.JQuery调用成功完成,但尝试更新滑块对象的JQuery UI调用对任何事情都没有任何影响:

self.port.on("loadingDataEvent", function (t) {
    $("#load-counter").html("<br />Not enough data yet. Approx. " + t + " secs. to go...");
    $( "#progressbar" ).progressbar( "option", "value", (60-t)/60*100 );
    document.defaultView.postMessage('{}', '*');
});

在我的panel.html中,我可以使用JQuery和JQueryUI,没有任何问题,通过以常规方式包含它们:

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
 ...
<script>
  $(function() {
    $( "#tabs" ).tabs();
    ....
  });
</script>

关于我可能在哪里犯错的任何想法？

Answer 1

我花了比预期更短的时间来找到答案.我的错误是在html文件中的脚本标记内部使用JQuery,例如声明滑块,因此内容脚本无法访问这些对象.将所有脚本分离到不同的文件并将其添加到内容脚本将使用的脚本文件列表中,解决了以下问题:

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panelpage.js"), // <------ this is the new file
        data.url("panel.js")
        ]
});

编辑:

在我写完这篇文章后的一段时间,我还发现了以下内容:将data.url("panelpage.js")传递到contentScriptFile后,需要从包含它的HTML文件中删除对脚本文件的相应引用在脚本标记之间,否则这似乎会导致一些冲突.