files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

---
title: XUL_教程/匿名内容
slug: Mozilla/Tech/XUL/Tutorial/Anonymous_Content
translation_of: Archive/Mozilla/XUL/Tutorial/Anonymous_Content
---
<p> </p>
<p></p><div class="prevnext" style="text-align: right;">
    <p><a href="/zh-CN/docs/Introduction_to_XBL" style="float: left;">« 上一页</a><a href="/zh-CN/docs/&lt;a_href=">Anonymous_Content</a>"&gt;下一页  »</p>
</div><p></p>
<p>在这一节，我们将讲解用XBL创建content。</p>
<h3 id="XBL_Content" name="XBL_Content">XBL Content</h3>
<p>XBL被用来自动在另一个元素中添加一组元素。当内部元素用XBL描述时，XUL文件只需要指定外部元素。对于创建由其它控件构成的单独的控件来说这是很有用的，但只被认为是单独的控件。这里讲解了向由外部元素指定的内部元素添加属性的机理。</p>
<h4 id="Declaring_Scrollbar_Example" name="Declaring_Scrollbar_Example">Declaring Scrollbar Example</h4>
<p>以下的例子指出了滚动条是怎么声明的（从实例简化1bit）</p>
<pre>&lt;bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  &lt;binding id="scrollbarBinding"&gt;
    &lt;content&gt;
      &lt;xul:scrollbarbutton type="decrement"/&gt;
      &lt;xul:slider flex="1"&gt;
        &lt;xul:thumb/&gt;
      &lt;/xul:slider&gt;
      &lt;xul:scrollbarbutton type="increment"/&gt;
    &lt;/content&gt;
  &lt;/binding&gt;
&lt;/bindings&gt;
</pre>
<p>这个文件包含一个用binding元素声明的单独的binding。ID属性应该设置为binding的标识符。这会在css文件中设置-moz-binding属性时用到。</p>
<p>content标签被用来声明将被增进滚动条的anonymous content。content标签里的所有元素将被添加进被绑定界面元素内部。这种 binding将被绑定到滚动条，虽然没必要这样。将CSS -moz-binding 属性的设置为binding的URI的任何元素都将使用它。</p>
<p>使用上述 binding会导致下面的XUL的行会如下扩展，假设滚动条与上述的XBL相关联：</p>
<pre class="eval">&lt;scrollbar/&gt;

<strong>expands to:</strong>

&lt;scrollbar&gt;
  &lt;xul:scrollbarbutton type="decrement"/&gt;
    &lt;xul:slider flex="1"&gt;
      &lt;xul:thumb/&gt;
    &lt;/xul:slider&gt;
  &lt;xul:scrollbarbutton type="increment"/&gt;
&lt;/scrollbar&gt;
</pre>
<p>含有content标签的元素被无记录的添加到滚动条。虽然无记录内容被显示在屏幕上，但在正常方式下，不能通过脚本得到它。对于XUL，就像只有一个元素，尽管它实际上由大量元素构成。</p>
<p>检查 Mozilla窗口中的滚动条，就会发现它由一个arrow按钮、一个slider、内部thumb和一个末尾的second arrow 按钮组成。它们都是XBL上面出现过的元素。这些元素将依次绑定在运用基础XUL元素的其它bindings上。请注意 content元素需要XUL姓名空间（他们出现在XUL之前：），因为他们是XUL元素，而且在XBL中无效。这个命名空间声明在bindings标签内。如果您不想使用XUL元素的命名空间， Mozilla将假定元素都是XBL，不理解这里，您的元素可能不会正常工作。</p>
<h4 id="Filename_Input_Field_Example" name="Filename_Input_Field_Example">Filename Input Field Example</h4>
<p>另一个例子是关于输入一个文件名的域：</p>
<pre>&lt;binding id="fileentry"&gt;
  &lt;content&gt;
    &lt;textbox/&gt;
    &lt;button label="Browse..."/&gt;
  &lt;/content&gt;
