diff options
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html')
| -rw-r--r-- | files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html new file mode 100644 index 0000000000..6362be89f6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html @@ -0,0 +1,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/<a_href=">Anonymous_Content</a>">下一页 »</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><bindings xmlns="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <binding id="scrollbarBinding"> + <content> + <xul:scrollbarbutton type="decrement"/> + <xul:slider flex="1"> + <xul:thumb/> + </xul:slider> + <xul:scrollbarbutton type="increment"/> + </content> + </binding> +</bindings> +</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"><scrollbar/> + +<strong>expands to:</strong> + +<scrollbar> + <xul:scrollbarbutton type="decrement"/> + <xul:slider flex="1"> + <xul:thumb/> + </xul:slider> + <xul:scrollbarbutton type="increment"/> +</scrollbar> +</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><binding id="fileentry"> + <content> + <textbox/> + <button label="Browse..."/> + </content> +</binding> +</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><scrollbar/> + +<scrollbar> + <button label="Overridden"/> +</scrollbar> +</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> + +<menu class="dropbox"> + <menupopup> + <menuitem label="1000"/> + <menuitem label="2000"/> + </menupopup> +</menu> + +<strong>CSS:</strong> + +menu.dropbox { + -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#dropbox'</a>); +} + +<strong>XBL:</strong> + +<binding id="dropbox"> + <content> + <children/> + <xul:textbox flex="1"/> + <xul:button src="<a class="external" rel="freelink">chrome://global/skin/images/dropbox.jpg</a>"/> + </content> +</binding> +</pre> +<p>这个例子用旁边的按钮创建了一个输入域，menupopup将添加到由children元素指定位置。请注意对DOM结构来说，这些内容将与在XUL文件中显示的一样，因此menupopup将成为menu的一个子元素。对于开发者来说xbl的内容是看不到的，所以也没必要知道它的位置。</p> +<p>结果内容应该是：</p> +<pre><menu class="dropbox"> + <menupopup> + <menuitem label="1000"/> + <menuitem label="2000"/> + </menupopup> + <textbox flex="1"/> + <button src="chrome://global/skin/images/dropbox.jpg"/> +</menu> +</pre> +<h4 id="includes_Attribute" name="includes_Attribute"><code>includes</code> Attribute</h4> +<p>某些情况下，您可能希望只包括特定类型的内容。或者您只希望在不同的位置放置不同类型的内容。includes属性能够用来使只有某些元素才能在children的内容里出现。它的值应该设定到一个单独的标签名。或者到一个由“|”分隔的标签列表</p> +<pre><children includes="button"/> +</pre> +<p>所有的button将会被添加到被绑定元素的children所指明的位置。其它元素将不会与这个标签匹配。您能够放置多个children 元素到一个binding中，来在不同的地方放置不同类型的内容。如果XUL中一个元素没有匹配任何children元素，那个元素（和其他任何不匹配的元素）将会被用来替代这个绑定的内容。</p> +<p>这里有另一个例子。让我们来介绍一下创建一个控件，并用两边的zoom in 和zoom out 按钮显示图象的方法。这将用一个box来创建，它包含图象和两个按钮。因为每个用法不同，这个图象元素得放置在XBL外部。</p> +<pre class="eval"><strong>XUL:</strong> + +<box class="zoombox"> + <image src="images/happy.jpg"/> + <image src="images/angry.jpg"/> +</box> + +<strong>XBL:</strong> + +<binding id="zoombox"> + <content> + <xul:box flex="1"> + <xul:button label="Zoom In"/> + <xul:box flex="1" style="border: 1px solid black"> + <children includes="image"/> + </xul:box> + <xul:button label="Zoom Out"/> + </xul:box> + </content> +</binding> +</pre> +<p>XUL文件中详述的子元素将放置在children标签位置。有两幅图象，因此两个都将被添加到彼此的旁边。显示结果等价如下：</p> +<pre><binding id="zoombox"> + <content> + <xul:box flex="1"> + <xul:button label="Zoom In"/> + <xul:box flex="1" style="border: 1px solid black"> + <xul:image src="images/happy.jpg"/> + <xul:image src="images/angry.jpg"/> + </xul:box> + <xul:button label="Zoom Out"/> + </xul:box> + </content> +</binding> +</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><binding id="navbox"> + <content> + <xul:vbox> + <xul:label value="Labels and Buttons"/> + <children includes="label|button"/> + </xul:vbox> + <xul:vbox> + <xul:label value="Other Elements"/> + <children/> + </xul:vbox> + </content> +</binding> +</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/<a_href=">Anonymous_Content</a>">下一页 »</p> +</div><p></p> |