2

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>

どこで間違いを犯している可能性があるかについてのアイデアはありますか?

4

1 に答える 1

5

答えを見つけるのに思ったよりもずっと短かった。私の間違いは、スライダーの宣言など、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ファイルから削除する必要があります。スクリプトタグ間、そうでない場合は、いくつかの競合が発生するようです。

于 2012-08-17T00:52:16.613 に答える