&lt;/binding&gt;
</pre>
<p>连接这个元素的binding将会导致输入浏览按钮之后的文本时它包含一个域。这个内部内容被匿名的创建了，而且用DOM不能查看到。</p>
<h3 id="Override_the_Bound_Element" name="Override_the_Bound_Element">Override the Bound Element</h3>
<p>Anonymous content被匿名的创建在 binding连接到一个元素的任何地方。如果您在XUL里放置子元素，他们将覆盖由binding提供的元素。例如XUL段，假设它早期与滚动条XBL绑定：(如果在xul文件中，给被绑定界面元素添加子元素，那么会覆盖掉binding中的元素。例如下面的xul片断，假设它被绑定到了前面的scrollbar的binding上)</p>
<pre>&lt;scrollbar/&gt;

&lt;scrollbar&gt;
  &lt;button label="Overridden"/&gt;
&lt;/scrollbar&gt;
</pre>
<p>第一个滚动条，因为它没有自己的内容，它将从在XBL文件里声明的binding来生成它的内容。第二个滚动条有它自己的内容，因此它将不会运用XBL内容，这产生了不完全是滚动条的产品。请注意比如滚动条这样的内建元素，从toolkit包的bindings目录得到它们的XBL。</p>
<p>这只应用于在content标签内定义的元素。不论content是否从XBL而来或不论XUL是否提供自己的content，XBL的属性、方法和其它方面仍然可用。</p>
<h3 id="Using_the_Children_Element" name="Using_the_Children_Element">Using the Children Element</h3>
<p>当您想将XBL的内容和由XUL文件提供的内容一起都显示出来，可能需要重复几次。您能运用children元素来实现。在XUL中添加的子元素被添加来替代children元素。当创建自定义菜单控件时，这是很容易操作的。例如，一个简单的可编辑的menulist元素，可能如下创建：</p>
<pre class="eval"><strong>XUL:</strong>

&lt;menu class="dropbox"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="1000"/&gt;
    &lt;menuitem label="2000"/&gt;
  &lt;/menupopup&gt;
&lt;/menu&gt;

<strong>CSS:</strong>

menu.dropbox {
    -moz-binding:  url('<a class="external" rel="freelink">chrome://example/skin/example.xml#dropbox'</a>);
}

<strong>XBL:</strong>

&lt;binding id="dropbox"&gt;
  &lt;content&gt;
    &lt;children/&gt;
    &lt;xul:textbox flex="1"/&gt;
    &lt;xul:button src="<a class="external" rel="freelink">chrome://global/skin/images/dropbox.jpg</a>"/&gt;
  &lt;/content&gt;
&lt;/binding&gt;
</pre>
<p>这个例子用旁边的按钮创建了一个输入域，menupopup将添加到由children元素指定位置。请注意对DOM结构来说，这些内容将与在XUL文件中显示的一样，因此menupopup将成为menu的一个子元素。对于开发者来说xbl的内容是看不到的，所以也没必要知道它的位置。</p>
<p>结果内容应该是：</p>
<pre>&lt;menu class="dropbox"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="1000"/&gt;
    &lt;menuitem label="2000"/&gt;
  &lt;/menupopup&gt;
  &lt;textbox flex="1"/&gt;
  &lt;button src="chrome://global/skin/images/dropbox.jpg"/&gt;
&lt;/menu&gt;
</pre>
<h4 id="includes_Attribute" name="includes_Attribute"><code>includes</code> Attribute</h4>
<p>某些情况下，您可能希望只包括特定类型的内容。或者您只希望在不同的位置放置不同类型的内容。includes属性能够用来使只有某些元素才能在children的内容里出现。它的值应该设定到一个单独的标签名。或者到一个由“|”分隔的标签列表</p>
<pre>&lt;children includes="button"/&gt;
</pre>
<p>所有的button将会被添加到被绑定元素的children所指明的位置。其它元素将不会与这个标签匹配。您能够放置多个children 元素到一个binding中，来在不同的地方放置不同类型的内容。如果XUL中一个元素没有匹配任何children元素，那个元素（和其他任何不匹配的元素）将会被用来替代这个绑定的内容。</p>
<p>这里有另一个例子。让我们来介绍一下创建一个控件，并用两边的zoom in 和zoom out 按钮显示图象的方法。这将用一个box来创建，它包含图象和两个按钮。因为每个用法不同，这个图象元素得放置在XBL外部。</p>
<pre class="eval"><strong>XUL:</strong>

