3

javascript を使用して XUL リソースをロードするにはどうすればよいですか? mdn で検索しようとしましたが、例が見つかりませんでした。

ここでの動機は、id 属性を持たない要素の上にオーバーレイを作成したいということです。

たとえば、次の xul ファイルがあるとします。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button label="Test button" oncommand="alert('Hello World!');"/>

</window>

javascript を使用してこの xul ファイルをロードし、ボタンを取得して別の要素に追加したいと思います。

助けていただければ幸いです。

4

3 に答える 3

2

通常の DOM API を使用する必要があります。

オーバーレイが可能な場所に要素をオーバーレイし、後で.appendChild()適切な場所にオーバーレイすることができます。

または、DOM API を使用して完全に作成することもできます。これは、おそらくより適切で高速な方法です。

// XUL namespace is implied in XUL overlay scripts.
var btn = document.createElement("button");
btn.setAttribute("label", "Test Button");
btn.addEventListener("command", function() { alert("Hello World!"); }, false);
someElement.appendChild(btn);
于 2013-08-13T19:25:02.907 に答える
1

あなたの質問を完全に理解しているかどうかは 100% 確信が持てませんが、2 セントを差し上げてみます。

私のアプローチは、使用しているファイルとは異なる xul ファイルから要素を取得するのに役立ちません。それが可能かどうかはわかりません。

たとえばリッチリストボックスアイテムを作成したいときのように、大きな要素を複数回使用したいときに私が通常行うことは次のとおりです。

アイテムのテンプレートを作成します。

<richlistbox id="richlistbox"/>
<richlistitem id="richListItemTemplate" hidden="true">
   <listcell class="classOne" label="one" width="50"/>
   <listcell class="classTwo" label="two" width="80"/>
</richlistitem>

テンプレートが非表示になっていることに注意してください。

次に、リッチリストボックスを含むパネルまたはページをロードすると、次のように動的に入力します。

for(var i = 0; i < elements.length; i++) {
   var item = document.getElementById("richListItemTemplate").cloneNode(true);
   item.removeAttribute("id");
   item.removeAttribute("hidden");
   item.getElementsByClassName("classOne")[0].setAttribute("label",elements.value);
   item.getElementsByClassName("classTwo")[0].setAttribute("label",elements.value);

   document.getElementById("richlistbox").appendChild(item);
}

このようにして、元の要素のクローンを作成し、id を削除しますが、その要素内で一意の className を介してその子要素にアクセスできます。

多分あなたはあなたのボタンに同じことをすることができます. andでを作成し、buttonTemplateそれを要素に追加する場合は、buttonTemplate.cloneNode(true) (すべての子要素が必要なため true) を実行し、必要に応じてカスタマイズしてから、欲しい要素。id="myButtonTemplate"hidden="true"

これがお役に立てば幸いです。

于 2013-08-30T00:40:06.367 に答える