mozilla

比较版本

动态修改基于XUL的用户界面

更改版本

修订版 253087:

由 Ianyang 在 进行的修订 253087

修订版 226723:

由 Ianyang 在 进行的修订 226723

标题:
动态修改基于XUL的用户界面
动态修改基于XUL的用户界面
网址缩略名:
动态修改基于XUL的用户界面
动态修改基于XUL的用户界面
标签:
DOM, Extensions, XUL
内容:

修订版 253087
修订版 226723
t7    <p>t
8      This article discusses manipulating <a href="cn/XUL">XUL</a
>> interfaces, using <a href="cn/DOM">DOM</a> and other APIs. It e 
>xplains the concept of DOM <i>documents</i>, demonstrates a few s 
>imple examples of using DOM calls to perform basic manipulations  
>on a document, and then demonstrates working with <i>anonymous <a 
> href="cn/XBL">XBL</a> content</i> using Mozilla-specific methods 
>. 
9    </p>
10    <p>
11      It is written for beginner to intermediate XUL developers. 
>We assume that the reader has basic knowledge of both XUL and Jav 
>aScript. You may also want to read some introductory documents ab 
>out DOM, like the <a href="cn/About_the_Document_Object_Model">Ab 
>out the Document Object Model</a> article or the <a href="cn/Geck 
>o_DOM_Reference/Introduction">Introduction page</a> of the <a hre 
>f="cn/Gecko_DOM_Reference">Gecko DOM Reference</a>. 
12    </p>
13    <h3 id=".E4.BB.8B.E7.BB.8D" name=".E4.BB.8B.E7.BB.8D">
14      介绍
15    </h3>
16    <p>
17      如你所知,<a href="cn/XUL">XUL</a>是一种在各种基于Mozilla应用程序,如Firefox和T
>hunderbird 中使用,用于描述用户界面的<a href="cn/XML">XML</a>语言。在 XUL 应用程序中 <a 
> href="cn/JavaScript">JavaScript</a> 定义行为,使用<a href="cn/Gecko_DOM 
>_Gecko_DOM_Reference">DOM API</a>访问XUL文档。 
18    </p>
19    <p>
20      那么什么是文档模型API?
21    </p>
22    <p>
23      They are the interfaces that are used in any interaction of
> a script and a document. If you have ever written a script that  
>interacts with a XUL (or HTML) document, you have already used DO 
>M calls. The most well known DOM method is probably <code><a href 
>="cn/DOM/document.getElementById">document.getElementById()</a></ 
>code>, which returns an element, given its <code>id</code>. You m 
>ay also have used other calls, such as <code><a href="cn/DOM/elem 
>ent.setAttribute">element.setAttribute()</a></code>, or, if you w 
>rote an extension, the <code><a href="cn/DOM/element.addEventList 
>ener">addEventListener()</a></code> method. All of these are defi 
>ned in DOM. 
24    </p>
25    <p>
26      There are also DOM methods that create, move, or delete ele
>ments from a document. They will be demonstrated in a later secti 
>on. Right now, let's learn what a <i>document</i> is. 
27    </p>
28    <h3 id="What_is_a_document.3F" name="What_is_a_document.3F">
29      What is a document?
30    </h3>
31    <p>
32      A document is a data structure which is manipulated through
> DOM APIs. A logical structure of every document is a tree, with  
>nodes being elements, attributes, processing instructions, commen 
>ts, etc. Use the <a href="cn/DOM_Inspector">DOM Inspector</a> too 
>l to see the tree representation of any document. <span class="co 
>mment">Todo: simple example of a XUL document and a tree</span> 
33    </p>
34    <p>
35      You can think of a document as an in-memory representation 
>of valid HTML or well-formed XML such as XHTML or XUL. 
36    </p>
37    <p>
38      It is important to remember that different web pages (and e
>ven different instances of the same web page) correspond to diffe 
>rent documents. Each XUL window has its own distinct document, an 
>d there may even be a few different documents in a single window, 
> when there is an <code><a href="cn/XUL/iframe">&lt;iframe&gt;</a 
>></code>, <code><a href="cn/XUL/browser">&lt;browser&gt;</a></cod 
>e>, or a <code><a href="cn/XUL/tabbrowser">&lt;tabbrowser&gt;</a> 
></code> element. You must be sure to always manipulate the correc 
>t document. (Read more about this in <a href="cn/Working_with_win 
>dows_in_chrome_code">Working with windows in chrome code</a>.) Wh 
>en your script is included using a <code><a href="cn/XUL/script"> 
>&lt;script&gt;</a></code> tag, the <code>document</code> property 
> references the DOM document that includes the script. 
39    </p>
40    <h3 id=".E7.A4.BA.E4.BE.8B.EF.BC.9A.E4.BD.BF.E7.94.A8DOM.E6.9
>6.B9.E6.B3.95" name=".E7.A4.BA.E4.BE.8B.EF.BC.9A.E4.BD.BF.E7.94.A 
>8DOM.E6.96.B9.E6.B3.95"> 
41      示例:使用DOM方法
42    </h3>
43    <p>
44      本节演示 <code><a href="cn/DOM/element.appendChild">appendChild
>()</a></code>, <code><a href="cn/DOM/document.createElement">crea 
>teElement()</a></code>, <code><a href="cn/DOM/element.insertBefor 
>e">insertBefore()</a></code>, 和<code><a href="cn/DOM/element.remo 
>veChild">removeChild()</a></code> DOM 方法的使用。 
45    </p>
46    <h4 id=".E7.A7.BB.E9.99.A4.E4.B8.80.E4.B8.AA.E5.85.83.E7.B4.A
>0.E7.9A.84.E6.89.80.E6.9C.89.E5.AD.90.E5.85.83.E7.B4.A0" name=".E 
>7.A7.BB.E9.99.A4.E4.B8.80.E4.B8.AA.E5.85.83.E7.B4.A0.E7.9A.84.E6. 
>89.80.E6.9C.89.E5.AD.90.E5.85.83.E7.B4.A0"> 
47      移除一个元素的所有子元素
48    </h4>
49    <p>
50      This example removes all children of an element with id=<co
>de>someElement</code> from the current document, by calling <code 
>><a href="cn/DOM/element.removeChild">removeChild()</a></code> me 
>thod to remove the first child, until there are no children remai 
>ning. 
51    </p>
52    <p>
53      Note, that <code><a href="cn/DOM/element.hasChildNodes">has
>ChildNodes()</a></code> and <code><a href="cn/DOM/element.firstCh 
>ild">firstChild</a></code> are also part of the DOM API. 
54    </p>
55    <pre class="eval">
56var element = document.getElementById("someElement");
57  while(element.hasChildNodes()){
58    element.removeChild(element.firstChild);
59  }
60</pre>
61    <h4 id=".E6.8F.92.E5.85.A5.E8.8F.9C.E5.8D.95.E9.A1.B9.E5.88.B
>0.E8.8F.9C.E5.8D.95.E4.B8.AD" name=".E6.8F.92.E5.85.A5.E8.8F.9C.E 
>5.8D.95.E9.A1.B9.E5.88.B0.E8.8F.9C.E5.8D.95.E4.B8.AD"> 
62      插入菜单项到菜单中
63    </h4>
64    <p>
65      This example adds two new menu items to a <code><a href="cn
>/XUL/menupopup">&lt;menupopup&gt;</a></code>: to the start and to 
> the end of it. It uses <code><a href="cn/DOM/document.createElem 
>entNS">document.createElementNS()</a></code> method to create the 
> items, and <code><a href="cn/DOM/element.insertBefore">insertBef 
>ore()</a></code> with <code><a href="cn/DOM/element.appendChild"> 
>appendChild()</a></code> to insert the created xml elements withi 
>n the document. 
66    </p>
67    <p>
68      注意力:
69    </p>
70    <ul>
71      <li>
72        <code><a href="cn/DOM/document.createElementNS">document.
>createElementNS()</a></code> creates an element, but does not put 
> it anywhere in the document. You need to use other DOM methods,  
>such as <code><a href="cn/DOM/element.appendChild">appendChild()< 
>/a></code> to insert the newly created element in the document. 
73      </li>
74      <li>
75        <code><a href="cn/DOM/element.appendChild">appendChild()<
>/a></code> appends the node after all other nodes, while <code><a 
> href="cn/DOM/element.insertBefore">insertBefore()</a></code> ins 
>erts the node before the node referenced by its second paramerer. 
76      </li>
77    </ul>
78    <pre class="eval">
79function createMenuItem(aLabel) {
80  const XUL_NS = "<span class="nowiki">http://www.mozilla.org/key
>master/gatekeeper/there.is.only.xul</span>"; 
81  var item = document.createElementNS(XUL_NS, "menuitem"); // cre
>ate a new XUL menuitem 
82  item.setAttribute("label", aLabel);
83  return item;
84}
85var popup = document.getElementById("myPopup"); // a &lt;menupopu
>p&gt; element 
86var first = createMenuItem("First item");
87var last = createMenuItem("Last item");
88popup.insertBefore(first, popup.firstChild);
89popup.appendChild(last);
90</pre>
91    <p>
92      You can also use <code><a href="cn/DOM/element.appendChild"
>>appendChild()</a></code> and <code><a href="cn/DOM/element.inser 
>tBefore">insertBefore()</a></code> to move existing elements. For 
> example you could move the item labeled "First item" to the end  
>of popup by adding this statement as a last line to the snippet a 
>bove: 
93    </p>
94    <pre class="eval">
95popup.appendChild(first);
96</pre>
97    <p>
98      This statement would remove the node from its current posit
>ion in the document and re-insert it at the end of the popup. 
99    </p>
100    <h3 id="Anonymous_content_.28XBL.29" name="Anonymous_content_
>.28XBL.29"> 
101      Anonymous content (XBL)
102    </h3>
103    <p>
104      <a href="cn/XBL">XBL</a> is the language used in Mozilla to
> define new widgets. Widgets defined in XBL may choose to define  
>some content which is inserted to the bound element, when the bin 
>ding is attached. This content, called <i>anonymous content</i>,  
>is not accessible through normal DOM methods. 
105    </p>
106    <p>
107      You need to use the methods of <code><a href="cn/NsIDOMDocu
>mentXBL">nsIDOMDocumentXBL</a></code> interface instead. For exam 
>ple: 
108    </p>
109    <pre class="eval">
110// gets the first anonymous child of the given node
111document.getAnonymousNodes(node)[0];
112 
113// returns a NodeList of anonymous elements with anonid attribute
> equals el1 
114document.getAnonymousElementByAttribute(node, "anonid", "el1");
115</pre>
116    <p>
117      See <a href="cn/XBL/XBL_1.0_Reference/DOM_Interfaces#getAno
>nymousNodes">getAnonymousNodes</a> and <a href="cn/XBL/XBL_1.0_Re 
>ference/DOM_Interfaces#getAnonymousElementByAttribute">getAnonymo 
>usElementByAttribute</a> in the XBL reference for more informatio 
>n. 
118    </p>
119    <p>
120      Once you have an anonymous node, you can use regular DOM me
>thods to navigate and manipulate the rest of the nodes of that bi 
>nding. 
121    </p>
122    <h3 id="See_also" name="See_also">
123      See also
124    </h3>
125    <ul>
126      <li>
127        <a href="cn/XUL_Tutorial/Document_Object_Model">A related
> chapter on DOM</a> 
128      </li>
129      <li>
130        <a href="cn/XUL_Tutorial/Modifying_a_XUL_Interface">XUL T
>utorial:Modifying a XUL Interface</a> 
131      </li>
132    </ul>
133    <div class="noinclude"></div>{{ languages( { "fr": "fr/Modifi
>cation_dynamique_d\'interfaces_utilisateur_en_XUL", "ja": "ja/Dyn 
>amically_modifying_XUL-based_user_interface", "pl": "pl/Dynamiczn 
>e_zmiany_interfejsu_u\u017cytkownika_bazuj\u0105cego_na_XUL-u", " 
>ru": "ru/\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u 
>043a\u0438_\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b 
>\u0439_\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u04 
>35\u043b\u044c\u0441\u043a\u0438\u0439_\u0438\u043d\u0442\u0435\u 
>0440\u0444\u0435\u0439\u0441_\u043d\u0430_XUL" } ) }} 

返回历史