&lt;box class="zoombox"&gt;
  &lt;image src="images/happy.jpg"/&gt;
  &lt;image src="images/angry.jpg"/&gt;
&lt;/box&gt;

<strong>XBL:</strong>

&lt;binding id="zoombox"&gt;
  &lt;content&gt;
    &lt;xul:box flex="1"&gt;
      &lt;xul:button label="Zoom In"/&gt;
      &lt;xul:box flex="1" style="border: 1px solid black"&gt;
        &lt;children includes="image"/&gt;
      &lt;/xul:box&gt;
      &lt;xul:button label="Zoom Out"/&gt;
    &lt;/xul:box&gt;
  &lt;/content&gt;
&lt;/binding&gt;
</pre>
<p>XUL文件中详述的子元素将放置在children标签位置。有两幅图象，因此两个都将被添加到彼此的旁边。显示结果等价如下：</p>
<pre>&lt;binding id="zoombox"&gt;
  &lt;content&gt;
    &lt;xul:box flex="1"&gt;
      &lt;xul:button label="Zoom In"/&gt;
      &lt;xul:box flex="1" style="border: 1px solid black"&gt;
        &lt;xul:image src="images/happy.jpg"/&gt;
        &lt;xul:image src="images/angry.jpg"/&gt;
      &lt;/xul:box&gt;
      &lt;xul:button label="Zoom Out"/&gt;
    &lt;/xul:box&gt;
  &lt;/content&gt;
&lt;/binding&gt;
</pre>
<p>从 DOM的观点来看，子元素仍然在初始的存储单元。这就是说，外部的XUL box有两个子元素，它们是这两幅图像。里边带边框的box有一个子元素，就是children 标签。当使用带XBL的DOM时，这是一个重要的区别。这也可以应用于CSS选择器规则。</p>
<h4 id="Multiple_Children_Elements" name="Multiple_Children_Elements">多个子元素</h4>
<p>您也能够使用多个children元素而且可以把某些元素放置在一个地方，其它元素放置在其它地方，通过添加一个includes属性和将它设置成标签的垂直的bar-separated列表，您能够使得只有在那个列表里的元素被放置在那个地方。例如，下面的XBL将导致文本标签和按钮出现在与其他元素不同的地方。</p>
<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblcontent_1.xml.txt">Source</a></p>
<pre>&lt;binding id="navbox"&gt;
  &lt;content&gt;
    &lt;xul:vbox&gt;
      &lt;xul:label value="Labels and Buttons"/&gt;
      &lt;children includes="label|button"/&gt;
    &lt;/xul:vbox&gt;
    &lt;xul:vbox&gt;
      &lt;xul:label value="Other Elements"/&gt;
      &lt;children/&gt;
    &lt;/xul:vbox&gt;
  &lt;/content&gt;
&lt;/binding&gt;
</pre>
<p>第一个children元素只含有标签和按钮元素，正如它的includes属性指示的一样。第二个children元素因为它没有includes属性，它将包含所有的剩余的元素。</p>
<p>See also <a href="/en/XBL/XBL_1.0_Reference/Anonymous_Content" title="en/XBL/XBL_1.0_Reference/Anonymous_Content">Anonymous Content</a> section of the XBL reference.</p>
<p>(Next)在下一节，我们将研究属性如何被继承到 anonymous  content中.</p>
<p></p><div class="prevnext" style="text-align: right;">
    <p><a href="/zh-CN/docs/Introduction_to_XBL" style="float: left;">« 上一页</a><a href="/zh-CN/docs/&lt;a_href=">Anonymous_Content</a>"&gt;下一页  »</p>
</div><p></p>