diff options
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul/tutorial')
55 files changed, 0 insertions, 5732 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/adding_buttons/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/adding_buttons/index.html deleted file mode 100644 index 607e4d0abc..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/adding_buttons/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: XUL_教程/增加一些按钮 -slug: Mozilla/Tech/XUL/Tutorial/Adding_Buttons -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_Labels_and_Images">下一页 »</a></p> -</div><p></p> -<p> </p> -<p>在本章，我们将学习如何向window添加button。</p> -<h3 id=".E6.B7.BB.E5.8A.A0.E5.A4.9A.E4.B8.AA.E6.8C.89.E9.92.AE.E5.88.B0.E4.B8.80.E4.B8.AA.E7.AA.97.E5.8F.A3" name=".E6.B7.BB.E5.8A.A0.E5.A4.9A.E4.B8.AA.E6.8C.89.E9.92.AE.E5.88.B0.E4.B8.80.E4.B8.AA.E7.AA.97.E5.8F.A3">添加多个按钮到一个窗口</h3> -<p>到目前为止我们创建的这个窗口里面什么也没有,因此还不算非常有趣. 在这一节中,我们将添加两个按钮, 一个“查找”按钮和一个“取消”按钮.我们还将学到一个简单的方法在窗口上来定位它们.</p> -<p>像HTML, XUL也有许多标记，它们被用来当作创建用户接口的元素. 最基本的一个 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 标记. 这个元素被用来创建简单的按钮。</p> -<p>按钮元素有两个主要的属性，一个<code>label</code>和一个<code>image</code>。你可以要一个或两个都要。因此，按钮可以只有一个标签，一个图片或标签和图片都有。通常在对话框中会使用“确定”和“取消”按钮。</p> -<h4 id=".E6.8C.89.E9.92.AE.E7.9A.84.E8.AF.AD.E6.B3.95" name=".E6.8C.89.E9.92.AE.E7.9A.84.E8.AF.AD.E6.B3.95">按钮的语法</h4> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>标签有下面的语法要求：</p> -<pre><button - id="identifier" - class="dialog" - label="OK" - image="images/image.jpg" - disabled="true" - accesskey="t"/> -</pre> -<p>可用的属性如下，有一些是可选的:</p> -<dl> - <dt> - <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> - <dd> - 你用来标识按钮的唯一标识。你会在所有的元素中看到此属性。你可以在样式表(style)或脚本(script)中通过它来引用按钮。因此，你几乎可以在所有的元素中添加这个属性。在这个教程中它不是一直都出现在元素中（It isn't always placed on elements in this tutorial for simplicity）。</dd> - <dt> - <code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt> - <dd> - 按钮的样式表。在这里的用法和在HTML中是一样的。它是使用在显示按钮里面的样式。在这节中的<code>dialog</code>值就使用了。多数情况下，你不用在按钮上使用此属性。</dd> - <dt> - <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt> - <dd> - 标签会显示在按钮上。例如，“确定”或者“取消”。如果没人设置这个参数，在按钮上就不会显示文字。</dd> - <dt> - <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> </dt> - <dd> - 在按钮上显示指定路径的图片。如果没有给出此属性，则不会显示图片。你通常可以使用如下的样式表属性<code><a href="/cn/CSS/list-style-image" title="cn/CSS/list-style-image">list-style-image</a></code>来指定要显示的图片。</dd> - <dt> - <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> - <dd> - 如果这个属性被设置为<code>true</code>，按钮就会被禁用。这样通常按钮上的文字将会显示为灰色（grey）。如果按钮被禁用，按钮上的功能就不可以被执行。如果这个属性没有设置，按钮就是启用的。你可以用<a href="/cn/JavaScript" title="cn/JavaScript">JavaScript</a>来对按钮的可用状态进行控制。</dd> - <dt> - <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt> - <dd> - 这个属性让你可以设置一个字母它的功能就像是一个快捷键。这个字母会被划上下划线并显示在标签里。当用户按ALT键(或者在每个平台中一个功能类似的键)的同时按下这里设置的键时，不论按钮在窗口的任何地方都能取得到焦点。</dd> -</dl> -<p>注释：按钮支持比上面列出的更多的属性。其他的属性可以参考 <a href="/cn/XUL_教程/More_Button_Features" title="cn/XUL_教程/More_Button_Features">discussed later</a>.</p> -<h4 id=".E6.9B.B4.E5.A4.9A.E7.9A.84.E6.8C.89.E9.92.AE.E4.BE.8B.E5.AD.90" name=".E6.9B.B4.E5.A4.9A.E7.9A.84.E6.8C.89.E9.92.AE.E4.BE.8B.E5.AD.90">更多的按钮例子</h4> -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">View</a></p> -<div class="float-right"> - <img alt="image:Buttons1.png" class="internal" src="/@api/deki/files/2609/=Buttons1.png"></div> -<pre><button label="Normal"/> -<button label="Disabled" disabled="true"/> -</pre> -<p>上面的这些例子是在图片里面生成按钮。第一个按钮是一个标准的按钮。第二个按钮是禁用的，所以它整个显示为灰色。</p> -<p>注：label属性不应该指定中文名称，否则解析xul时会报错。对于本地化，应该通过locale包来完成。</p> -<p>我们将从为查找文件工具创建一个简单的查找按钮开始。下面这个例子的源码显示怎么去做这件事。</p> -<pre><button id="find-button" label="Find"/> -</pre> -<div class="note"> - 注释：Firefox不允许你从网页上打开chrome，因此查看教程中的链接时会显示在一个标准的浏览器窗口中。至此，按钮会显示在窗口中间并自动伸展。你可以增加align="start"到window标签阻止其自动伸展。</div> -<div class="highlight"> - <h5 id=".E4.BE.8B.E5.AD.90_findfile.xul" name=".E4.BE.8B.E5.AD.90_findfile.xul">例子 findfile.xul</h5> - <p>请添加我们在前面章节创建的这些代码到findfile.xul文件。这些代码必须插入到 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 标签里面。代码是下面红色显示的部份:</p> - <pre class="eval"><?xml version="1.0"?> -<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> -<window - id="findfile-window" - title="Find Files" - orient="horizontal" - xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> - - <span class="highlightred"><button id="find-button" label="Find"/></span> - <span class="highlightred"><button id="cancel-button" label="Cancel"/></span> - -</window> -</pre> - <div class="float-right"> - <img alt="Image:buttons2.png" class="internal" src="/@api/deki/files/2652/=Buttons2.png"></div> - <p>你也可以注释掉“取消”按钮。窗口提供水平对齐地显示两个按钮。如果你在Mozilla中打开这个文件，你就可以获得和这里显示的图片一样的效果。</p> -</div> -<p> </p> -<div class="note"> - 注解：我们不能直接在XUL文件中写文本标签。我们可以使用 <a href="/Cn/XUL_教程/本地化" title="Cn/XUL_教程/本地化">实体替换这样文本可以很容易地进行翻译</a>.</div> -<p>在下一节，我们将会学会怎么<a href="/cn/XUL_教程/增加标签和图像" title="cn/XUL_教程/增加标签和图像">向窗口中增加标签和图片</a>。</p> -<p><small>查看更多参考 <a href="/cn/XUL_教程/更多的按钮特性" title="cn/XUL_教程/更多的按钮特性">更多按钮特性</a></small></p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_Labels_and_Images">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/adding_event_handlers/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/adding_event_handlers/index.html deleted file mode 100644 index ef85e01bd1..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/adding_event_handlers/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 添加事件处理函数 -slug: Mozilla/Tech/XUL/Tutorial/Adding_Event_Handlers -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers ---- -<p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Scrolling_Menus" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/More_Event_Handlers" rel="internal">Next</a> »</span></p> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> 到此为止我们的 findfile 看起来很棒。我们还没有搞定它，因为到此为止我们仅只是建立了一个简单的用户界面。接下来我们将给他添加脚本。</p> - -<div id="section_1"> -<h3 class="editable" id="使用脚本"><span>使用脚本</span></h3> - -<div class="editIcon"><a href="/../../../../en/XUL_Tutorial/Adding_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> 为了使 find files 对话框工作，我们需要添加一些脚本来完成与用户的交互。我们想要为查找按钮、取消按钮以及各级菜单项添加脚本。我们会像在 <a href="../../../../en/HTML" rel="internal">HTML</a> 中一样使用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a> 来写一些函数。</p> - -<p> 你可以使用 <code><span class="lang lang-en"><a href="../../../../en/XUL/script" rel="internal">script</a> <span style="font-family: verdana,tahoma,sans-serif;">元素为</span></span></code> XUL 文件引入脚本。你可以直接在<code> <script></code> <code></</code><code>script></code>标签之间嵌入脚本，但是最好是使用独立的文件来包含脚本，这样 XUL 窗口加载会快一些。 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/src" rel="internal">src</a> <span style="font-family: verdana,tahoma,sans-serif;">属性用于引入外部脚本文件。</span></span></code></p> - -<div class="highlight"> -<div id="section_2"> -<h5 class="editable" id="find_files_的例子"><span> find files 的例子</span></h5> - -<div class="editIcon"><a href="/../../../../en/XUL_Tutorial/Adding_Event_Handlers#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> 让我们为 find file 对话框添加脚本。尽管脚本文件的文件名无关紧要，但通常的它采用与 XUL 文件相同的文件名并以 .js 作为后缀。我们建立一个 findfile.js 文件。把下面的一行加到 <code><span class="lang lang-en"><a href="../../../../en/XUL/window" rel="internal">window</a> 开标记之后，所有元素<strong>之前</strong>。</span></code></p> - -<pre class="eval"><span class="highlightred"><script src="findfile.js"/></span> -</pre> - -<p> 当我们知道改在脚本文件里添加什么之后，我们再建立这个文件。我们会在这个文件中定义一些函数，并且我们把这些函数称为事件处理函数。</p> -</div> -</div> - -<p> 你可以通过使用多个 <code>script</code> 标记向 XUL 文件添加多个脚本文件，此时你可以使用相对或绝对 URLs。比如下面的例子：</p> - -<pre class="eval"><script src="findfile.js"/> -<script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/> -<script src="<a class="external" href="http://www.example.com/js/items.js" rel="freelink">http://www.example.com/js/items.js</a>"/> -</pre> - -<p> 本教程不涉及与事件处理无关的 JavaScript 的使用。因为这实在有太多的内容需要讲述，而且也可以从很多其他其他的资料获得所需的知识。</p> - -<div class="note">默认的 JavaScript 仅在页面上显示错误。为了显示在 chrome JavaScript 中的错误，有必要更改以下设置： <code>javascript.options.showInConsole = true</code><br> -如果设置<code> javascript.options.strict = true</code> 那么任何不标准的，写法不良的，有语法上导致逻辑错误的，都将会写到日志中。</div> -</div> - -<div id="section_3"> -<h3 class="editable" id="响应事件"><span>响应事件</span></h3> - -<div class="editIcon"><a href="/../../../../en/XUL_Tutorial/Adding_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> 脚本需要响应一系列的事件包括用户触发的或是其他状态引起的。起码有三种不同的事件需要用不同的方法来处理。一种是用户按下鼠标键或是按下一个键盘按键。每一个 XUL 元素都有能力在不同的状态触发特定事件。一些事件仅由特定元素触发。</p> - -<p> 每一个事件都有一个名字，如 'mousemove' 是用户在一个 UI 元素上移动鼠标所触发的事件。XUL 与 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/" rel="external nofollow" title="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events</a>使用同样的机制来处理事件。当一个动作发生就会触发一个事件，比如用户移动鼠标，就会由一个相应类型的事件对象产生。 事件对象中包含一系列的属性包括：鼠标位置，哪个键被按下等。</p> - -<p> 事件按阶段被发送到 XUL。</p> - -<ul> - <li>路由阶段，事件先发送到窗口，然后是文件，沿着继承关系向下传递直到到达触发元素。</li> - <li>目标阶段，事件被发送的目标元素。</li> - <li>返回阶段，事件被逐级上传直到回到窗口。</li> -</ul> - -<p> 可以在路由及返回阶段响应事件。一旦事件完成以上传播过程而为得以处理将使用默认的动作来处理该事件。</p> - -<p> 比如，当鼠标在一个包含在 box 中的按钮上移动时，产生一个 'mousemove' 事件，这个事件先被发送到窗口，紧接着是文件，然后是这个 box ，这样就完成了路由过程。然后事件被发送给按钮。最后，返回阶段，事件被发给 box、文件及窗口。返回阶段本质上是路由过程的逆过程。需要说明的是，有些事件没有返回阶段。</p> - -<p> 在事件传播的每一个阶段你都可以在任何元素上监听。由于事件会传递给所有祖先你可以在继承关系的更高层来添加监听器。当然，一个高层收到事件会通知它的全部子元素，而对于按钮的事件仅属于这个按钮。这一点对与你希望使用同样的代码控制一些元素是有用的。</p> - -<p> 大多数公共事件使用 'command' 事件。 当使用者启动一个元素 command 事件会被触发，例如按按钮，选择菜单项等。对与不同的触发元素 command 会自动的按照不同的方式进行处理，比如，无论用户是使用鼠标点击按钮还是通过快捷键都会触发 command 事件。</p> - -<p> 有两种办法来为一个元素添加事件监听器。其一，把脚本本身作为其属性；其二，使用元素的 <code>addEventListener</code> 方法。 前者只处理返回事件但写起来更方便。后者可以控制事件的任何阶段，并且对同一个元素、事件可以使用多个监听器。对大多数元素来说，更多的使用属性的方式。</p> -</div> - -<div id="section_4"> -<h3 class="editable" id="事件监听器属性"><span>事件监听器属性</span></h3> - -<div class="editIcon"><a href="/../../../../en/XUL_Tutorial/Adding_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> 使用属性形式，在你希望监听的元素上加一个属性，名字是待监听的事件名前加'on'。如，为了响应事件 'command' 属性名为 'oncommand'。属性值是处理此事件的一段脚本。通常代码短小，或者就是调用独立脚本文件中的函数。下面的例子响应按钮按下。</p> - -<p><span class="lang lang-en"><span id="Example_1"><strong>Example 1</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">View</a> </span></p> - -<pre class="eval"><button label="OK" oncommand="alert('Button was pressed!');"/> -</pre> - -<p> 由于 'command' 事件会返回，也可以把事件监听器添加到封装元素中。下面的例子监听器会响应全部两元素。</p> - -<p><span class="lang lang-en"><span id="Example_2"><strong>Example 2</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">View</a> </span></p> - -<pre class="eval"><vbox oncommand="alert(event.target.tagName);"> - <button label="OK"/> - <checkbox label="Show images"/> -</vbox> -</pre> - -<p> 在这个例子中，command 事件会有 button 或 checkbox 返回到设置了事件处理的 vbox 上。如果在按钮上在加一个监听器 (<code>oncommand</code> 属性) ，按钮上的代码会先调用，然后是 vbox 的。事件处理函数会传递一个隐含参数 'event'，这参数可以获得事件的额外信息。一个常用的属性是 'target' ，它保存着事件是由谁产生的。这个例子里，显示事件产生者的标签名。target 很有用，因为你可以在一段代码里为一系列按钮作响应。</p> - -<p> 你可能注意到这里使用的语法与 HTML 中的一样。事实上， HTML 和 XUL 共用统计的事件机制。一个重要的不同是 'click' 事件 (或 <code>onclick</code> 属性) 在 HTML 中它仅用于响应按钮，而在 XUL 中 command 事件被用于替代它。XUL 有一个 click 事件，但是仅响应鼠标点击，不响应键盘。因此点击事件在XUL中应避免使用，除非你希望一个元素仅可以通过鼠标触发。补充一下，如果元素的 disable 属性为 true 时 command 事件不会被发送，而 click 事件则不然。</p> - -<div class="highlight"> -<div id="section_5"> -<h5 class="editable" id="find_files_的例子_2"><span>find files 的例子</span></h5> - -<div class="editIcon"><a href="/../../../../en/XUL_Tutorial/Adding_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> command 处理器可以用于响应查找和取消按钮，按查找按钮开始查找，当然由于我们没有实现这部分，我们现在还不能，这部分我们以后再完成，按取消按钮关闭窗口,下面的代码显示怎么做。并且我们也为关闭菜单也写了相同的代码。</p> - -<pre class="eval"><menuitem label="Close" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/> -... - -<button id="cancel-button" label="Cancel" - <span class="highlightred">oncommand="window.close();</span>"/> -</pre> - -<p> 这里加了两个处理器。<code>oncommand</code> 被加到关闭菜单项中了。通过使用这个处理器，用户可以使用鼠标点击菜单或使用键盘来选择此菜单来关闭窗口。<code>oncommand</code> 处理器也加到了取消按钮上。</p> -</div> -</div> -</div> - -<h3 class="editable" id="DOM_事件监听器"><span>DOM 事件监听器</span></h3> - -<div class="editIcon"><a href="/../../../../en/XUL_Tutorial/Adding_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> 为一个元素添加事件处理的另一种方法是使用元素的 addEventListener 方法，这允许你动态的监听事件或在路由阶段处理事件。语法如下。</p> - -<p><span class="lang lang-en"><span id="Example_3"><strong>Example 3</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">View</a> </span></p> - -<pre><button id="okbutton" label="OK"/> - -<script> -function buttonPressed(event){ - alert('Button was pressed!'); -} - -var button = document.getElementById("okbutton"); -button.addEventListener('command', buttonPressed, true); -</script> -</pre> - -<p> <code><a href="../../../../en/DOM/document.getElementById" rel="internal">getElementById()</a></code> 函数返回给定 id 的元素，这里返回这个按钮。<code><a href="../../../../en/DOM/element.addEventListener" rel="internal">addEventListener()</a></code> 函数新建一个路由阶段的事件监听器。第一个参数是待监听的事件名，第而个参数是事件发生时要调用的函数名，最后一个参数如是 <code>true</code> 表示这是一个路由阶段的监听器，设为 false 则监听返回阶段。作为事件处理函数的第二个参数需要带一个参数（这个事件对象），就像上面定义的 <code>buttonPressed</code> 函数一样。</p> - -<div class="highlight"><span class="lang lang-en"><span id="Find_files_example_so_far"><strong>Find files example so far</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-events.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-events.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-events.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-events.xul">View</a> </span></div> - -<p> </p> - -<p> 接下来，我们详细的看看 <a href="../../../../en/XUL_Tutorial/More_Event_Handlers" rel="internal">事件对象</a>（<a href="../../../../en/XUL_Tutorial/More_Event_Handlers" rel="internal">event object</a>）。</p> - -<p> </p> - -<div class="prevnext"> -<p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Scrolling_Menus" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/More_Event_Handlers" rel="internal">Next</a> »</span></p> -</div> - -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/adding_html_elements/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/adding_html_elements/index.html deleted file mode 100644 index 6e1f8c38c6..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/adding_html_elements/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: XUL_教程/增加HTML元素 -slug: Mozilla/Tech/XUL/Tutorial/Adding_HTML_Elements -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Using_Spacers">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E5.A2.9E.E5.8A.A0HTML.E5.85.83.E7.B4.A0.E5.88.B0.E7.AA.97.E5.8F.A3" name=".E5.A2.9E.E5.8A.A0HTML.E5.85.83.E7.B4.A0.E5.88.B0.E7.AA.97.E5.8F.A3">增加HTML元素到窗口</h3> -<p>除了可以使用XUL的所有元素，你也可以直接将HTML元素添加到XUL文件的内部。现在你可以在XUL文件中使用任意的HTML元素，意思是说可以在窗口中布置JAVA小应用程序(applet)和表格。如果可以你应该避免在XUL文件中使用HTML元素。(这是有原因的，主要涉及<a href="/cn/XUL_教程/Box_Model_Details" title="cn/XUL_教程/Box_Model_Details">版面的控制</a>这将在后面进行描述)。然而，不管怎样这节将描述如何使用它们。记住XML是大小写敏感的，因此你必须用小写输入标签和属性。</p> -<h4 id="XHTML.E5.91.BD.E5.90.8D.E7.A9.BA.E9.97.B4.28namespace.29" name="XHTML.E5.91.BD.E5.90.8D.E7.A9.BA.E9.97.B4.28namespace.29">XHTML命名空间(namespace)</h4> -<p>为了在XUL文件中使用HTML元素，你必须声明你要用到的XHTML命令空间。这个方法是Mozilla从XUL中区分HTML标签的。 下面的属性应该加在XUL文件的<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 标签中，或者放到HTML元素的最外面。</p> -<pre class="eval"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span> -</pre> -<p>这个HTML的声明很像我们用过的XUL声明。要正常显示必须正确地输入这句，否则它不能正常运行。注意：Mozilla不会去下载这个URL的内容，但它会在运行HTML时对它进行验证。</p> -<p>这是一个可以加到文件查找窗口的例子：</p> -<pre class="eval"> <?xml version="1.0"?> - <?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> - <window - id="findfile-window" - title="Find Files" - orient="horizontal" - <span class="highlightred"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span></span> - xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> -</pre> -<p>因此，你可以像平常一样使用HTML，下面列出需注意的守则：</p> -<ul> - <li>你必须在每个标检的开始增加一个<code>html:</code>的前缀，像上面一样声明的HTML命名空间。</li> - <li>标签<em>必须用小写输入</em>.</li> - <li>"双引号" 必须完全把所有的属性值括起来。</li> - <li>在没有内容的XML标签的末端(>)前一定要加上结束符(/)，下面的例子很清楚地进行了示范。</li> -</ul> -<h4 id=".E4.BD.BF.E7.94.A8HTML.E5.85.83.E7.B4.A0" name=".E4.BD.BF.E7.94.A8HTML.E5.85.83.E7.B4.A0">使用HTML元素</h4> -<p>你可以像<code>head</code> 和 <code>body</code>使用所有的HTML标签，不是真的有益。下面演示一些使用HTML元素的例子。</p> -<pre><html:img src="banner.jpg"/> - -<html:input type="checkbox" value="true"/> - -<html:table> - <html:tr> - <html:td> - A simple table - </html:td> - </html:tr> -</html:table> -</pre> -<p>这些示例将从banner.jpg创建一个图像，一个多选项和一个只有一个单元格的表。如果XUL的特性是可用的你应该总是使用它们并且你不应该在XUL中使用表格作为布局。(XUL有自己的布局元素可以用)。注意<code>html:</code>前缀需要添加到每个标签的前面。这是Mozilla为什么会知道它是一个HTML标签而不是一个XUL标签。如果你没有加上<code>html:</code>部份，浏览器就会认为元素是一个XUL元素并且它们不能被正常显示，因为 img, input, table, 等都不是有效的XUL标签。</p> -<p>在XUL，你可以使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>或<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>元素添加文本标签。当你要用时应该使用这些元素。你也可以使用HTML的<code>label</code>元素添加文本标签的操作或者你可以像下面的例子一样简单地将文本放在不同的HTML元素之间(就像<code>p</code>或<code>div</code>)。</p> -<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">View</a></p> -<pre><html:p> - 搜索: - <html:input id="find-text"/> - <button id="okbutton" label="确定"/> -</html:p> -</pre> -<p>这段代码的目的是显示'搜索:'，接着显示一个文本输入框元素和一个确定按钮。注意XUL按钮可以显示在HTML元素之间，在这里它可以正常使用。在HTML元素之间的纯文本仅仅用来显示通常用来显示文字(就像<code>p</code>标签)。放在外面的文本是不能被显示的，除非XUL元素允许将文本放在里面(例如：<code>description</code>元素)。下面的例子可以帮助你理解。</p> -<h3 id="HTML.E5.85.83.E7.B4.A0.E7.9A.84.E5.AE.9E.E4.BE.8B" name="HTML.E5.85.83.E7.B4.A0.E7.9A.84.E5.AE.9E.E4.BE.8B">HTML元素的实例</h3> -<p>下面是在窗口在添加HTML元素的一些例子。在每个例子的窗口边都能找到简单的说明信息。</p> -<h4 id=".E5.B8.A6.E5.A4.9A.E9.80.89.E6.A1.86.E7.9A.84.E5.AF.B9.E8.AF.9D.E6.A1.86" name=".E5.B8.A6.E5.A4.9A.E9.80.89.E6.A1.86.E7.9A.84.E5.AF.B9.E8.AF.9D.E6.A1.86">带多选框的对话框</h4> -<p><span id="%E4%BE%8B2"><a id="%E4%BE%8B2"></a><strong>例2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">View</a></p> -<div class="float-right"> - <img alt="Image:htmlelem-ex1.png" class="internal" src="/@api/deki/files/2661/=Htmlelem-ex1.png"></div> -<pre><html:p> - 点击下面方框会记住这个结果。 - <html:p> - <html:input id="rtd" type="checkbox"/> - <html:label for="rtd">记住这个结果</html:label> - </html:p> -</html:p> -</pre> -<p>在这个例子，一个 <code>p</code> 标签用来放置文本，另外一人用来放置分离的多行文本。</p> -<h4 id=".E5.9C.A8HTML.E5.9D.97.E5.A4.96.E9.9D.A2.E7.9A.84.E6.96.87.E6.9C.AC" name=".E5.9C.A8HTML.E5.9D.97.E5.A4.96.E9.9D.A2.E7.9A.84.E6.96.87.E6.9C.AC">在HTML块外面的文本</h4> -<p><span id="%E4%BE%8B3"><a id="%E4%BE%8B3"></a><strong>例3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">View</a></p> -<div class="float-right"> - <img alt="Image:htmlelem-ex2.png" class="internal" src="/@api/deki/files/2662/=Htmlelem-ex2.png"></div> -<pre><html:div> - 你想保存下面的文档吗? - <html:hr/> -</html:div> -Expense Report 1 -What I Did Last Summer -<button id="yes" label="Yes"/> -<button id="no" label="No"/> -</pre> -<p>从图像上可以看到，在<code>div</code>标签里面的文本可以显示出来但其它的文本没有显示(Expense Report 1 和 What I Did Last Summer)。这是因为要显示的文本没有被HTML或XUL元素围绕起来。要显示这些文本，你必须将它放在<code>div</code>标签里面，或者用<code>description</code> 标签将它围起来。</p> -<h4 id=".E6.97.A0.E6.95.88.E7.9A.84HTML.E5.85.83.E7.B4.A0" name=".E6.97.A0.E6.95.88.E7.9A.84HTML.E5.85.83.E7.B4.A0">无效的HTML元素</h4> -<pre><html:po>Case 1</html:po> -<div>Case 2</div> -<html:description value="Case 3"/> -</pre> -<p>上面这三个样例不能被显示，每个都有一个不同的原因。</p> -<dl> - <dt> - 样例1 </dt> - <dd> - <code>po</code>不是一个正确的HTML标签，所以Mozilla不知怎么去处理它。</dd> - <dt> - 样例2 </dt> - <dd> - <code>div</code>是有效的，但是只能用在HTML中。如果要在这里使用，你必须为它添加html:限定符。</dd> - <dt> - 样例3 </dt> - <dd> - <code>description</code>元素仅仅在XUL中是有效的，而不是在HTML中。它不可以有html:限定符。</dd> -</dl> -<p>接下来，我们将要学习如何用 <a href="/cn/XUL_教程/使用定位格" title="cn/XUL_教程/使用定位格">在元素间添加定位格</a>.</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Using_Spacers">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/adding_labels_and_images/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/adding_labels_and_images/index.html deleted file mode 100644 index e3850373fc..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/adding_labels_and_images/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: XUL_教程/增加标签和图像 -slug: Mozilla/Tech/XUL/Tutorial/Adding_Labels_and_Images -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Input_Controls">下一页 »</a></p> -</div> <p></p> -<p> </p> -<p>这一章描述了向窗口中加入标签和图像的方法。另外，我们将看到如何将一些元素包含到一个组中。</p> -<h3 id=".E6.96.87.E6.9C.AC.E5.85.83.E7.B4.A0" name=".E6.96.87.E6.9C.AC.E5.85.83.E7.B4.A0">文本元素</h3> -<p>在不使用标记的情况下,你不能直接向XUL文件中插入文本，它也不会做任何显示。为了达到这个目的你使用如下两个XUL元素来完成。</p> -<h4 id=".E6.A0.87.E7.AD.BE.E5.85.83.E7.B4.A0" name=".E6.A0.87.E7.AD.BE.E5.85.83.E7.B4.A0">标签元素</h4> -<p>将文本加入到将文本加入到窗体中的一个最基本的方法就是使用<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>元素。请看下面的例子：</p> -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">View</a></p> -<pre><label value="This is some text"/> -</pre> -<p><code><code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code>属性被用于指定要显示的文本。这样设置的文本在显示的时候不会换行，所以适合于较短的文本。这种语法适用于多数情况中使用的标签。</p> -<p>如果文本需要换行，你可以如下例所示将文本放在开启和关闭元素之间：</p> -<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> :</p> -<pre><label>This is some longer text that will wrap onto several lines.</label> -</pre> -<p>就像HTML，换行和多余的空格将被压缩为一个空格。 接下来, 我们可以在 <a href="/cn/XUL_Tutorial/Element_Positioning" title="cn/XUL_Tutorial/Element_Positioning">找到怎么去控制元素的宽度</a> 这样我们就可以很容易地控制换行。</p> -<h5 id=".E6.93.8D.E4.BD.9C.28Control.29.E5.B1.9E.E6.80.A7" name=".E6.93.8D.E4.BD.9C.28Control.29.E5.B1.9E.E6.80.A7">操作(Control)属性</h5> -<p>你可以使用 <code><code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 属性去设置关联的标签。当用户在标签上进行点击操作时，已关联的控件就会被触发。<a href="/cn/Accessibility" title="cn/Accessibility">accessibility</a>这种关联的辅助操作很重要，这样屏幕阅读器就可以对选中的文本进行语音提示。设置<code>control</code>属性的值会触发与这个值对应的<code><code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code>的元素。 <span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">View</a></p> -<pre><label value="Click here:" control="open-button"/> -<button id="open-button" label="Open"/> -</pre> -<p>在上面这个例子中，在标签上点击会使得按钮被触发。</p> -<h4 id=".E6.8F.8F.E8.BF.B0.28Descriptive.29.E5.85.83.E7.B4.A0" name=".E6.8F.8F.E8.BF.B0.28Descriptive.29.E5.85.83.E7.B4.A0">描述(Descriptive)元素</h4> -<p>在没有一些特定的关联操作的文本时你可以使用 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code> 标签。 这个元素使用于在对话框的上面或实例的一组控制的文本提示信息. 与 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> 元素一样, 你既可以在 <code>value</code> 属性中指定单行的文本也可以在开合标签之间填充一大块的文本。在描述元素的大多数属性和文本内容的语法是与标签元素(label)是一样的。</p> -<p><span id="%E4%BE%8B4"><a id="%E4%BE%8B4"></a><strong>例4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">View</a></p> -<pre><description> - This longer section of text is displayed. -</description> -</pre> -<p>从内部看, 标签元素(<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>)和描述元素( <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>)是相同的。标签元素(<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>)用于有操作的标签，就像一个文本框(text field)。 操作属性仅仅为标签提供支持。 描述元素(<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>)用于其他描述性的情况，如对话框(<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code>)上面的提示信息文本。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Input_Controls">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/adding_more_elements/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/adding_more_elements/index.html deleted file mode 100644 index 9af4cc954f..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/adding_more_elements/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 增加更多的元素 -slug: Mozilla/Tech/XUL/Tutorial/Adding_More_Elements -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements ---- -<div class="pageTitle"> - <h1 id="添加元素">添加元素</h1> -</div> -<div id="page-top"> - <div class="pageText" id="pageText"> - <p> </p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Groupboxes" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Stacks_and_Decks" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - <p> 我们继续通过为findfile对话框添加一些box来讨论box。</p> - <div class="highlight"> - <div id="section_1"> - <h3 class="editable" id="为_find_files_的例子添加元素"><span>为 find files 的例子添加元素</span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Adding_More_Elements#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 现在我们将为findfile对话框添加一些元素，首先添加选择其他检索信息的能力（如尺寸和数据）：</p> - <pre class="eval"><hbox> - <span class="highlightred"><menulist id="searchtype"> - <menupopup> - <menuitem label="Name"/> - <menuitem label="Size"/> - <menuitem label="Date Modified"/> - </menupopup> - </menulist> - <spacer style="width: 10px;"/> - <menulist id="searchmode"> - <menupopup> - <menuitem label="Is"/> - <menuitem label="Is Not"/> - </menupopup> - </menulist> - <spacer style="width: 10px;"/></span> - <textbox id="find-text" flex="1" style="min-width: 15em;"/> -</hbox> -</pre> - <div class="float-right"> - <img alt="Image:boxfinal1.png" class="internal" src="../../../../@api/deki/files/567/=Boxfinal1.png"></div> - <p> 加了两个 <a href="../../../../en/XUL_Tutorial/List_Controls#_Drop-down_Lists" rel="internal">drop down boxes</a> 。一个 <a href="../../../../en/XUL_Tutorial/Using_Spacers" rel="internal">spacer</a> 加进来用于分割各元素，每个空白有10像素，你会看到当窗口尺寸改变时，文本框会改变尺寸而其他元素不会 ，也会看到标签被移除了。</p> - <p> 如果垂直的改变窗口尺寸，元素不会改变尺寸，这是因为他们在水平的box中。 Find 和 Cancel 按钮总在春光看的底部是合适的。这很容易通过在两个水平box间添加空白实现。</p> - <pre class="eval"><span class="highlightred"><spacer style="height: 10px"/></span> -<hbox> - <menulist id="searchtype"> - <menupopup> - <menuitem label="Name"/> - <menuitem label="Size"/> - <menuitem label="Date Modified"/> - </menupopup> - </menulist> - <spacer style="width: 10px;"/> - <menulist id="searchmode"> - <menupopup> - <menuitem label="Is"/> - <menuitem label="Is Not"/> - </menupopup> - </menulist> - <spacer style="width: 10px;"/> - <textbox id="find-text" flex="1" style="min-width: 15em;"/> -</hbox> - -<span class="highlightred"><spacer style="height: 10px" flex="1"/></span> - -<hbox> -</pre> - <p> 现在当窗口改变尺寸，这两个按钮会移动以确保总在窗口的底部。 <span class="lang lang-en"><a href="../../../../en/XUL/spacer" rel="internal">spacer</a> 被添加在标题和检索条件之间。</span></p> - <p> 在检索条件上画上边框可能会更好看。可以使用 CSS <code>border</code> 属性或使用 <code><span class="lang lang-en"><a href="../../../../en/XUL/groupbox" rel="internal">groupbox</a> <span style="font-family: Verdana,Tahoma,sans-serif;">元素</span></span></code>，第一种方法需要设置box的样式。我们使用后一种方法。 <a href="../../../../en/XUL_Tutorial/Groupboxes" rel="internal">groupbox</a> 可以画出适合当前主题的漂亮的边框。</p> - <p> 把box改为 <code>groupbox</code>：</p> - <pre class="eval"><span class="highlightred"><groupbox orient="horizontal"></span> - <span class="highlightred"><caption label="Search Criteria"/></span> - <menulist id="searchtype"> - . - . - . - <spacer style="width: 10px;"/> - <textbox id="find-text" flex="1" style="min-width: 15em;"/> -<span class="highlightred"></groupbox></span> -</pre> - <div class="float-right"> - <img alt="Image:boxfinal2.png" class="internal" src="../../../../@api/deki/files/568/=Boxfinal2.png"></div> - <p> 当然还有其他的美化方案，比如让组框延伸到窗口底边。也可以修饰一下边界让他们看起来更漂亮。</p> - <p> 我们会在这个教程中看到更多关于box的例子及其功能因为我们还有在findfile对话框中添加新的元素。</p> - <p>Find files example so far <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-boxfinal.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-boxfinal.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-boxfinal.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-boxfinal.xul">View</a> </span></p> - </div> - </div> - <p><br> - 下一章，<a href="../../../../en/XUL_Tutorial/Stacks_and_Decks" rel="internal">create stacks</a>.</p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Groupboxes" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Stacks_and_Decks" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - </div> -</div> -<div class="printfooter" id="printfooter"> - <hr> - <p>Retrieved from "<a href="../../../../En/XUL_Tutorial/Adding_More_Elements">https://developer.mozilla.org/En/XUL_Tutorial/Adding_More_Elements</a>"</p> -</div> -<div class="collapsed" id="languages"> - <h5 id="Languages">Languages</h5> - <ul style="display: none;"> - <li><a href="../../../../es/Tutorial_de_XUL/A%c3%b1adiendo_m%c3%a1s_elementos" rel="internal">Español</a></li> - <li><a href="../../../../fr/Tutoriel_XUL/Ajouter_plus_d%27%c3%a9l%c3%a9ments" rel="internal">Français</a></li> - <li><a href="../../../../pl/Kurs_XUL/Dodawanie_innych_element%c3%b3w" rel="internal">Polski</a></li> - <li><a href="../../../../ja/XUL_Tutorial/Adding_More_Elements" rel="internal">日本語</a></li> - </ul> -</div> -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/adding_style_sheets/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/adding_style_sheets/index.html deleted file mode 100644 index 630627f941..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/adding_style_sheets/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 添加样式表 -slug: Mozilla/Tech/XUL/Tutorial/Adding_Style_Sheets -translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Style_Sheets ---- -<pre id="line1"><span class="pi"><?xml version="1.0"?></span> -<span class="pi"><?xml-stylesheet href="css/ued.css" type="text/css"?></span> - -</pre> -<p>用xml-stylesheet引入CSS文件！可以是本地或来自网络的文件。使用http或chrome协议均可。</p> 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 deleted file mode 100644 index 6362be89f6..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -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> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/box_model_details/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/box_model_details/index.html deleted file mode 100644 index 7b647957ba..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/box_model_details/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 分组细节 -slug: Mozilla/Tech/XUL/Tutorial/Box_Model_Details -translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details ---- -<p>This page has no content. Enrich MDC by contributing.</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/content_panels/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/content_panels/index.html deleted file mode 100644 index b2909f9a05..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/content_panels/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 内容面板 -slug: Mozilla/Tech/XUL/Tutorial/Content_Panels -translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels ---- -<p>这一节我们来看看如何向HTML页面或者其他XUL文件中添加面板。</p> -<h3 id="添加子面板">添加子面板</h3> -<p>你可能经常想要使用不同页面的文件中的一部分。有时候你或许想将一个窗口中的一部分进行改变。一个很好的例子是一个一步接一步的向导，可以通过很多页面、询问一系列问题来指导你。每当用户点击下一步按钮的时候，向导就会显示下一个画面。</p> -<p>你可以通过为每个不同的画面打开一个新的窗口来创建向导。但这样有三个问题。首先，每个窗口会出现在不同的位置。第二，后退和下一步按钮都是一样的，如果这是内容区域变化将会更好。第三，当在不同的窗口中运行的时候使用脚本会非常困难。</p> -<p>注意，XUL有一个wizard元素可以用来创建向导接口。这将会在后面的章节中进行描述。</p> -<p>另一种方法是使用iframe元素。这与HTML中有相同的名字。它可以在一个窗口中创建独立的文档。其优点是可以在任何需要内容的地方加载不同的文件。将文档的URL设置这个框架的src属性。这个URL可以指向任意类型的文件，尽管通常是指向一个HTML文件或者其他XUL文件。你可以使用脚本来控制iframe中的内容而不需要影响主窗口。</p> -<p>在mozilla浏览器中，网页显示的区域就是用iframe创建的。当用户输入一个URL或者点击一个文档的链接的时候，这个frame的资源就变化了。</p> -<h4 id="Iframe例子">Iframe例子</h4> -<p>例子1：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><toolbox></p> - <p> <toolbar id="nav-toolbar"></p> - <p> <toolbarbutton label="Back"/></p> - <p> <toolbarbutton label="Forward"/></p> - <p> <textbox id="urlfield"/></p> - <p> </toolbar></p> - <p></toolbox></p> - <p> </p> - <p><iframe id="content-body" src="<a class="external" href="http://www.mozilla.org/index.html" rel="freelink">http://www.mozilla.org/index.html</a>" flex="1"/></p> - </td> - </tr> - </tbody> -</table> -<p>这个例子为浏览器创建了一个非常简单的接口。创建了一个格子来容纳两个元素，一个是工具栏一个是iframe。一个后退按钮，一个前进按钮，以及一个用来输入URL的输入区。在iframe里面将会出现一个网页。这里会默认的出现index.html文件。</p> -<p>这个例子功能并不完全。下面我们将会添加一个脚本在需要的时候来改变src属性，例如当用户按回车键的时候。</p> -<h3 id="browser"> browser</h3> -<p>还有一种内容面板，使用browser标签。如果你想创建一个像浏览器一样显示内容的框架就可以使用这个元素。事实上iframe也可以完成这样的功能，但是browser又很多附加特性。例如browser可以保持历史页面用来进行前进和后退。Browser还可以加载带有参照页和其他标志的页面。需要的时候，你可以使用browser标签来常见一个像浏览器一样的接口，但是如果只需要一个简单的面板的话可以使用iframe来实现。</p> -<p>一个类似的元素tabbrowser，可以提供browser的全部功能而且还提供一个tab标签来在多个页面中切换。这是用在mozilla浏览器中的标签页浏览的小工具。元素tabbrowser事实上提供了一个含有一系列browser的tabbox元素。两种类型的browser都提供了相同的页面显示控制方式。</p> -<h4 id="Browser实例">Browser实例</h4> -<p>例子2：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><browser src="<a class="external" href="http://www.mozilla.org" rel="freelink">http://www.mozilla.org</a>" flex="1"/></p> - </td> - </tr> - </tbody> -</table> -<p>与iframe一样，你可以使用src属性来指定browser的URL。对tabbrowser，你不可以设置直接像这样设置URL，因为他不会仅仅显示一个URL，相反的，你必须使用脚本调用loadURL函数来实现。</p> -<p>有三种类型的browser，基于你想要显示的内容的内部机制。可以使用type属性来指定其类型。</p> -<p>第一种类型如果不指定的话是默认的类型。这种情况，加载内容的内部browser就是与应用程序相同的，而且可以在外部窗口中访问。这意味着当一个脚本在browser内部加载文件的时候会获取最顶层的窗口。，会获得XUL窗口中的最外部的窗口。</p> -<p>这可能对于一个应用程序的子XUL面板比较合适，但是当你想要用browser来加载网页的时候，就不是你想要的了。相反的，你可能想现限制网页仅仅获取网页的内容，你可能注意到mozilla浏览器窗口的工具条和状态条有一个XUL内容以及更高级的tabbrowser组成了主要的区域。这个内部的区域显示了一个网页，但是网页无法访问其周围的XUL。这是因为使用的是第二种类型的browser，指定type属性为content。这可以阻止内容穿越到XUL窗口中，示例如下：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><browser src="<a class="external" href="http://www.mozilla.org" rel="freelink">http://www.mozilla.org</a>" type="content" flex="1"/></p> - </td> - </tr> - </tbody> -</table> -<p>元素tabbrowser的每个标签页在创建的时候默认类型都设置为content。因此你不需要明确的为它指定类型。</p> -<p>第三种类型在你的程序中包含多个browser元素的时候使用的，例如，你有一个侧边栏来显示额外的内容，将主browser元素的type属性设置为content-primary来表明其内容是窗口中的主内容。这与content值一样，只是里面的内容只有使用XUL窗口的content属性才可以访问。这使得用脚本访问主窗口的内容时变得容易。对tabbrowser自动将可见的browser设置为content-primary，也就是说，这样你总是可以在当前可见的窗口中看到内容。</p> -<p>下一节，我们看看如何创建分隔线</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_skin/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_skin/index.html deleted file mode 100644 index 4fabb4c388..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_skin/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: 创建一个皮肤 -slug: Mozilla/Tech/XUL/Tutorial/Creating_a_Skin -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Skin ---- -<p>本节讲述如何创建一个简单的皮肤，简单起见，我们只将其应用于查找文件对话框。</p> - -<h3 id="A_Simple_Skin" name="A_Simple_Skin">一个简单的皮肤。</h3> - -<p>下图是当前的查找文件对话框的样子。我们将创建一个应用于其上的皮肤。当然，一个皮肤可以应用于任何程序，但是当我们只关注于文件查找对话框时，事情就回简单些。因此我们只修改findfile.css 而 不修改global.css 文件。本节假设你正在使用经典的皮肤。你可能希望再工作之前留有一个原来皮肤的备份。</p> - -<p><img alt="Image:cskin1.jpg"></p> - -<p>你需要再用户皮肤中创建文件'findfile.css' 。或者你可以临时把他放在内容目录中并用样式表指令引用。你也可以直接修改当前的findfile.css文件，看看他会变的怎样，或者你可以创建一个用户皮肤并连接到其上。</p> - -<h4 id="Creating_a_Custom_Skin_Package" name="Creating_a_Custom_Skin_Package">创建用户皮肤包</h4> - -<p>创建皮肤，步骤如下：（如果使用火狐1.5或以上，参见 <a href="/en/XUL_Tutorial/Manifest_Files" title="en/XUL_Tutorial/Manifest_Files">配置文件</a> 代替以下步骤）</p> - -<ol> - <li>创建一个放置皮肤文件的文件夹。</li> - <li>从经典或现代皮肤文件夹中复制配置文件 (contents.rdf) 到这个新建的文件夹。</li> - <li>修改配置文件引用你的皮肤。比如：将 'classic/1.0' 改为 'blueswayedshoes/1.0'.</li> - <li>在文件‘chrome/installed-chrome.txt’ 中增加如下一行： <code><a class="external" href="skin,install,url,file:///stuff/blueswayedshoes/" rel="freelink">skin,install,url,file:///stuff/blueswayedshoes/</a></code> 其中最后一部分是你现在创建的目录。务必在最后加一个斜杠。</li> -</ol> - -<p>把文件findfile.css 复制到新目录。我们将使用它作为新皮肤的基础。我们可以使用 '<a class="external" rel="freelink">chrome://findfile/skin/findfile.css'来引用它</a>。</p> - -<h4 id="Adding_Style_Rules" name="Adding_Style_Rules">添加样式规则</h4> - -<p>首先决定要做怎样的改变。我们会修改颜色、改变按钮样式、稍微改变间隔，让我们从菜单、工具栏、标签面板开始。</p> - -<p>把下面的内容加到findfile.css 就会产生如下图的改变。</p> - -<pre>window > box { - background-color: #0088CC; -} - -menubar,menupopup,toolbar,tabpanels { - background-color: lightblue; - border-top: 1px solid white; - border-bottom: 1px solid #666666; - border-left: 1px solid white; - border-right: 1px solid #666666; -} - -caption { - background-color: lightblue; -} -</pre> - -<p><img alt="Image:cskin2.jpg" class="internal" src="/@api/deki/files/627/=Cskin2.jpg"></p> - -<ul> - <li>窗口的内框 (包围窗口全部内容的box)被改为蓝色。</li> - <li>你可以在标签的间隙和窗口的底部看到这种蓝色。</li> - <li>四个元素 <code>：<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>、 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code><span style="font-family: Verdana,Tahoma,sans-serif;">、</span></code><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>、<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 是浅蓝色</li> - <li>边框改为3D样式，仔细看就会发现。</li> - <li><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 的底色也被改变用以适应背景色的改变。</li> -</ul> - -<p>上面的第一条规则(用于 'window > box') 制定窗口的内框使用不同的颜色，这可能不是最好的办法，我们可以使用样式类来做出这样的改变。那样做的话，我们可以修改XUL文件，不必要求box是窗口的第一个子元素。</p> - -<pre class="eval"><strong>CSS:</strong> -.findfilesbox { - background-color: #0088CC; -} - -<strong>XUL:</strong> -<vbox <span class="highlightred">class="findfilesbox"</span> orient="vertical" flex="100%"> -<toolbox> -</pre> - -<h4 id="Rounding_on_the_Tabs" name="Rounding_on_the_Tabs">把标签修圆</h4> - -<p>下面，修改标签。我们将要使选中的标签变为粗体，并且修圆标签。</p> - -<pre>tab:first-child { - -moz-border-radius: 4px 0px 0px 0px; -} - -tab:last-child { - -moz-border-radius: 0px 4px 0px 0px; -} - -tab[selected="true"] { - color: #000066; - font-weight: bold; - text-decoration: underline; -} -</pre> - -<div class="float-right"><img alt="Image:cskin3.jpg" class="internal" src="/@api/deki/files/628/=Cskin3.jpg"></div> - -<p>这里添加了两条规则，第一条将第一个标签修圆，第二条将最后一个标签修圆。这里使用了一个特殊的样式规则, <code><a href="/en/CSS/-moz-border-radius" title="en/CSS/-moz-border-radius">-moz-border-radius</a></code>, 他再边框的角上创建一个圆弧。第一个标签的左上角，第二个标签的右上角用4个像素修圆而其他的角都设为0，这相当于没有修圆，值越大就越接近圆，值越小就越接近矩形。</p> - -<p>最后的规则只有当标签的属性 <code><code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 设为 <code>true</code>时才有效，他是使选中的标签的文字以粗体，下划线、深蓝色显示，注意图中只有第一个标签这样显示，第二个不会，因为他没有被选中。</p> - -<h4 id="Adding_Toolbar_Icons" name="Adding_Toolbar_Icons">添加工具栏按钮</h4> - -<p>有时候我们很难区分工具栏上的按钮和菜单栏的命令，如果我们为工具栏的按钮添加图标就会更清楚。火狐的创造者为例如打开保存等按钮创建了图标，我们直接用再这里可以节省时间。我们可以使用 <code><a href="/en/CSS/list-style-image" title="en/CSS/list-style-image">list-style-image</a></code> CSS 属性为按钮添加图标。</p> - -<pre>#opensearch { - list-style-image: url("chrome://editor/skin/icons/btn1.gif"); - -moz-image-region: rect(48px 16px 64px 0); - -moz-box-orient: vertical; -} - -#savesearch { - list-style-image: url("chrome://editor/skin/icons/btn1.gif"); - -moz-image-region: rect(80px 16px 96px 0); - -moz-box-orient: vertical; -} -</pre> - -<div class="float-right"><img alt="Image:cskin4.jpg" class="internal" src="/@api/deki/files/629/=Cskin4.jpg"></div> - -<p>Mozilla provides a custom style property <code><a href="/en/CSS/-moz-image-region" title="en/CSS/-moz-image-region">-moz-image-region</a></code> which can be used to make an element use part of an image. You can think of it as a clip region for the image. You set the property to a position and size within an image and the button will display only that section of the image. This allows you to use the same image for multiple buttons and set a different region for each one. When you have lots of buttons, with states for hover, active and disabled, this saves space that would normally be occupied by mutliple images. In the code above, we use the same image for each button, but set a different image region each one. If you look at this image (btn1.gif), you will notice that it contains a grid of smaller images, each one 16 by 16 pixels.</p> - -<p>The <code><a href="/en/CSS/-moz-box-orient" title="en/CSS/-moz-box-orient">-moz-box-orient</a></code> property is used to orient the button vertically, so that the image appears above the label. This property has the same meaning as the <code><code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> attribute. This is convenient because the skin cannot change the XUL. Most of the box attributes have corresponding CSS properties.</p> - -<h4 id="Other_Changes" name="Other_Changes">其他改变</h4> - -<p>Next, we'll make a couple of changes to the buttons along the bottom, again reusing some icons from Mozilla to save time. If creating your own skin, you will need to create new icons or copy the icons to new files. If following the example in this section, just copy the files to your new skin and change the URLs accordingly.</p> - -<pre>#find-button { - list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); - font-weight: bold; -} - -#cancel-button { - list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); -} - -button:hover { - color: #000066; -} -</pre> - -<div class="float-right"><img alt="Image:cskin5.jpg" class="internal" src="/@api/deki/files/630/=Cskin5.jpg"></div> - -<p>We add some images to the buttons and make the Find button have bold text to indicate that it is the default button. The last rule applies to buttons when the mouse is hovering over them. We set the text color to dark blue in this case. Finally, some minor changes to the spacing around the items, by setting margins:</p> - -<pre>tabbox { - margin: 4px; -} - -toolbarbutton { - margin-left: 3px; - margin-right: 3px; -} -</pre> - -<p>After those changes, the find files dialog now looks like the image.</p> - -<p><img alt="Image:cskin6.jpg" class="internal" src="/@api/deki/files/631/=Cskin6.jpg"></p> - -<p>As you can see, some simple changes to the style rules has resulted in quite a different appearance to the find files dialog. We could continue by changing the menus, the grippies on the toolbar and the input and checkbox elements.</p> - -<h3 id="Creating_a_Global_Skin" name="Creating_a_Global_Skin">创建全局皮肤</h3> - -<p>The skin created above is simple and only applies to the find files dialog. Some of the changes made to the skin could be placed in the global style sheets (those in the global directory of the skin) to be applied to all applications. For example, having different images for the check boxes in the find files dialog as other windows looks a little odd. This change should really be moved into the global style sheet.</p> - -<p>Try moving the CSS styles from findfile.css into global.css and then look at some of the dialogs in Mozilla. (The cookie viewer is a good example.) You will notice that it has adopted the rules that we have added. Some of the rules conflict with those already in the global stylesheets. For example, rules are already defined for buttons and tabs and so on and we defined additional rules for them. When changing the global skin, you would need to merge the changes into the existing rules.</p> - -<p>For the best skinnability, it is best to declare appearance related style rules in the global directory rather than in individual style files. This includes colors, fonts and general widget appearances. If you change the color of something in a local skin file (such as findfile.css), the dialog may look odd if the user changes their global skin. Don't expect the user to be using the default one.</p> - -<div class="highlight"> -<p>Our Find files example with this skin: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.xul">View</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.css">Stylesheet</a></p> -</div> - -<h3 id="See_also"><small>See also</small></h3> - -<p><small><a href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS_Reference/Mozilla_Extensions">Mozilla CSS extensions</a>, and <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS reference</a></small></p> - -<p><br> - 下一章讨论 <a href="/en/XUL_Tutorial/Localization" title="en/XUL_Tutorial/Localization">XUL程序的本地化</a></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_window/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_window/index.html deleted file mode 100644 index 5a7329bac3..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_window/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 创建一个窗口 -slug: Mozilla/Tech/XUL/Tutorial/Creating_a_Window -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_Buttons">下一页 »</a></p> -</div><p></p> - -<p> </p> - -<p>前面提到: 我们要在本教程中创建一个简单的查找文件工具。不过开始之前，我们得先看看XUL文件的基本语法。</p> - -<p> </p> - -<h3 id=".E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA_XUL_.E6.96.87.E4.BB.B6" name=".E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA_XUL_.E6.96.87.E4.BB.B6">创建一个 XUL 文件</h3> - -<p>一个 XUL 文件可以有任何名字，但它必须拥有一个 .xul 的扩展名。最简单的 XUL 文件具有下述结构：</p> - -<pre><?xml version="1.0"?> -<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> - -<window - id="findfile-window" - title="查找文件" - orient="horizontal" - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> -<!-- Other elements go here --> -</window> -</pre> - -<p>这个窗口不会做任何事情，因为它没有包含任何用户界面元素。那些元素会在下面的部分中添加。这里对上面的代码进行逐行断开解释：</p> - -<ol> - <li><strong><?xml version="1.0"?></strong><br> - 这一行只是简单声明这是一个 XML 文件。你通常在每一个 xul 文件的顶端都会添加这一行，非常像在一个 HTML 文件的顶端添加 HTML 的标识。</li> - <li><strong><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></strong><br> - 这一行是用来指定文件使用的样式表的。这是 XML 文件用以导入样式表的语法。在这种情况下，我们从一个皮肤包的全局部分导入样式。我们没有指定特定的文件，所以 Mozilla 会确定使用文件夹中的哪一个文件。在这种情况下，会选中最重要的 global.css 文件。这个文件包括了所有 XUL 元件的默认声明。因为 XML 并不知道如何显示元件，因此这个文件指出怎样去做。通常，你会将这一行放在每一个 XUL 文件的顶部。你也可以采用类似语法导入其他的样式表。需要注意的是你一般都会在你的样式表文件中导入全局样式表。</li> - <li><strong><window</strong><br> - 这一行说明你在描述一个 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 。每一个用户界面窗口都在一个单独的文件中进行描述。这个标记非常类似 HTML 中包围全部内容的 BODY 标记。 <a href="/cn/XUL/window#Attributes" title="cn/XUL/window#Attributes">一些属性</a>可以放到 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 标记中——在本例中有四个属性。在本例中，每一个属性都占一个单独的行，但并不是必须这样做。</li> - <li><strong>id="findfile-window"</strong><br> - <code><code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性用作标识以便窗口被脚本所引用。你通常会为所有的软件放上 <code>id</code> 属性。虽然名字可由你任起，但应该是有一定关联的。</li> - <li><strong>title="查找文件"</strong><br> - The <code><code id="a-title"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></code> Attribute 属性描述显示时将在窗口的标题栏上显现的文本。在本例中将显示'查找文件'。</li> - <li><strong>orient="horizontal"</strong><br> - <code><code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性确定窗口中元件的排布。值 <code>horizontal</code> 意味着元件应该横过窗口水平放置。你也可以使用值 <code>vertical</code>，这表示元件将成一列放置。这是默认值，所以如果你希望使用垂直方向的话可以将这个属性完全关闭。</li> - <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"></strong><br> - 这一行声名了 XUL 的名空间，你应该将它放到窗口元件以表示它的所有子元件都是 XUL。注意这个 URL 实际上不需要下载的。Mozilla 内部会识别这个 URL。</li> - <li><strong><span class="nowiki"><!-- 其他元件写到这里 --></span></strong><br> - 将这个注释块替换成其他显示在窗口中的元件（按钮、菜单以及其他用户界面组件）。我们在接下面的部分将添加一些元件。</li> - <li><strong></window></strong><br> - 最后，我们需要在文件的结尾关闭 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 标记。</li> -</ol> - -<h3 id=".E6.89.93.E5.BC.80.E7.AA.97.E5.8F.A3" name=".E6.89.93.E5.BC.80.E7.AA.97.E5.8F.A3">打开窗口</h3> - -<p>声明完一个窗口，如果打开它呢？这里有几种方法：</p> - -<ul> - <li>如果是进行开发，你可以直接在浏览器的定位栏(location bar)中输入URL(chrome:、file:或其它形式的URL)。如果使用chrome则要按前面所讲的注册包。如果使用file:协议，可以直接打开。chrome的好处是可以获得比一般URL更多的权限。不过，现在还用不上。但建议还是把chrome配好。</li> - <li>如果.xul文件已经与Mozilla作了关联，在资源管理器上双击即可。这种方式与file:方式效果一样。</li> -</ul> - -<p>不过，因为我们的XUL中没有定义其它元素，因此使用Mozilla打开时，什么也看不到。并且在浏览器中打开时，窗口会显示在浏览器中，这不是一个真正的应用，不过进行测试没有关系。</p> - -<ul> - <li>正确的方法是使用Javascript来打开。使用window.open()函数，同打开HTML文档一样。不过需要一个额外的参数，叫"chrome"，它用来指明要打开的文档是一个chrome文档。语法描述如下： - <blockquote> - <p>window.open(url,windowname,flags);</p> - - <p>其中 flags 必须包含 "chrome"。</p> - - <p>例如：<br> - window.open("<a class="external" rel="freelink">chrome://navigator/content/navigator.xul</a>", "bmarks", "chrome,width=600,height=300");</p> - </blockquote> - </li> - <li>还可以在命令行下使用-chrome参数来指明Mozilla启动时打开的XUL文件。例如： - <blockquote> - <p>mozilla -chrome <a class="external" rel="freelink">chrome://findfile/content/findfile.xul</a></p> - - <p>mozilla -chrome resource:/chrome/findfile/content/findfile.xul</p> - </blockquote> - </li> -</ul> - -<p>-chrome参数并不会带来特殊权限，而是chrome URL备具特殊权限。</p> - -<p>到这里可以把已经学过的做一个测试。包的组织不一定要是content/skin/locale这种形式。象我的测试就是：</p> - -<blockquote> -<p>d:\project\test\xul\findfile</p> -</blockquote> - -<p>现在目录下有两个文件：</p> - -<blockquote> -<p>findfile.xul和contents.rdf</p> -</blockquote> - -<p>然后修改installed-chrome.txt文件。</p> - -<p>切换到Mozilla目录，然后在命令行下输入：</p> - -<blockquote> -<p>mozilla -chrome <a class="external" rel="freelink">chrome://findfile/content/filefile.xul</a></p> -</blockquote> - -<p dir="ltr">不过执行完后，什么都没有，就一个标题条。</p> - -<p dir="ltr">(英文原文: <a class="external" href="http://developer.mozilla.org/en/docs/XUL_Tutorial:Creating_a_Window">XUL_Tutorial:Creating_a_Window</a> ) 本篇wiki基于limodou的学习记录: <a class="external" href="http://blog.donews.com/limodou/archive/2005/01/10/233420.aspx">XUL学习:XUL Tutorial(五) -- Creating a Window</a></p> - -<p dir="ltr"> </p> - -<p dir="ltr"></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_Buttons">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/creating_an_installer/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/creating_an_installer/index.html deleted file mode 100644 index aef43ec39b..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/creating_an_installer/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 创建安装程序 -slug: Mozilla/Tech/XUL/Tutorial/Creating_an_Installer -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer ---- -<p> <span class="lang lang-en"> </span></p> -<div class="warning"> - <p>Parts of this page show the use of the <a href="../../../../en/XPInstall_API_Reference" rel="internal">XPInstall API</a>. The majority of this API is now deprecated and as of Gecko 1.9 no longer available. <a href="../../../../en/Extensions" rel="internal">Extension</a>, <a href="../../../../en/Themes" rel="internal">theme</a>, and <a href="../../../../en/Plugins" rel="internal">plug-in</a> developers must switch away from <code>install.js</code> based packages to the new <a href="../../../../en/Bundles" rel="internal">packaging scheme</a> with an <code><a href="../../../../en/Install.rdf" rel="internal">install.rdf</a></code> manifest. In particular plugin developers should see <a href="../../../../en/Shipping_a_plugin_as_an_extension" rel="internal">how to package a plugin as an extension</a>.</p> -</div> -<p> </p> -<p> </p> -<div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Cross_Package_Overlays" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Install_Scripts" rel="internal">Next</a> »</span></p> -</div> -<p> </p> -<p> </p> -<p>This section will describe packaging a XUL application into an installer.</p> -<div id="section_1"> - <h3 class="editable" id="XPInstall_Packages"><span>XPInstall Packages </span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Creating_an_Installer#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p>Mozilla provides a mechanism which can be used to package XUL windows, scripts, skins and other files into single file installers. You can place this installer file somewhere for users to download. A simple script can be used to have the package downloaded and installed. This mechanism is called <a href="../../../../en/XPInstall" rel="internal">XPInstall</a> (Cross platform Install).</p> - <p>XPInstall installers are packaged into JAR files. Inside the JAR file, you can add all the various files that you want to have installed. In addition, installers should contain an install script (a file named install.js) which can be used to script the installation process. This script has access to various install functions which can be used to install files and components.</p> - <p>The JAR file installers typically have the extension .xpi (pronounced zippy) to distinguish them from other archives. The installers will be usually used to install Mozilla components such as new skins, plugins and packages.</p> - <p>There are several steps involved in launching an installer and installing components. These are described step by step below.</p> - <ol> - <li>Create a Web page from which the user can download the software to be installed. This page will contain an install trigger which is a small piece of script which launches the install.</li> - <li>The user is presented with a dialog which indicates the package being installed. It is possible for the install trigger to launch multiple installers. In this case, they will be presented in a list. The user may choose to continue or cancel.</li> - <li>If the user chooses to continue, the installer XPI file is downloaded. A progress bar is displayed to the user during this process.</li> - <li>The file install.js is extracted from the install archive and executed. This script will call install functions which will indicate which files from the archive should be installed.</li> - <li>Once the script is complete, the new package has been installed. If multiple packages are being installed, their scripts will run in sequence.</li> - </ol> -</div> -<div id="section_2"> - <h3 class="editable" id="Install_Triggers"><span>Install Triggers </span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Creating_an_Installer#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p>As indicated above, the install process is started by an install trigger. This involves the use of the special global object InstallTrigger. It contains a number of methods which can be used to start an installation. You can use this object in local or remote content, meaning that it is suitable for a download from a Web site.</p> - <p>Let's create an example install trigger. This involves the use of the function <code>InstallTrigger.install()</code>. This function takes two arguments, the first is a list of packages to install, and the second is a callback function which will be called when the installation is complete. Here is an example:</p> - <pre>function doneFn ( name , result ){ - alert("The package " + name + " was installed with a result of " + result); -} - -var xpi = new Object(); -xpi["Calendar"] = "calendar.xpi"; -InstallTrigger.install(xpi,doneFn); -</pre> - <p>First, we define a callback function doneFn() which will be called when the install is complete. You can name the function whatever you like of course. This function has two arguments. The first is the name of the package that was just installed. This is important if you are installing multiple components. The second argument is a result code. If the result is 0, the installation completed successfully. If the result is non-zero, an error occured and the value is an error code. The function doneFn() here just displays an alert box to the user.</p> - <p>Next, we create an array xpi which will hold the name (Calendar) and URL (calendar.xpi) of the installer. You can add an additional similar such line for each package you wish to have installed. Finally, we call the install function.</p> - <p>When this section of script is executed, the file calendar.xpi will be installed.</p> - <div class="highlight"> - <div id="section_3"> - <h4 class="editable" id="Our_find_files_example"><span>Our find files example </span></h4> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Creating_an_Installer#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p>Let's try this with the find files dialog.</p> - <pre>function doneFn ( name , result ){ - if (result) alert("An error occured: " + result); -} - -var xpi = new Object(); -xpi["Find Files"] = "findfile.xpi"; -InstallTrigger.install(xpi,doneFn); -</pre> - </div> - </div> -</div> -<h3 class="editable" id="The_XPI_Archive"><span>The XPI Archive </span></h3> -<div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Creating_an_Installer#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> -<div class="note"> - <strong>Note</strong>: If you want to create a new <a href="../../../../en/XULRunner" rel="internal">XULRunner application</a>, <a href="../../../../en/Extensions" rel="internal">extension</a>, or <a href="../../../../en/Themes" rel="internal">theme</a>, see <a href="../../../../en/Bundles" rel="internal">Bundles</a>.</div> -<p>The installer XPI file is required to contain one file called install.js which is a <a href="../../../../en/JavaScript" rel="internal">JavaScript</a> file which is executed during the installation. The remaining files are the files to be installed. These files will typically be placed inside a directory in the archive but they do not have to be. For chrome files, they might be structured like the chrome directory.</p> -<p>Often, the only files placed in an XPI archive will be the install script (install.js) and a JAR file. This JAR file contains all of the files used by your application. The components provided with Mozilla are stored in this manner.</p> -<p>Because the XPI file is just a special ZIP file, you can create it and add files to it using a zip utility.</p> -<div class="highlight"> - <div id="section_5"> - <h4 class="editable" id="Our_find_files_example_2"><span>Our find files example </span></h4> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Creating_an_Installer#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p>For the find files dialog, we'll create a structure in the archive much like the following:</p> - <pre>install.js -findfile - content - contents.rdf - findfile.xul - findfile.js - skin - contents.rdf - findfile.css - locale - contents.rdf - findfile.dtd -</pre> - </div> -</div> -<p>A directory has been added for each part of the package, the content, the skin and the locale. The contents.rdf files have also been added because they will be needed to register the chrome files.</p> -<p>Next, we'll look further at the <a href="../../../../en/XUL_Tutorial/Install_Scripts" rel="internal">install script</a>.</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/creating_dialogs/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/creating_dialogs/index.html deleted file mode 100644 index 1b3dbb2fab..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/creating_dialogs/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Creating Dialogs -slug: Mozilla/Tech/XUL/Tutorial/Creating_Dialogs -translation_of: Archive/Mozilla/XUL/Tutorial/Creating_Dialogs ---- -<p>This page has no content. Enrich MDC by contributing.</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/document_object_model/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/document_object_model/index.html deleted file mode 100644 index 15112d1cc7..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/document_object_model/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: 文档对象模型 -slug: Mozilla/Tech/XUL/Tutorial/Document_Object_Model -tags: - - DOM - - XUL_教程_cn -translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model ---- -<div id="page-top"> - <div class="pageText" id="pageText"> - <p> </p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Broadcasters_and_Observers" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Modifying_a_XUL_Interface" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - <p> XUL元素的文档对象模型 (DOM) 可以用于获取信息或修改他们。</p> - <div id="section_1"> - <h3 class="editable" id="DOM_介绍"><span>DOM 介绍</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Document_Object_Model#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> <a href="../../../../en/DOM" rel="internal">文档对象模型</a> (DOM) 用于储存XUL节点树。当一个XUL文件加载后，标记被解析并转换成节点的继承关系结构。每个节点包含标记及一个文本块。DOM 结构可以使用一系列方法检查并修改。特殊的XUL 元素也提供了附加的方法可供使用。</p> - <p> 每一个加载了的XUL 文件都有一个可以显示在窗口或框架内的文档。尽管在特定时间只有一个文档与窗口相关，也有一系列方法使你可以加载更多的文档。</p> - <p> Mozilla中， <a href="../../../../en/DOM" rel="internal">DOM</a> 可以被<a href="../../../../en/JavaScript" rel="internal">JavaScript</a>访问并操作。大量的文件对象包含可以被脚本使用的函数。然而，需要了解的是 DOM 是一个可以被 JavaScript 访问的 API 。JavaScript 本身仅是一种脚本语言，它能够访问这些对象是因为 Mozilla 为他提供了这些。</p> - <p> <a href="../../../../en/JavaScript" rel="internal">JavaScript</a> 中，由一个全局对象总可以被访问。你可以不使用对象就引用这个全局对象的属性及方法。比如，如果这个全局对象由一个 'name' 属性，你可以用这样的代码来改变它 'name = 7'，而不用指明你所使用的对象。在浏览器环境中，window 是这个全局对象，对于XUL同样。当然对于不同的窗口这个全局对象也有所不同。每一个框架都含有一个独立的窗口对象。</p> - <p> 窗口经常使用 <a href="../../../../en/DOM/window.window" rel="internal"><code>window</code> property</a> 引用，尽管这是可选的。有时这仅是为了澄清你所引用的方法的范围。举例来说，下面的两行等效的打开了一个新窗口。</p> - <pre>window.open("test.xul","_new"); -open("test.xul","_new"); -</pre> - <p> 当你在脚本的顶层定义一个函数或变量时，你实际上是为全局对象定义了一个属性。在 XUL中你定义的每一个函数都会被设为窗口对象的属性，比如下面的代码会在提示框中显示 'Message' 两次。</p> - <pre>function getText(){ - return "Message"; -} - -alert(getText()); -alert(window.getText()); -</pre> - <p> 如果你希望访问在另一个窗口的脚本中定义的变量或函数，你值需要使用另一个窗口的 <code><a href="../../../../en/DOM/window" rel="internal">window</a></code> 对象。比如，把上面的两个例子做成一个我们希望在另一个窗口（比如test.xul窗口）中调用getText()函数，可以这样做：</p> - <pre>alert(window.opener.getText()); -</pre> - <p> 每一个窗口都有一个 <code><a href="../../../../en/DOM/window.opener" rel="internal">opener</a></code> 属性，它保存着这个窗口对象是由谁打开的。在这个例子中，我们得到窗口的打开者，并调用这个窗口的 getText() 函数。注意，我们使用窗口属性前缀 'window' 仅为了清晰。</p> - <p> 窗口的 <code><a href="../../../../en/DOM/window.open" rel="internal">open()</a></code> 方法也返回一个新窗口的引用，我们也可以从 <code><a href="../../../../en/DOM/window.opener" rel="internal">opener</a></code>调用新窗口的函数。提示： <code><a href="../../../../en/DOM/window.open" rel="internal">open()</a></code> 在窗口完全加载前返回函数可能不会有效。</p> - <p> 窗口对象并不是有由 DOM 标准定义的，但在 Mozilla中有时把这部分称作 <a href="../../../../Special:Tags?tag=DOM_0&language=en" rel="internal">DOM Level 0</a>——一个一些开发者称呼那些还未加入标准的类 DOM 功能的名字。在春光看中显示的文档可以通过窗口的 <code><a href="../../../../en/DOM/window.document" rel="internal">document</a></code> 属性获得。由于它是窗口最常用的属性 <code><a href="../../../../en/DOM/window.document" rel="internal">document</a></code> 属性经常不使用 'window.' 前缀。</p> - <p> Mozilla 为不同的文档提供了一系列文档对象。三个主要的是<a class="external" href="http://www.xulplanet.com/references/objref/HTMLDocument.html" rel="external nofollow" title="http://www.xulplanet.com/references/objref/HTMLDocument.html">HTMLDocument</a>, <a class="external" href="http://www.xulplanet.com/references/objref/XMLDocument.html" rel="external nofollow" title="http://www.xulplanet.com/references/objref/XMLDocument.html">XMLDocument</a>, a及 <a class="external" href="http://www.xulplanet.com/references/objref/XULDocument.html" rel="external nofollow" title="http://www.xulplanet.com/references/objref/XULDocument.html">XULDocument</a>, 分别支持 <a href="../../../../en/HTML" rel="internal">HTML</a>, <a href="../../../../en/XML" rel="internal">XML</a> 及 <a href="../../../../en/XUL" rel="internal">XUL</a> 文档。这三种文件类型十分相似，事实上他们共享基本实现。然而，一些函数在一种或几种文档类型是特殊的。</p> - </div> - <div id="section_2"> - <h3 class="editable" id="检索元素"><span>检索元素</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Document_Object_Model#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 最常用的检索元素的方法是给出待检索元素的<code><a href="../../../../en/DOM/element.id" rel="internal">id</a></code> 属性利用<code><a href="../../../../en/DOM/document.getElementById" rel="internal">getElementById()</a></code> 方法检索。在 find file 对话框中我们为不少元素都添加了id属性，比如，我们可以使用这样的代码获得check box 的状态。</p> - <pre>var state = document.getElementById('casecheck').checked; -</pre> - <p> <code>casecheck</code> 代表待检索 <a href="../../../../en/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" rel="internal">checkbox</a> 的id，如果我们需要检查是否它被选中，我们只需按上面的方法检查。我们可以对其他的单选框或其他有id的元素作相同的检查。比如获得输入框中的字符。；</p> - <div class="highlight"> - <div id="section_3"> - <h4 class="editable" id="find_files_的例子"><span>find files 的例子</span></h4> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Document_Object_Model#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 要让 <a href="../../../../en/XUL_Tutorial/Progress_Meters" rel="internal">progress bar</a> 及 <a href="../../../../en/XUL_Tutorial/Trees" rel="internal">tree data</a>在findfile对话框显示时就显示出来，这不是难题。只要加在XUL文件中就可以了。现在我们要先去掉它，然后在按下 Find 按钮后显示。 首先，应将他们初始化化为不可见。<code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/hidden" rel="internal">hidden</a> </span></code>属性用于确定元素是否显示。</p> - <p> 把进度条初始化为隐藏，同时为了能够用脚本引用添加一个 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/id" rel="internal">id</a> <span style="font-family: Verdana,Tahoma,sans-serif;">属性。同样的为了隐藏tree我们也将</span></span></code><a href="../../../../en/XUL_Tutorial/Splitters" rel="internal">splitter</a> 隐藏。</p> - <pre class="eval"><tree <span class="highlightred">id="results" hidden="true"</span> flex="1"> - . - . - . -<splitter <span class="highlightred">id="splitbar"</span> resizeafter="grow" <span class="highlightred">hidden="true"</span>/> - -<hbox> - - <progressmeter <span class="highlightred">id="progmeter"</span> value="50%" - style="margin: 4px;" <span class="highlightred">hidden="true"</span>/> -</pre> - <p> 添加 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/hidden" rel="internal">hidden</a> </span></code>属性并设值为 <code>true</code>。这将导致窗口首次显示时该元素不可见。</p> - <p> 接下来，我们添加一个在Find按钮按下时调用的函数。我们把脚本写在findfile.js里，在上一章，我们已经在XUL文件中添加了脚本（ <code><span class="lang lang-en"><a href="../../../../en/XUL/script" rel="internal">script</a> ）<span style="font-family: Verdana,Tahoma,sans-serif;">元素，如果你还不知道如何添加，请看下面的例子。</span></span></code> <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/oncommand" rel="internal">oncommand</a> </span></code> 控制器也被加到 Find 按钮上。</p> - <pre class="eval"><script src="findfile.js"/> - . - . - . -<button id="find-button" label="Find" - <span class="highlightred">oncommand="doFind();"</span>/> -</pre> - <p> 现在与findfile.xul相同的目录中创建一个叫 findfile.js 的文件，我们在文件中写一个 doFind() 函数。 script 标签允许直接编写脚本代码，但是出于包括格式在内的多种原因，脚本经常写在独立的文件里，除非它可以直接放到处理器中。</p> - <pre class="eval">function doFind(){ - var meter = document.getElementById('progmeter'); - meter.hidden = false; -} -</pre> - <p> 这个函数首先通过进度条的id引用它，然后改变的hidden属性。</p> - <p> 最后用一个提示框显示需要检索的文字。当然，这不是最后的版本，但现在我们需要让它发生些什么以使我们确认。</p> - <pre class="eval">function doFind(){ - var meter=document.getElementById('progmeter'); - meter.hidden = false; - <span class="highlightred">var searchtext=document.getElementById('find-text').value; - alert("Searching for \"" + searchtext + "\"");</span> -} -</pre> - <p> 现在，由于提示框的存在，我们知道当点击Find按钮时，会发生什么。同样，我们也需要为 drop-down boxes 添加代码以获得用用户选项。</p> - </div> - </div> - </div> - <div id="section_4"> - <h3 class="editable" id="XUL_元素的_DOM"><span>XUL 元素的 DOM </span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Document_Object_Model#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 每一个 XUL 元素都还有一系列的属性，功能及子元素。</p> - <ul> - <li>属性是在源文件中定义的，如flex="1"将 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/flex" rel="internal">flex</a> </span></code>属性设为 <code>1</code>。</li> - <li>JavaScript 中属性使用点语法。例如：element.hidden 引用延伸的hidden 属性</li> - <li>子元素的是指嵌在源文件标签中的元素。</li> - </ul> - <p> 使用DOM方法可以动态的处理一个元素的属性，方法及子元素。</p> - <p> 注意属性及方法是不一样的东西。有一个属性并不意味着有一个同名的方法，当然通常会有这样一个方法。比如说获得元素的flex属性可以使用flex方法。这种情况下方法的代码就返回这属性。对于其他的方法 XUL 会进行更复杂的处理</p> - <p> 你可以用以下的方法处理元素的属性：</p> - <dl> - <dt> - <a href="../../../../en/DOM/element.getAttribute" rel="internal">getAttribute</a> ( name )</dt> - <dd> - 返回给定元素的属性。</dd> - <dt> - <a href="../../../../en/DOM/element.hasAttribute" rel="internal">hasAttribute</a> ( name )</dt> - <dd> - 如果元素有指定名字的属性返回真。</dd> - <dt> - <a href="../../../../en/DOM/element.setAttribute" rel="internal">setAttribute</a> ( name , value )</dt> - <dd> - 将value 为给定名字为name 的属性赋值。</dd> - <dt> - <a href="../../../../en/DOM/element.removeAttribute" rel="internal">removeAttribute</a> ( name )</dt> - <dd> - 删除给定名字的属性。</dd> - </dl> - <p> 这些方法可以让你在任何时候取得或改变属性的值。比如：</p> - <pre> var box = document.getElementById('somebox'); - var flex = box.getAttribute("flex"); - - var box2 = document.getElementById('anotherbox'); - box2.setAttribute("flex", "2"); -</pre> - <p> 当然 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/flex" rel="internal">flex</a> 属性有</span></code><a href="../../../../en/XUL/Property/flex" rel="internal">对应的脚本方法</a> 可以用以代替。它并不更为有效，当更为简洁。下面的例子与上面的效果相同。</p> - <pre> var box = document.getElementById('somebox'); - var flex = box.flex; - - var box2 = document.getElementById('anotherbox'); - box2.flex = 2; -</pre> - <p> 一旦你引用了元素你就可以引用它的方法。比如，为了获得一个元素的 <code><span class="lang lang-en"><a href="../../../../en/XUL/Property/hidden" rel="internal">hidden</a> 方法可以使用</span></code><code><em>element</em>.hidden</code> 。你可能已经注意到了在方法参考中，一项会同时出现在属性及方法中，这是不一样的。比如，对于隐藏的元素 <strong><font color="green">getAttribute("hidden") 返回字符串 'true'</font></strong> ，而 hidden <strong><font color="green">方法返回‘值true’ </font></strong> 。用方法会自动完成类型转换。</p> - <p> 像 <a href="../../../../en/HTML" rel="internal">HTML</a> 和 <a href="../../../../en/XML" rel="internal">XML</a> 元素一样，每一个 XUL 元素实现 <a class="external" href="http://www.xulplanet.com/references/objref/XULElement.html" rel="external nofollow" title="http://www.xulplanet.com/references/objref/XULElement.html">XULElement</a> 接口。一个 XUL 元素可以是任何定义在 XUL 名空间中的元素。所以XUL有非XUL 元素没有的属性及方法。XULElement 接口有一系列属性及方法来定义XUL 元素，其中有很多继承至 DOM 元素接口。</p> - <p> 一个名空间用一个URI 描述元素，下面是例子。</p> - <pre><button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> -<button xmlns="http://www.w3.org/1999/xhtml"/> -<html:button xmlns:html="http://www.w3.org/1999/xhtml"/> -<html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/></pre> - <p> 名空间使用 <code>xmlns</code> 属性</p> - <ul> - <li>第一个按钮是被置于XUL名空间在的 XUL 元素。</li> - <li>第二个按钮是被置于XHTML名空间在的 XHTML 元素。</li> - <li>第三个例子，前缀 'html' 关联到 '<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>'，当你的文档中需要多个名空间时，你也可以使用使用冒号语法来使用前缀名空间。本例创建一个 XHTML 按钮。</li> - <li>第四个按钮是XUL按钮，尽管使用的‘html’前缀，这要看前缀关联到哪个名空间。</li> - </ul> - <p> 这是一个很重要的区别，不过在真正的文档中会为不同的名空间使用不同的前缀。</p> - <p> DOM 提供了与无名空间相似的名空间相关的方法。比如 <code><a href="../../../../en/DOM/element.getAttributeNS" rel="internal">getAttributeNS()</a></code> 和 <code><a href="../../../../en/DOM/element.getAttribute" rel="internal">getAttribute()</a></code> 相似除了需要一个指明名空间的参数。</p> - <p> 许多XUL元素有不同于其他元素的方法。参见 <a href="../../../../en/XUL_Reference" rel="internal">element reference</a> 。</p> - </div> - <div id="section_5"> - <h3 class="editable" id="DOM遍历"><span>DOM遍历</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Document_Object_Model#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> DOM是一个只有一个根的树。可以使用<code><a href="../../../../en/DOM/document.documentElement" rel="internal">documentElement</a></code> 方法获取根节点。根节点只要一个，但其他节点则不一定。一个元素对应与源文件中的标签，但也有文本节点、注释节点、及其他类型的节点。在XUL文档中根节点是源文件中的<code><span class="lang lang-en"><a href="../../../../en/XUL/window" rel="internal">window</a><span style="font-family: Verdana,Tahoma,sans-serif;">标签。</span></span></code> 树中的每一个节点都可能有其子节点，每个子节点又有它字节的子节点。由于DOM是树结构所以可以用一系列方法来遍历它。常用的几个列在下面：</p> - <dl> - <dt> - <a href="../../../../en/DOM/element.firstChild" rel="internal">firstChild</a></dt> - <dd> - 引用元素的第一个子节点。</dd> - <dt> - <a href="../../../../en/DOM/element.lastChild" rel="internal">lastChild</a></dt> - <dd> - 引用元素的最后一个子节点。</dd> - <dt> - <a href="../../../../en/DOM/element.childNodes" rel="internal">childNodes</a></dt> - <dd> - 返回元素子节点的列表。</dd> - <dt> - <a href="../../../../en/DOM/element.parentNode" rel="internal">parentNode</a></dt> - <dd> - 返回元素的亲节点。</dd> - <dt> - <a href="../../../../en/DOM/element.nextSibling" rel="internal">nextSibling</a></dt> - <dd> - 引用下一个兄弟节点。</dd> - <dt> - <a href="../../../../en/DOM/element.previousSibling" rel="internal">previousSibling</a></dt> - <dd> - 引用前一个兄弟节点。</dd> - </dl> - <p> 这些方法允许你以多种方法遍历文件，比如，使用 <code><a href="../../../../en/DOM/element.firstChild" rel="internal">firstChild</a></code> 方法获得第一个子节点并用 <code><a href="../../../../en/DOM/element.nextSibling" rel="internal">nextSibling</a></code> 方法遍历子节点，或者可以用<code><a href="../../../../en/DOM/element.childNodes" rel="internal">childNodes</a></code> 返回子节点列表。在Mozilla中后者更有效。</p> - <p> 这个例子展示如何遍历根节点的全部子节点：</p> - <pre>var childNodes = document.documentElement.childNodes; -for (var i = 0; i < childNodes.length; i++) { - var child = childNodes[i]; - // do something with child -} -</pre> - <p> 变量 <code><a href="../../../../en/DOM/element.childNodes" rel="internal">childNodes</a></code> 保存着文档根节点的全部子节点。然后像处理数组一样用一个 for 循环枚举全部元素。</p> - <div class="highlight"> - Find files example so far: <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-dom.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-dom.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-dom.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-dom.xul">View</a> </span></div> - <p><small>See also: <a href="../../../../en/A_re-introduction_to_JavaScript" rel="internal">A re-introduction to JavaScript</a> and the <a href="../../../../en/Core_JavaScript_1.5_Reference" rel="internal">JavaScript reference</a></small></p> - <p> 下一章学习修改DOM <a href="../../../../en/XUL_Tutorial/Modifying_a_XUL_Interface" rel="internal">modify the DOM</a>.</p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Broadcasters_and_Observers" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Modifying_a_XUL_Interface" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - </div> - </div> -</div> -<div class="printfooter" id="printfooter"> - <hr> -</div> -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/element_positioning/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/element_positioning/index.html deleted file mode 100644 index df6c75dee6..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/element_positioning/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: XUL_教程/元素定位 -slug: Mozilla/Tech/XUL/Tutorial/Element_Positioning -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Box_Model_Details">下一页 »</a></p> -</div><p></p> - -<h2 id=".E5.88.86.E7.BB.84.E5.85.83.E7.B4.A0.E5.AE.9A.E4.BD.8D" name=".E5.88.86.E7.BB.84.E5.85.83.E7.B4.A0.E5.AE.9A.E4.BD.8D">分组元素定位</h2> - -<p>迄今为止, 我们知道怎么在一个分组里面将元素进行水平或垂直定位。我们通常需要在分组内对元素的定位和尺寸进行更多的控制。为此，我们首先需要知道一个分组是怎么工作的。</p> - -<p>一个元素的定位由他所属容器的布局样式决定。例如，在水平分组中的一个按钮在前面的按钮的右边。一个元素的尺寸由两个因素决定：元素期望的大小和用户指定的大小。元素期望的大小由该元素所包含的内容决定。例如，一个按钮的宽度由按钮上所显示文本的长度决定。</p> - -<p>一般来说元素的大小仅够容纳它的内容。一些元素，像文本输入框会使用一个默认的尺寸。分组会分配足够的尺寸去将元素放在它里面。一个包括三个按钮的水平分组将会包含比三个按钮更多的宽度，插入一些填充。</p> - -<div class="float-right"><img alt="Image:boxstyle1n.png" class="internal" src="/@api/deki/files/2649/=Boxstyle1n.png"></div> - -<p>在图片中，开始两个按钮为它们的文本提供了合适的尺寸。第三个按钮比较长因为它包含更多的内容。分组的宽度包含按钮间的填充空间和按钮的宽度总和。按钮的高度采用能够放置它的文本的合适尺寸。</p> - -<h3 id=".E5.AE.BD.E5.BA.A6.E5.92.8C.E9.AB.98.E5.BA.A6.E5.B1.9E.E6.80.A7" name=".E5.AE.BD.E5.BA.A6.E5.92.8C.E9.AB.98.E5.BA.A6.E5.B1.9E.E6.80.A7">宽度和高度属性</h3> - -<p>在窗口中你可能需要对元素的尺寸进行更多的控制。有更多的特性允许你去控制元素的尺寸。有一个快捷的方法可以通过在元素中简单添加<code><code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> 和 <code><code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></code> 属性，更像你在HTML中的 <code>img</code> 标签的用法。下面展示了一个例子：</p> - -<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">View</a></p> - -<pre><button label="确认" width="100" height="40"/> -</pre> - -<p>然而，不推荐这样做。这么做适用性不好且可能与某些主题不匹配。一个更好的方法是使用样式表属性，它可以像中HTML中的样式表一样工作。可以使用下面的CSS属性。</p> - -<dl> - <dt>width </dt> - <dd>指定元素的宽度。</dd> - <dt>height </dt> - <dd>指定元素的高度。</dd> -</dl> - -<p>随便设置这两属性中的一个，元素将会创建它的宽度和高度。如果你只指定一个尺寸属性，另一个需要被算出。这些样式表属性的尺寸可以指定一个数字后面跟着一个单位。</p> - -<h4 id=".E5.8F.AF.E4.BC.B8.E7.BC.A9.E5.85.83.E7.B4.A0" name=".E5.8F.AF.E4.BC.B8.E7.BC.A9.E5.85.83.E7.B4.A0">可伸缩元素</h4> - -<p>非伸缩元素可以很简单快捷地计算尺寸。它们的宽度和高度可以直接被指定，如果没有指定尺寸，元素的默认尺寸就是刚好能放下它的内容的大小。对于可伸缩元素，计算需要一点窍门。</p> - -<p>可伸缩元素有一个可以设置为大于0的属性<code><code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>。被用来设置在可伸缩性元素中可以扩展和收缩的有用填充空间。它们的默认尺寸可以像非伸缩元素一样被计算。下面的例子做了这个的演示：</p> - -<p><span id="%E4%BE%8B2"><a id="%E4%BE%8B2"></a><strong>例2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">View</a></p> - -<pre><window orient="horizontal" - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - -<hbox> - <button label="Yes" flex="1"/> - <button label="No"/> - <button label="I really don't know one way or the other"/> -</hbox> - -</window> -</pre> - -<p>这个窗口会像之前的图片所显示的一样。前面两个按钮将一个合适尺寸作为默认宽度，第三个按钮将会比较大因为它有一个较长的标签。第一个按钮被建成是可伸缩的，并且将所有的三元素放在一个分组里面。分组的宽度被设置成全部三个元素的总宽度（图片的宽度大约是430像素）。</p> - -<p>如果你增加窗口的宽度，元素会被检查清楚它们是否是可伸缩的，然后被分配到填充的空白空间。按钮只是可伸缩元素，但它不会增加宽度。这是因为按钮所在的分组不是可伸缩的。一个非伸缩元素在空间有效时也不会改变尺寸，所以按钮不会比其他情况下变得更宽。因此，按钮不会变得更宽。</p> - -<p>这个解决方案也用于创建可伸缩性的分组。于是，当你创建一个更宽的窗口时，因此分组会伸长以便填充多余的空间。因为分组比较大，更多的空余空间可以被放在它里面，放在它里面的可伸缩按钮可以填充有效空间而得到扩展。这会被许多内嵌的分组重复处理。</p> - -<h2 id=".E8.AE.BE.E7.BD.AE.E6.9C.80.E5.B0.8F.E5.92.8C.E6.9C.80.E5.A4.A7.E5.B0.BA.E5.AF.B8" name=".E8.AE.BE.E7.BD.AE.E6.9C.80.E5.B0.8F.E5.92.8C.E6.9C.80.E5.A4.A7.E5.B0.BA.E5.AF.B8">设置最小和最大尺寸</h2> - -<p>你可以允许一个元素能够扩展但限制它的尺寸不能比一个确定的尺寸更大。或者，你可设置一个最小尺寸。你可以通过以下四个属性来达到这个目的：</p> - -<dl> - <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code> </dt> - <dd>指定元素的最小宽度。</dd> - <dt><code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code> </dt> - <dd>指定元素的最小高度。</dd> - <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code> </dt> - <dd>指定元素的最大宽度。</dd> - <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code> </dt> - <dd>指定元素的最大高度。</dd> -</dl> - -<p>这个值的单位是像素。你也可以使用相应的CSS属性：<code>min-width</code>， <code>min-height</code>， <code>max-width</code> 和 <code>max-height</code>。</p> - -<p>这些属性只可以用于可伸缩元素。例如，设置一个最大高度，一个可伸缩的按钮将只能扩展到一个 确定的最大高度。你可以更改窗口的尺寸超过这个值但按钮会在指定的尺寸停止扩展。分组中的按钮将会一直扩展到你设置的分组最大高度时止。</p> - -<p>如果两个按钮都具有相等的弹性值，普通情况下它们两个会共享相同的多余空间。如果一个按钮有一个最大宽度，第二个将会一直扩展直到用光所有的空间为止。</p> - -<p>如果一个分组有一个最大宽度或高度，子分组不会扩展超出它的最大尺寸。如果一个分组有一个最小宽度或高度，它的子分组不能缩小到比它的最小尺寸更小。</p> - -<h5 id=".E8.AE.BE.E7.BD.AE.E5.AE.BD.E5.BA.A6.E5.92.8C.E9.AB.98.E5.BA.A6.E7.9A.84.E4.BE.8B.E5.AD.90" name=".E8.AE.BE.E7.BD.AE.E5.AE.BD.E5.BA.A6.E5.92.8C.E9.AB.98.E5.BA.A6.E7.9A.84.E4.BE.8B.E5.AD.90">设置宽度和高度的例子</h5> - -<pre><button label="1" style="width: 100px;"/> -<button label="2" style="width: 100em; height: 10px;"/> -<button label="3" flex="1" style="min-width: 50px;"/> -<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> -<textbox flex="1" style="max-width: 10em;"/> -<description style="max-width: 50px">This is some boring but simple -wrapping text.</description> -</pre> - -<dl> - <dt>例1 </dt> - <dd>第一个按钮将显示成宽度为100像素的（px 的意思是像素）。你必须增加单位否则宽度将被忽略。</dd> - <dt>例2 </dt> - <dd>第二个按钮将显示成高度为10像素和宽度为100em（em是当前字体一个字符的尺寸）。</dd> - <dt>例3 </dt> - <dd>第三个按钮是可伸缩的所以它可以基于包含它的分组的尺寸进行扩展。然而，按钮不能收缩到比50像素更小。其它可伸缩组件像定位格可以吸收保留空间，而不管弹性比率。</dd> - <dt>例4 </dt> - <dd>第四个按钮是可伸缩的并且不能有一个比2ex(ex是当前字体中的字母x的高度)小的高度或比100像素更大的宽度。</dd> - <dt>例5 </dt> - <dd>文本输入框是可伸缩的但不能扩展超过10em。你会经常去使用em单位作为指定文本内容它们的尺寸。这个单位用于文本输入框因此字体可以更改并且文本输入框可以一直有个合适的尺寸，如果字体非常大时也一样。</dd> - <dt>例6 </dt> - <dd><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 元素包含50像素的最大宽度。在50像素后，文本会自动被截到下一行。</dd> -</dl> - -<div class="highlight"> -<h5 id=".E6.88.91.E4.BB.AC.E7.9A.84.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E5.AF.B9.E8.AF.9D.E6.A1.86" name=".E6.88.91.E4.BB.AC.E7.9A.84.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E5.AF.B9.E8.AF.9D.E6.A1.86">我们的文件查找对话框</h5> - -<p>让我们将这些样式增加到文件查找对话框。我们将会创建它因此文本输入框可以在输入窗口中改变尺寸。</p> - -<pre><textbox id="find-text" flex="1" style="min-width: 15em;"/> -</pre> - -<div class="float-right"><img alt="Image:boxstyle1.png" class="internal" src="/@api/deki/files/2648/=Boxstyle1.png"></div> -在这里，文本输入框被做成可伸缩的。这样，它可以在用户改变对话框的尺寸时进行扩展。这可以用于如果用户想要输入一个很长的文本字符串时。通常地，设置了一个最小宽度为15em则输入框会一直显示为至少15个字符的宽度。如果用户更改对话框的尺寸到很小，文本输入框不会缩小超过15个字符长度。在窗口里面的输入框将会被画出来，并超出窗口的范围。注解：在图片中文本输入框被扩展为充满窗口的尺寸。</div> - -<h2 id="Box_Packing" name="Box_Packing">Box Packing</h2> - -<p>Let's say you have a box with two child elements, both of which are not flexible, but the box is flexible. For example:</p> - -<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">View</a></p> - -<pre><box flex="1"> - <button label="Happy"/> - <button label="Sad"/> -</box> -</pre> - -<p>If you resize the window, the box will stretch to fit the window size. The buttons are not flexible, so they will not change their widths. The result is extra space that will appear on the right side of the window, inside the box. You may wish, however, for the extra space to appear on the left side instead, so that the buttons stay right aligned in the window.</p> - -<p>You could accomplish this by placing a <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> inside the box, but that gets messy when you have to do it numerous times. A better way is to use an additional attribute <code><code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> on the <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>. This attribute indicates how to <code><code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> the child elements inside the box. For horizontally oriented boxes, it controls the horizonal positioning of the children. For vertically oriented boxes, it controls the vertical positioning of the children. You can use the following values:</p> - -<dl> - <dt>start </dt> - <dd>This positions elements at the left edge for horizontal boxes and at the top edge for vertical boxes. This is the default value.</dd> - <dt>center </dt> - <dd>This centers the child elements in the box.</dd> - <dt>end </dt> - <dd>This positions elements at the right edge for horizontal boxes and at the bottom edge for vertical boxes.</dd> -</dl> - -<p>The <code><code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> attribute applies to the box containing the elements to be packed, not to the elements themselves.</p> - -<p>We can change the earlier example to center the elements as follows:</p> - -<p><span id="Example_4"><a id="Example_4"></a><strong>Example 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">View</a></p> - -<pre><box flex="1" pack="center"> - <button label="Happy"/> - <button label="Sad"/> -</box> -</pre> - -<p>Now, when the window is resized, the buttons center themselves horizontally. Compare this behavior to that of the previous example.</p> - -<h2 id="Box_Alignment" name="Box_Alignment">Box Alignment</h2> - -<p>If you resize the window in the Happy-Sad example above horizontally, the box will grow in width. If you resize the window vertically however, you will note that the buttons grow in height. This is because the flexibility is assumed by default in the other direction.</p> - -<p>You can control this behavior with the <code><code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> attribute. For horizontal boxes, it controls the position of the children vertically. For vertical boxes, it controls the position of the children horizontally. The possible values are similar to those for <code><code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code>.</p> - -<dl> - <dt>start </dt> - <dd>This aligns elements along the top edge for horizontal boxes and along the left edge for vertical boxes.</dd> - <dt>center </dt> - <dd>This centers the child elements in the box.</dd> - <dt>end </dt> - <dd>This aligns elements along the bottom edge for horizontal boxes and along the right edge for vertical boxes.</dd> - <dt>baseline </dt> - <dd>This aligns the elements so that the text lines up. This is only useful for horizontal boxes.</dd> - <dt>stretch </dt> - <dd>This value, the default, causes the elements to grow to fit the size of the box, much like a flexible element, but in the opposite direction.</dd> -</dl> - -<p>As with the <code><code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> attribute, the <code><code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> attribute applies to the box containing the elements to be aligned, not to the elements themselves.</p> - -<p>For example, the first box below will have its children stretch, because that is the default. The second box has an <code><code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> attribute, so its children will be placed centered.</p> - -<p><span id="Example_5"><a id="Example_5"></a><strong>Example 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">View</a></p> - -<pre><?xml version="1.0"?> -<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> - -<window id="yesno" title="Question" orient="horizontal" - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - - <hbox> - <button label="Yes"/> - <button label="No"/> - </hbox> - <hbox align="center"> - <button label="Maybe"/> - <button label="Perhaps"/> - </hbox> - -</window> -</pre> - -<div class="float-right"><img alt="Image:boxstyle2-b.png" class="internal" src="/@api/deki/files/2650/=Boxstyle2-b.png"></div> - -<p>You can also use the style properties <code><a href="/cn/CSS/-moz-box-pack" title="cn/CSS/-moz-box-pack">-moz-box-pack</a></code> and <code><a href="/cn/CSS/-moz-box-align" title="cn/CSS/-moz-box-align">-moz-box-align</a></code> instead of specifying attributes.</p> - -<div class="note">You may find the <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/aligner.xul">Box Alignment Example</a> useful for trying out the various box properties.</div> - -<h2 id="Cropping_Text_and_Buttons" name="Cropping_Text_and_Buttons">Cropping Text and Buttons</h2> - -<p>You could potentially create a button element that contains a label that is larger than the maximum width of the button. Of course, a solution would be to increase the size of the button. However, buttons (and other elements with a label) have a special attribute called <code>crop</code> that allows you to specify how the text may be cropped if it is too big.</p> - -<p>If the text is cropped, an ellipsis (...) will appear on the button where the text was taken out. Four possible values are valid:</p> - -<dl> - <dt>left </dt> - <dd>The text is cropped on its left side</dd> - <dt>right </dt> - <dd>The text is cropped on its right side</dd> - <dt>center </dt> - <dd>The text is cropped in the middle.</dd> - <dt>none </dt> - <dd>The text is not cropped. This is the default value.</dd> -</dl> - -<p>This attribute is really only useful when a dialog has been designed to be useful at any size. The <code>crop</code> attribute can also be used with other elements that use the <code>label</code> attribute for labels. The following shows this attribute in use:</p> - -<p><span id="Example_6"><a id="Example_6"></a><strong>Example 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">View</a></p> - -<div class="float-right"><img alt="Image:boxstyle2.png" class="internal" src="/@api/deki/files/2651/=Boxstyle2.png"></div> - -<pre><button label="Push Me Please!" crop="right" flex="1"/> -</pre> - -<p>Notice how the text on the button has had the right side of it cropped after the window is made smaller.</p> - -<div class="highlight"> -<p><span id="Find_files_example_so_far"><a id="Find_files_example_so_far"></a><strong>Find files example so far</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">View</a></p> -</div> - -<p>Next, a summary and some <a href="/cn/XUL_Tutorial/Box_Model_Details" title="cn/XUL_Tutorial/Box_Model_Details">additional details of the box model are described</a>.</p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Box_Model_Details">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/features_of_a_window/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/features_of_a_window/index.html deleted file mode 100644 index cae533b206..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/features_of_a_window/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Features of a Window -slug: Mozilla/Tech/XUL/Tutorial/Features_of_a_Window -translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window ---- -<p>This page has no content. Enrich MDC by contributing.</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html deleted file mode 100644 index 47201b797c..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: 网格 -slug: Mozilla/Tech/XUL/Tutorial/Grids -translation_of: Archive/Mozilla/XUL/Tutorial/Grids ---- -<p>XUL有一系列的元素来创建表格布局</p> -<h3 id="XUL的表格布局"> XUL的表格布局</h3> -<p>使用grid元素可以在XUL中使用一系列的元素来进行元素的布局。这与HTML中的table有很大的相似性。网格本身不会有任何的显示，它仅仅是使用行和列的形式来定位其他元素。</p> -<p>一个网格内部的元素排列成行。在grid里面，你需要声明两种东西，columns和rows。正如HTML的table，你可以将label和button等内容放在row里面。但是，grid只支持单独的row或者单独的column，因此你可以将内容放在rows里面或者columns里面。通常是使用rows。但是在grid中你还是可以使用column并制定其大小和显示方式。或者你可以将内容放在columns里面，然后用row来指定其显示方式。首先看看以row的方式组织元素的方法。</p> -<h4 id="声明一个网格">声明一个网格</h4> -<p>使用rows标签来声明一系列的row。Rows必须是grid的子元素。在rows里面你可以添加row元素，row用在每一行。在row元素中你可以放任何你想要的内容在里面。</p> -<p>相似的，列由columns来声明。其中有单独的column元素，每个你想添加的列都是一个column元素。</p> -<p>用一个例子更容易理解。</p> -<p>例子1：</p> -<p><img alt=""></p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><grid flex="1"></p> - <p> <columns></p> - <p> <column flex="2"/></p> - <p> <column flex="1"/></p> - <p> </columns></p> - <p> <rows></p> - <p> <row></p> - <p> <button label="Rabbit"/></p> - <p> <button label="Elephant"/></p> - <p> </row></p> - <p> <row></p> - <p> <button label="Koala"/></p> - <p> <button label="Gorilla"/></p> - <p> </row></p> - <p> </rows></p> - <p></grid></p> - </td> - </tr> - </tbody> -</table> -<p>添加了一个两行两列的grid。每个列由一个column标签声明。每一列都设置了flex属性。每行航油两个元素都是半年。每个单元格不需要进行声明，可以直接将内容放在row元素里面。</p> -<h4 id="带有更多元素的网格">带有更多元素的网格</h4> -<p>你可以使用任何元素来代替上面的button元素，。如果你想要一个详细的关于容纳多个元素的单元，你可以使用嵌套的hbox或者其他box元素。一个hbox元素是一个单一的元素，但是你可以在里面放任意多的元素。例如：</p> -<p>例子2：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><grid flex="1"></p> - <p> </p> - <p> <columns></p> - <p> <column/></p> - <p> <column flex="1"/></p> - <p> </columns></p> - <p> </p> - <p> <rows></p> - <p> <row></p> - <p> <label control="doctitle" value="Document Title:"/></p> - <p> <textbox id="doctitle" flex="1"/></p> - <p> </row></p> - <p> <row></p> - <p> <label control="docpath" value="Path:"/></p> - <p> <hbox flex="1"></p> - <p> <textbox id="docpath" flex="1"/></p> - <p> <button label="Browse..."/></p> - <p> </hbox> </p> - <p> </row></p> - <p> </rows></p> - <p> </p> - <p></grid></p> - </td> - </tr> - </tbody> -</table> -<p><img alt=""></p> -<p>注意第二列的第二行，含有一个box，box里面有一个文本框和一个按钮。你可以添加嵌套的box或者在里面放置另外一个grid。</p> -<p>由于第二行和文本框都设置了flex属性，所以改变窗口尺寸的时候文本框会改变大小，而其他元素不会改变。</p> -<p>一列的宽度由该列中最宽的元素决定。同牙膏的一行的高度由这一行中最高的元素决定。你可以使用minwidth和maxwidth以及相关的属性来对尺寸作更多的定义。</p> -<h4 id="按列组织">按列组织</h4> -<p>你也可以在列中添加元素，这样一来，row元素就只是用来表示有多少行了。</p> -<p>例子3：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><grid></p> - <p> <rows></p> - <p> <row/></p> - <p> <row/></p> - <p> <row/></p> - <p> </rows></p> - <p> </p> - <p> <columns></p> - <p> <column></p> - <p> <label control="first" value="First Name:"/></p> - <p> <label control="middle" value="Middle Name:"/></p> - <p> <label control="last" value="Last Name:"/></p> - <p> </column></p> - <p> <column></p> - <p> <textbox id="first"/></p> - <p> <textbox id="middle"/></p> - <p> <textbox id="last"/></p> - <p> </column></p> - <p> </columns></p> - <p> </p> - <p></grid></p> - </td> - </tr> - </tbody> -</table> -<p>这个网格有桑航两列。元素row仅仅表示有多少行。你可以添加flex属性来使其自适应。内容在每一列中。</p> -<p>如果你在列和行中都填内容，内容将会相互覆盖，不过他们会在grid中合适的进行排列。就像在网格中有堆元素一样。</p> -<p>Grid中元素的顺序决定了哪一个会显示在上面，哪一个在下面。如果rows元素放在columns元素后面，在rows中的内容会显示在上面。如果columns放在rows元素后面，列中的内容会显示在上面。事件的获取也一样。</p> -<h4 id="网格自适应">网格自适应</h4> -<p>网格的一个优点是在一系列嵌套box中你可以创建在水平和竖直方向上都自适应的单元格。你可以通过使用flex属性在row和column元素上来实现。下面的例子说明了这一点：</p> -<p>例子4：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><grid flex="1"></p> - <p> <columns></p> - <p> <column flex="5"/></p> - <p> <column/></p> - <p> <column/></p> - <p> </columns></p> - <p> <rows></p> - <p> <row flex="10"></p> - <p> <button label="Cherry"/></p> - <p> <button label="Lemon"/></p> - <p> <button label="Grape"/></p> - <p> </row></p> - <p> <row flex="1"></p> - <p> <button label="Strawberry"/></p> - <p> <button label="Raspberry"/></p> - <p> <button label="Peach"/></p> - <p> </row></p> - <p> </rows></p> - <p></grid></p> - </td> - </tr> - </tbody> -</table> -<p>第一列和所有两行都设置为自适应。这样的结果是第一列中的单元格在水平方向上自适应，另外每个单元格都会在竖直方向上自适应，因为两行都是自适应的，不过第一行还不止这样。第一列和第一行的单元格将会在水平方向上以5的倍率伸缩，在竖直方向上以10的倍率伸缩。</p> -<p>元素grid也要设置flex属性，这样所有的网格才能自适应，否则就只会在一个方向上自适应。</p> -<h3 id="列宽扩展">列宽扩展</h3> -<p>让很多行和列中的一个单元格扩展是没有意义的。但是可以让一行或者一列整个的扩展。为了实现这一点只需要在rows元素中添加一个元素。比如可以使用一个box样式。让回将其他元素放在里面。下面是一个简单的例子：</p> -<p>例子5：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><grid></p> - <p> <columns></p> - <p> <column flex="1"/></p> - <p> <column flex="1"/></p> - <p> </columns></p> - <p> </p> - <p> <rows></p> - <p> <row></p> - <p> <label value="Northwest"/></p> - <p> <label value="Northeast"/></p> - <p> </row></p> - <p> <button label="Equator"/></p> - <p> <row></p> - <p> <label value="Southwest"/></p> - <p> <label value="Southeast"/></p> - <p> </row></p> - <p> </rows></p> - <p></grid></p> - </td> - </tr> - </tbody> -</table> -<p>按钮将会扩展以适合整个grid的宽带，因为它不是一个grid的行中的元素。你也可以将相似的方式用在两个列中。这样就会扩展以一与网格的高度相适应。你可以在行和列上都使用，如果你想这样做。</p> -<p>下一节我们来看看内容面板</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/groupboxes/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/groupboxes/index.html deleted file mode 100644 index c62dd0f004..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/groupboxes/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 分组框 -slug: Mozilla/Tech/XUL/Tutorial/Groupboxes -translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes ---- -<p> 本章介绍在组框中添加元素的方法。</p> -<div id="section_1"> - <h3 class="editable" id="Groupboxes"><span>Groupboxes </span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Groupboxes#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> HTML 通过了 <code>fieldset</code> 元素来使元素分组，一般的会在元素的边上画一个框来显示元素的关系。比如一系列单选按钮。XUL 也通过了 <code><span class="lang lang-en"><a href="../../../../en/XUL/groupbox" rel="internal">groupbox</a> </span></code>元素来完成相似的功能。</p> - <p> 就像名字暗示的一样 <code><span class="lang lang-en"><a href="../../../../en/XUL/groupbox" rel="internal">groupbox</a> <span style="font-family: Verdana,Tahoma,sans-serif;">是一类box，这意味着在其中的元素可以安装box指定的形式排列。与一般的box相比groupbox有两点不同。</span></span></code></p> - <ul> - <li>默认的组框会画出边界，你可以使用 CSS 来改变这种行为。</li> - <li>groupbox 支持在边框顶部画出标题。</li> - </ul> - <p> 因为组框是一种box，你可以使用如 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/orient" rel="internal">orient</a> </span></code>及 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/flex" rel="internal">flex</a> 等属性<span style="font-family: Verdana,Tahoma,sans-serif;">。你可以把任何你想放入box中的元素放入组框中，无论他们有什么关系。</span></span></code></p> - <p> 组框顶端的标签使用 <code><span class="lang lang-en"><a href="../../../../en/XUL/caption" rel="internal">caption</a> <span style="font-family: Verdana,Tahoma,sans-serif;">元素创建，类似于</span></span></code> HTML 中的<code>legend</code> 元素，请把 <code><span class="lang lang-en"><a href="../../../../en/XUL/caption" rel="internal">caption</a> </span></code>作为第一个元素放入组框。</p> - <div id="section_2"> - <h4 class="editable" id="一个组框的例子"><span>一个组框的例子 </span></h4> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Groupboxes#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 下面的例子显示一个简单组框。</p> - <p><span class="lang lang-en"><span id="Example_1"><strong>Example 1</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul">View</a> </span></p> - <div class="float-right"> - <img alt="Image:titledbox1.png" class="internal" src="../../../../@api/deki/files/891/=Titledbox1.png"></div> - <pre><groupbox> - <caption label="Answer"/> - <description value="Banana"/> - <description value="Tangerine"/> - <description value="Phone Booth"/> - <description value="Kiwi"/> -</groupbox> -</pre> - <p> 以上代码表示：四条文本被一个以 <em>Answer </em>为标签的box框起来，注意组框默认的定向方式为垂直定向，所以元素会排成一列。</p> - </div> - <div id="section_3"> - <h4 class="editable" id="更复杂的标题"><span>更复杂的标题</span></h4> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Groupboxes#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 你可以在 <code><span class="lang lang-en"><a href="../../../../en/XUL/caption" rel="internal">caption</a> <span style="font-family: Verdana,Tahoma,sans-serif;">元素中添加子元素构造一个更复杂的标题，比如，</span></span></code>Mozilla的字体选择面板使用一个下拉菜单作为标题。尽管任何元素都可以在这里使用，通常的是使用下拉菜单和复选框。</p> - <p><span class="lang lang-en"><span id="Example_2"><strong>Example 2</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul">View</a> </span></p> - <div class="float-right"> - <img alt="Image:groupbox2.png" class="internal" src="../../../../@api/deki/files/706/=Groupbox2.png"></div> - <pre><groupbox flex="1"> - <caption> - <checkbox label="Enable Backups"/> - </caption> - <hbox> - <label control="dir" value="Directory:"/> - <textbox id="dir" flex="1"/> - </hbox> - <checkbox label="Compress archived files"/> -</groupbox> -</pre> - <p><br> - 这个例子里一个 <a href="../../../../en/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" rel="internal">checkbox</a> 被作为标题。我看可以根据复选框是否被选中，使用脚本来控制组框中的元素是否有效。组框中包含了一个有 <span class="lang lang-en"><a href="../../../../en/XUL/label" rel="internal">label</a> 和</span> <span class="lang lang-en"><a href="../../../../en/XUL/textbox" rel="internal">textbox</a> </span>的水平框，文本框和组框均被设定为是可变的，所以元素会随着窗口延伸。复选框出现在组框底下是因为组框默认为垂直定向。下一章我们为find files 对话框添加一个组框。</p> - </div> -</div> -<div id="section_4"> - <h3 class="editable" id="单选组"><span>单选组</span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Groupboxes#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 你可以使用 <code><span class="lang lang-en"><a href="../../../../en/XUL/radiogroup" rel="internal">radiogroup</a> <span style="font-family: Verdana,Tahoma,sans-serif;">把单选按钮组织在一起。</span></span></code> <code><span class="lang lang-en"><a href="../../../../en/XUL/radiogroup" rel="internal">radiogroup</a> </span></code>是一种box，你可以在其中放置任何元素，并且他对 <code><span class="lang lang-en"><a href="../../../../en/XUL/radio" rel="internal">radio</a> <span style="font-family: Verdana,Tahoma,sans-serif;">按钮具有特殊的处理。</span></span></code></p> - <p> 那些放在单选组里的单选按钮会被组织起来，即使它在其他的box中 。也可添加额外的元素，如下例：</p> - <p><span class="lang lang-en"><span id="Example_3"><strong>Example 3</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul">View</a> </span></p> - <pre><radiogroup> - <radio id="no" value="no" label="No Number"/> - <radio id="random" value="random" label="Random Number"/> - <hbox> - <radio id="specify" value="specify" label="Specify Number:"/> - <textbox id="specificnumber"/> - </hbox> -</radiogroup> -</pre> - <p> 注意 <code><span class="lang lang-en"><a href="../../../../en/XUL/radiogroup" rel="internal">radiogroup</a> <span style="font-family: Verdana,Tahoma,sans-serif;">不会画出边框。如果需要边框及标题请放置在</span></span></code> <code><span class="lang lang-en"><a href="../../../../en/XUL/groupbox" rel="internal">groupbox</a> <span style="font-family: Verdana,Tahoma,sans-serif;">中。</span></span></code></p> - <p> 接下来，我们使用学到的新知识来为findfile对话框添加元素。<a href="../../../../en/XUL_Tutorial/Adding_More_Elements" rel="internal">（additional elements to the find files dialog</a>.）</p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Box_Model_Details" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Adding_More_Elements" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> -</div> -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/index.html deleted file mode 100644 index a164d16f7f..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: XUL 教程 -slug: Mozilla/Tech/XUL/Tutorial -tags: - - XUL - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial ---- -<p> - 这份XUL的教程是源自 <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>之手。很感谢他能给MDC授权使用这篇文章。</p> - -<p>这篇教程会教你如何开发和设计基于<a href="/cn/XUL" title="cn/XUL">XUL</a>(<a href="/cn/XML" title="cn/XML">XML</a> User-interface Language XML用户交互语言)的应用程序. XUL是Mozilla创建的并且应用在Mozilla的应用程序的界面描述语言。</p> - -<h5 id=".E7.AC.AC.E4.B8.80.E7.AB.A0__.E5.BC.95.E8.A8.80" name=".E7.AC.AC.E4.B8.80.E7.AB.A0__.E5.BC.95.E8.A8.80">第一章 引言</h5> - -<ul> - <li><a href="Tutorial/Introduction">引言</a></li> - <li><a href="Tutorial/XUL_Structure" title="cn/XUL_教程/1-2_XUL的结构">XUL的结构</a></li> - <li><a class="external" href="Tutorial/The_Chrome_URL" title="关于Chrome URL">关于Chrome URL</a></li> - <li><a href="Tutorial/Manifest_Files" title="cn/XUL_教程/1-4_关于Manifest文件">关于Manifest文件</a></li> -</ul> - -<h5 id=".E7.AE.80.E5.8D.95.E7.9A.84.E7.A4.BA.E4.BE.8B" name=".E7.AE.80.E5.8D.95.E7.9A.84.E7.A4.BA.E4.BE.8B">简单的示例</h5> - -<ul> - <li><a href="Tutorial/Creating_a_Window" title="cn/XUL_教程/创建一个窗口">创建一个窗口</a></li> - <li><a href="/cn/XUL_教程/增加一些按钮" title="cn/XUL_教程/增加一些按钮">增加一些按钮</a></li> - <li><a href="/cn/XUL_教程/增加标签和图像" title="cn/XUL_教程/增加标签和图像">增加标签和图像</a></li> - <li><a href="/cn/XUL_教程/输入控件" title="cn/XUL_教程/输入控件">输入控件</a></li> - <li><a href="/cn/XUL_教程/数值控件" title="cn/XUL 教程/数值控件">数值控件</a></li> - <li><a href="/cn/XUL_教程/列表控件" title="cn/XUL_教程/列表控件">列表控件 </a></li> - <li><a href="/cn/XUL_教程/进度条" title="cn/XUL_教程/进度条">进度条</a></li> - <li><a href="/cn/XUL_教程/增加HTML元素" title="cn/XUL_教程/增加HTML元素">增加HTML元素</a></li> - <li><a href="/cn/XUL_教程/使用定位格" title="cn/XUL_教程/使用定位格">使用定位格</a></li> - <li><a href="/cn/XUL_教程/更多的按钮特性" title="cn/XUL_教程/更多的按钮特性">更多的按钮特性</a></li> -</ul> - -<h5 id=".E7.9B.92.E6.A8.A1.E5.9E.8B" name=".E7.9B.92.E6.A8.A1.E5.9E.8B">箱模型</h5> - -<ul> - <li><a href="/cn/XUL_教程/分组方式" title="cn/XUL_教程/分组方式">分组方式</a></li> - <li><a href="/cn/XUL_教程/元素定位" title="cn/XUL_教程/元素定位">元素定位</a></li> - <li><a href="/Cn/XUL_教程/分组细节" title="cn/XUL_教程/分组细节">分组细节</a></li> - <li><a href="/Cn/XUL_教程/分组框" title="cn/XUL_教程/分组框">分组框</a></li> - <li><a href="/Cn/XUL_教程/增加更多的元素" title="cn/XUL_教程/增加更多的元素">增加更多的元素</a></li> -</ul> - -<h5 id=".E6.9B.B4.E5.A4.9A.E7.9A.84.E5.B8.83.E5.B1.80.E5.85.83.E7.B4.A0" name=".E6.9B.B4.E5.A4.9A.E7.9A.84.E5.B8.83.E5.B1.80.E5.85.83.E7.B4.A0">更多的布局元素</h5> - -<ul> - <li><a href="/Cn/XUL_教程/层和卡片" title="cn/XUL_教程/层和卡片">层和卡片</a></li> - <li><a href="/cn/XUL_教程/定位层" title="cn/XUL_教程/定位层">定位层</a></li> - <li><a href="/cn/XUL_教程/分页组" title="cn/XUL_教程/分页组">分页组</a></li> - <li><a href="/cn/XUL_教程/表格" title="cn/XUL_教程/表格">表格</a></li> - <li><a href="/Cn/XUL_教程/内容面板" title="cn/XUL_教程/内容面板">内容面板</a></li> - <li><a href="/cn/XUL_教程/Splitters" title="cn/XUL_教程/Splitters">Splitters</a></li> - <li><a href="/Cn/XUL_教程/滚动栏" title="cn/XUL_教程/滚动栏">滚动栏</a></li> -</ul> - -<h5 id=".E5.B7.A5.E5.85.B7.E6.A0.8F.E5.92.8C.E8.8F.9C.E5.8D.95" name=".E5.B7.A5.E5.85.B7.E6.A0.8F.E5.92.8C.E8.8F.9C.E5.8D.95">工具栏和菜单</h5> - -<ul> - <li><a href="/cn/XUL_教程/工具栏" title="cn/XUL_教程/工具栏">工具栏</a></li> - <li><a href="/cn/XUL_教程/简单菜单栏" title="cn/XUL_教程/简单菜单栏">简单菜单栏</a></li> - <li><a href="/cn/XUL_教程/更多菜单特性" title="cn/XUL_教程/更多菜单特性">更多菜单特性</a></li> - <li><a href="/cn/XUL_教程/弹出菜单" title="cn/XUL_教程/弹出菜单">弹出菜单</a></li> - <li><a href="/cn/XUL_教程/滚动菜单" title="cn/XUL_教程/滚动菜单">滚动菜单</a></li> -</ul> - -<h5 id=".E4.BA.8B.E4.BB.B6.E5.92.8C.E8.84.9A.E6.9C.AC" name=".E4.BA.8B.E4.BB.B6.E5.92.8C.E8.84.9A.E6.9C.AC">事件和脚本</h5> - -<ul> - <li><a href="/cn/XUL_教程/添加事件处理器" title="cn/XUL_教程/添加事件处理器">添加事件处理器</a></li> - <li><a href="/Cn/XUL_教程/其他事件处理器" title="cn/XUL_教程/其他事件处理器">其他事件处理器</a></li> - <li><a href="/cn/XUL_教程/键盘的快捷键" title="cn/XUL_教程/键盘的快捷键">键盘的快捷键</a></li> - <li><a href="/cn/XUL_教程/焦点和选择" title="cn/XUL_教程/焦点和选择">焦点和选择 Focus and Selection</a></li> - <li><a href="/cn/XUL_教程/命令" title="cn/XUL_教程/命令">命令 Commands</a></li> - <li><a href="/cn/XUL_教程/更新操作" title="cn/XUL_教程/更新操作">更新操作</a></li> - <li><a href="/cn/XUL_教程/广播和监听器" title="cn/XUL_教程/广播和监听器">广播和监听器 Broadcasters and Observers</a></li> -</ul> - -<h5 id=".E6.96.87.E6.A1.A3.E5.AF.B9.E8.B1.A1.E6.A8.A1.E5.9E.8B" name=".E6.96.87.E6.A1.A3.E5.AF.B9.E8.B1.A1.E6.A8.A1.E5.9E.8B">文档对象模型</h5> - -<ul> - <li><a href="/cn/XUL_教程/文档对象模型" title="cn/XUL_教程/文档对象模型">文档对象模型 Document Object Model</a></li> - <li><a href="/cn/XUL_教程/修改XUL界面" title="cn/XUL_教程/修改XUL界面">修改XUL界面 Modifying a XUL Interface</a></li> - <li><a href="/cn/XUL_教程/使用列表" title="cn/XUL_教程/使用列表">使用列表 Manipulating Lists</a></li> - <li><a href="/cn/XUL_教程/Box对象" title="cn/XUL_教程/Box对象">Box对象 Box Objects</a></li> - <li><a href="/Cn/XUL_教程/XPCOM_接口" title="cn/XUL_教程/XPCOM_接口">XPCOM 接口 XPCOM Interfaces</a></li> - <li><a href="/cn/XUL_教程/XPCOM_示例" title="cn/XUL_教程/XPCOM_示例">XPCOM 示例 XPCOM Examples</a></li> -</ul> - -<h5 id=".E6.A0.91" name=".E6.A0.91">树</h5> - -<ul> - <li><a href="/cn/XUL_教程/Trees" title="cn/XUL_教程/Trees">树</a></li> - <li><a href="/cn/XUL_教程/More_Tree_Features" title="cn/XUL_教程/More_Tree_Features">更多树的特性</a></li> - <li><a href="/cn/XUL_教程/Tree_Selection" title="cn/XUL_教程/Tree_Selection">Tree Selection</a></li> - <li><a href="/cn/XUL_教程/Custom_Tree_Views" title="cn/XUL_教程/Custom_Tree_Views">Custom Tree Views</a></li> - <li><a href="/cn/XUL_教程/Tree_View_Details" title="cn/XUL_教程/Tree_View_Details">Tree View Details</a></li> - <li><a href="/cn/XUL_教程/Tree_Box_Objects" title="cn/XUL_教程/Tree_Box_Objects">Tree Box Objects</a></li> -</ul> - -<h5 id="RDF_.E5.92.8C.E6.A8.A1.E6.9D.BF" name="RDF_.E5.92.8C.E6.A8.A1.E6.9D.BF">RDF 和模板</h5> - -<ul> - <li><a class="internal" href="/Cn/XUL_教程/RDF介绍" title="cn/XUL 教程/RDF介绍">RDF介绍</a></li> - <li><a href="/Cn/XUL_教程/Templates" title="cn/XUL_教程/Templates">模板</a></li> - <li><a href="/cn/XUL_教程/Trees_and_Templates" title="cn/XUL_教程/Trees_and_Templates">树和模板 Trees and Templates</a></li> - <li><a href="/cn/XUL_教程/RDF_Datasources" title="cn/XUL_教程/RDF_Datasources">RDF数据源 RDF Datasources</a></li> - <li><a href="/cn/XUL_教程/Advanced_Rules" title="cn/XUL_教程/Advanced_Rules">高级规则 Advanced Rules</a></li> - <li><a href="/cn/XUL_教程/Persistent_Data" title="cn/XUL_教程/Persistent_Data">Persistent Data</a></li> -</ul> - -<h5 id=".E6.9C.AC.E5.9C.B0.E5.8C.96.E5.92.8C.E7.9A.AE.E8.82.A4" name=".E6.9C.AC.E5.9C.B0.E5.8C.96.E5.92.8C.E7.9A.AE.E8.82.A4">本地化和皮肤</h5> - -<ul> - <li><a href="/cn/XUL_教程/添加样式表" title="cn/XUL_教程/添加样式表">添加样式表</a></li> - <li><a href="/cn/XUL_教程/样式化树" title="cn/XUL_教程/样式化树">对树进行样式化</a></li> - <li><a href="/cn/XUL_教程/修改默认的皮肤" title="cn/XUL_教程/修改默认的皮肤">修改默认的皮肤</a></li> - <li><a href="/cn/XUL_教程/创建一个皮肤" title="cn/XUL_教程/创建一个皮肤">创建一个皮肤</a></li> - <li><a href="/Cn/XUL_教程/本地化" title="cn/XUL_教程/本地化">本地化</a></li> - <li><a href="/Cn/XUL_教程/属性文件" title="cn/XUL_教程/属性文件">属性文件</a></li> -</ul> - -<h5 id=".E7.BB.91.E5.AE.9A" name=".E7.BB.91.E5.AE.9A">绑定</h5> - -<ul> - <li><a href="/Cn/XUL_教程/XBL介绍" title="cn/XUL_教程/XBL介绍">Introduction to XBL</a></li> - <li><a class="internal" href="/cn/XUL_教程/匿名内容" title="cn/XUL 教程/匿名内容">匿名内容</a></li> - <li><a href="/cn/XUL_教程/XBL_Attribute_Inheritance" title="cn/XUL_教程/XBL_Attribute_Inheritance">XBL Attribute Inheritance</a></li> - <li><a href="/cn/XUL_教程/Adding_Properties_to_XBL-defined_Elements" title="cn/XUL_教程/Adding_Properties_to_XBL-defined_Elements">Adding Properties</a></li> - <li><a href="/cn/XUL_教程/Adding_Methods_to_XBL-defined_Elements" title="cn/XUL_教程/Adding_Methods_to_XBL-defined_Elements">Adding Methods</a></li> - <li><a href="/cn/XUL_教程/Adding_Event_Handlers_to_XBL-defined_Elements" title="cn/XUL_教程/Adding_Event_Handlers_to_XBL-defined_Elements">Adding Event Handlers</a></li> - <li><a href="/cn/XUL_教程/XBL_Inheritance" title="cn/XUL_教程/XBL_Inheritance">XBL Inheritance</a></li> - <li><a href="/cn/XUL_教程/XBL_Example" title="cn/XUL_教程/XBL_Example">XBL示例</a></li> -</ul> - -<h5 id=".E7.89.B9.E6.AE.8A.E7.9A.84.E7.AA.97.E5.8F.A3.E7.B1.BB.E5.9E.8B" name=".E7.89.B9.E6.AE.8A.E7.9A.84.E7.AA.97.E5.8F.A3.E7.B1.BB.E5.9E.8B">特殊的窗口类型</h5> - -<ul> - <li><a href="/cn/XUL_教程/Features_of_a_Window" title="cn/XUL_教程/Features_of_a_Window">窗口特征</a></li> - <li><a href="/Cn/XUL_教程/Creating_Dialogs" title="cn/XUL_教程/Creating_Dialogs">创建对话框 Creating Dialogs</a></li> - <li><a href="/cn/XUL_教程/Open_and_Save_Dialogs" title="cn/XUL_教程/Open_and_Save_Dialogs">打开并保存对话框 Open and Save Dialogs</a></li> - <li><a href="/cn/XUL_教程/Creating_a_Wizard" title="cn/XUL_教程/Creating_a_Wizard">创建一个向导 Creating a Wizard</a></li> - <li><a href="/cn/XUL_教程/More_Wizards" title="cn/XUL_教程/More_Wizards">More Wizards</a></li> - <li><a href="/cn/XUL_教程/Overlays" title="cn/XUL_教程/Overlays">Overlays</a></li> - <li><a href="/cn/XUL_教程/Cross_Package_Overlays" title="cn/XUL_教程/Cross_Package_Overlays">Cross Package Overlays</a></li> -</ul> - -<h5 id=".E5.AE.89.E8.A3.85" name=".E5.AE.89.E8.A3.85">安装</h5> - -<ul> - <li><a href="/cn/XUL_教程/Creating_an_Installer" title="cn/XUL_教程/Creating_an_Installer">创建安装程序</a></li> - <li><a href="/cn/XUL_教程/Install_Scripts" title="cn/XUL_教程/Install_Scripts">安装脚本</a></li> - <li><a href="/cn/XUL_教程/Additional_Install_Features" title="cn/XUL_教程/Additional_Install_Features">其它安装功能</a></li> -</ul> - -<div class="originaldocinfo"> -<h5 id=".E5.85.B3.E4.BA.8E.E5.8E.9F.E5.A7.8B.E6.96.87.E6.A1.A3.E7.9A.84.E4.BF.A1.E6.81.AF" name=".E5.85.B3.E4.BA.8E.E5.8E.9F.E5.A7.8B.E6.96.87.E6.A1.A3.E7.9A.84.E4.BF.A1.E6.81.AF">关于原始文档的信息</h5> - -<ul> - <li>作者: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> - <li>最后修改时间: 2005年6月3日</li> - <li>版权信息: © 1999-2005 XULPlanet.com</li> -</ul> -</div> - -<p> </p> - -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/input_controls/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/input_controls/index.html deleted file mode 100644 index d901c50eeb..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/input_controls/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: XUL_教程/输入控件 -slug: Mozilla/Tech/XUL/Tutorial/Input_Controls -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Numeric_Controls">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E6.96.87.E6.9C.AC.E8.BE.93.E5.85.A5.E6.A1.86" name=".E6.96.87.E6.9C.AC.E8.BE.93.E5.85.A5.E6.A1.86">文本输入框</h3> -<p>HTML有一个输入元素可以用于文本输入操作。 XUL 有一个相似的元素, <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>, 用于文本输入。 不用任何属性, <code>textbox</code> 元素创建一个框让用户可以输入文本。文本框具有像HTML的输入操作相同的许多属性。下面列出其中一部份：</p> -<dl> - <dt> - <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> - <dd> - 控件的唯一性标识。</dd> - <dt> - <code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt> - <dd> - 输入框的样式。</dd> - <dt> - <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt> - <dd> - 如果你要输入框显示一个默认值，可以指定此属性。</dd> - <dt> - <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> - <dd> - 如果需要禁用文本输入框可以将这个属性设为<code>true</code>。</dd> - <dt> - <code id="a-type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> </dt> - <dd> - 你可以将这个属性的值设为<code>password</code>, 创建一个输入框隐藏用户的输入内容。 通常用于密码输入框。</dd> - <dt> - <code id="a-maxlength"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxlength">maxlength</a></code> </dt> - <dd> - 输入框允许输入的字符最大数量。</dd> -</dl> -<p>注解：在HTML里, 使用<code>input</code>元素区分几个不同类型的字段，在XUL里用每种类型对元素进行区分。</p> -<p>下面列出输入框的一些属性:</p> -<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul">View</a></p> -<pre><label control="some-text" value="Enter some text"/> -<textbox id="some-text"/> -<label control="some-password" value="Enter a password"/> -<textbox id="some-password" type="password" maxlength="8"/> -</pre> -<h4 id=".E5.A4.9A.E8.A1.8C.E6.96.87.E6.9C.AC.E8.BE.93.E5.85.A5.E6.A1.86" name=".E5.A4.9A.E8.A1.8C.E6.96.87.E6.9C.AC.E8.BE.93.E5.85.A5.E6.A1.86">多行文本输入框</h4> -<p>上面的<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 例子创建的输入框仅仅可以输入一行文本。HTML也有一个<code>textarea</code>元素用来创建一个大的文本输入区域。在XUL，你可以使用<code>textbox</code>元素达到很好的效果 -- 这两种元素都不是很常用。如果你设置<code><code id="a-multiline"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code></code>属性为<code>true</code>，文本输入框将显示为多行。</p> -<p><span id="%E4%BE%8B2"><a id="%E4%BE%8B2"></a><strong>例2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">View</a></p> -<pre><textbox multiline="true" - value="This is some text that could wrap onto multiple lines."/> -</pre> -<p>就像HTML中的<code>textarea</code>，你可以使用 <code>rows</code> 和<code>cols</code> 属性设置大小。这可以设置显示字符的行和列数量。</p> -<div class="highlight"> - <h4 id=".E6.88.91.E4.BB.AC.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E7.9A.84.E4.BE.8B.E5.AD.90" name=".E6.88.91.E4.BB.AC.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E7.9A.84.E4.BE.8B.E5.AD.90">我们文件查找的例子</h4> - <p>让我们给文件查找对话框添加一个搜索输入框。我们将要使用 <code>textbox</code> 元素。</p> - <pre class="eval"><span class="highlightred"><label value="Search for:" control="find-text"/></span> -<span class="highlightred"><textbox id="find-text"/></span> - -<button id="find-button" label="Find"/> -</pre> - <div class="float-right"> - <div class="float-right"> - <img alt="Image:inputs1.png" class="internal" src="/@api/deki/files/730/=Inputs1.png"></div> - </div> - <p>将这些行插入到在前一节最后我们创建的按钮的前面。如果你打开这个窗口，你将会看到像显示的图片一样的效果。</p> - <p>注解：标签和文本输入框现在已经显示在窗口里。文本输入框已具有完全的功能你可以在它里面输入文本和选中文本。使用<code><code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 属性后因此当<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 被点击后输入框被选中。</p> - <h3 id=".E5.A4.9A.E9.80.89.E5.92.8C.E5.8D.95.E9.80.89.E6.8C.89.E9.92.AE" name=".E5.A4.9A.E9.80.89.E5.92.8C.E5.8D.95.E9.80.89.E6.8C.89.E9.92.AE">多选和单选按钮</h3> - <p>另外两个元素是用于创建多选输入框和单选按钮。它们是按钮的变体。多选输入框元素(checkbox element)有多个选择项，可以被选或不选。单选按钮的用法相似，它有一个集合并且只能选择其中之一。</p> - <p>你可以像使用按钮的属性一样使用多选输入框和单选按钮。下面的例子向你展示一些简单的多选输入框和单选按钮。</p> - <pre><checkbox id="case-sensitive" checked="true" label="Case sensitive"/> -<radio id="orange" label="Orange"/> -<radio id="violet" selected="true" label="Violet"/> -<radio id="yellow" label="Yellow"/> -</pre> - <p>第一行创建一个简单的 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></code>。当用户点击多选项，它在选中和非选中之间切换。<code><code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 属性可以用在表明它的默认状态。你可以将它的值设为<code>true</code>或者<code>false</code>。<code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性可以用于设置显示在多选项旁边的文本。对于<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 按钮，你可以使用 <code><code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 属性代替 <code><code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 属性。设置它的值为 <code>true</code> 让默认选中其中的一个单选按钮，或者不选中其他的单选按钮。</p> - <h4 id=".E5.8D.95.E9.80.89.E9.A1.B9.E7.BB.84.E5.85.83.E7.B4.A0" name=".E5.8D.95.E9.80.89.E9.A1.B9.E7.BB.84.E5.85.83.E7.B4.A0">单选项组元素</h4> - <p>为了把单选按钮组合在一起，你需要用到<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 元素。 在单选按钮组中同一时间只允许其中的一个单选按钮被选中。在其中的一个中点击将会把同一组中的其他按钮都设成关闭。下面的例子很好地示范了这一点。</p> - <p><span id="%E4%BE%8B3"><a id="%E4%BE%8B3"></a><strong>例3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">View</a></p> - <pre><radiogroup> - <radio id="orange" label="Orange"/> - <radio id="violet" selected="true" label="Violet"/> - <radio id="yellow" label="Yellow"/> -</radiogroup> -</pre> - <h4 id=".E5.B1.9E.E6.80.A7" name=".E5.B1.9E.E6.80.A7">属性</h4> - <p>像按钮一样，多选框和单选按钮可以用文本标签和图片进行包装，当它被按下时通过切换图片来表达选中或没选中。多选项有很多与按钮相同的属性:</p> - <dl> - <dt> - <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt> - <dd> - 在多选项或单选按钮上的文本标签。</dd> - <dt> - <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> - <dd> - 设为<code>true</code> 或 <code>false</code> 去禁用或启用多选项或单选按钮。</dd> - <dt> - <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt> - <dd> - 用于选中元素的快捷键。字母会在标签中以下划线显示。</dd> - </dl> - <div class="highlight"> - <p><span id="%E5%88%B0%E7%9B%AE%E5%89%8D%E4%B8%BA%E6%AD%A2%E6%96%87%E4%BB%B6%E6%9F%A5%E6%89%BE%E7%9A%84%E4%BE%8B%E5%AD%90"><a id="%E5%88%B0%E7%9B%AE%E5%89%8D%E4%B8%BA%E6%AD%A2%E6%96%87%E4%BB%B6%E6%9F%A5%E6%89%BE%E7%9A%84%E4%BE%8B%E5%AD%90"></a><strong>到目前为止文件查找的例子</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">View</a></p> - </div> - <p>在下一节，我们将可以看到一些适用于<a href="/XUL_Tutorial:Numeric_Controls" title="XUL Tutorial:Numeric Controls">输入和选择数值</a>的元素。</p> - <div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Numeric_Controls">下一页 »</a></p> -</div></div> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/introduction/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/introduction/index.html deleted file mode 100644 index 5e80393d30..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/introduction/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: XUL_教程/引言 -slug: Mozilla/Tech/XUL/Tutorial/Introduction -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/Introduction ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_教程:XUL的结构">下一页 »</a></p> -</div><p></p> - -<p>这份教程可以帮助你如何用 XUL (XML用户界面语言) 来创建跨平台的可描述界面的应用程序.</p> - -<p>这份教程将设计出一个"查找文件"的应用程序界面, 类似于Macintosh的Sherlock或是Windows的文件查找的窗口. 只会提供基本的界面以及一些简单的功能函数. 真正的文件查找功能并没有实现,.</p> - -<h2 id=".E4.BB.80.E4.B9.88.E6.98.AFXUL.EF.BC.8C.E5.8F.8A.E4.B8.BA.E4.BB.80.E4.B9.88.E8.A6.81.E5.88.9B.E5.BB.BA.E5.AE.83.EF.BC.9F" name=".E4.BB.80.E4.B9.88.E6.98.AFXUL.EF.BC.8C.E5.8F.8A.E4.B8.BA.E4.BB.80.E4.B9.88.E8.A6.81.E5.88.9B.E5.BB.BA.E5.AE.83.EF.BC.9F">什么是XUL，及为什么要创建它？</h2> - -<p>XUL (发音是 zool,有点像cool) 是为开发更快更简单的Mozilla浏览器而开发的. 这是一个基于 XML 可扩展描述语言 的语言 ,所以XML的所有特性都适用于XUL.</p> - -<p>大多数应用程序在开发的时候都需要应用某个特定平台的特性，这就使得创建一个跨平台的软件变得费时费力。而这对于某些用户或许并非重要，但是对那些想在其它设备上，比如手持设备或机顶盒上，运行一个应用程序的用户来说却，跨平台确是至关重要的。</p> - -<p>在过去诸多跨平台的解决方案都已被开发出来。比如Java的可移植性就是其主要卖点。XUL则是一个那样的语言，它被设计出用于创建可移植的用户界面。</p> - -<p>创建一个应用程序是要花费好多时间的，哪怕它只工作在某个平台下。编译和排错需要的时间可能会很多。而使用XUL，一个界面可以被快速方便地制作和修改。</p> - -<p>XUL具备所有其它XML语言的所有优点。举例来说，XHTML或者其它XML语言，比如MathML 数学标记语言 或 SVG 可伸缩矢量图，可以被插入到XUL当中。同样，XUL中的文本也可以很容易地被本地化，那意味着它可以稍加努力就可以被翻译成其它国家的语言。样式表可以被提供用于修改用户界面的外观（就像WinAmp的主题和皮肤或者某些窗口管理器）。</p> - -<h2 id=".E7.94.A8XUL.E5.8F.AF.E4.BB.A5.E5.81.9A.E4.BA.9B.E4.BB.80.E4.B9.88.E7.B1.BB.E5.9E.8B.E7.9A.84.E7.94.A8.E6.88.B7.E7.95.8C.E9.9D.A2.EF.BC.9F" name=".E7.94.A8XUL.E5.8F.AF.E4.BB.A5.E5.81.9A.E4.BA.9B.E4.BB.80.E4.B9.88.E7.B1.BB.E5.9E.8B.E7.9A.84.E7.94.A8.E6.88.B7.E7.95.8C.E9.9D.A2.EF.BC.9F">用XUL可以做些什么类型的用户界面？</h2> - -<p>XUL有能力创建现代图形界面中的大多数元件。它的应用广泛到可以满足特定设备特殊要求，而它的强大足以使开发者创建出复杂的界面。</p> - -<p>下列组件可以被创建：</p> - -<ul> - <li>输入组件，如文本框和复选框</li> - <li>带按钮和其它组件的工具条</li> - <li>带菜单和弹出菜单的菜单条</li> - <li>选项卡对话框</li> - <li>树形控件或栅格控件</li> - <li>快捷键</li> -</ul> - -<p>显示的内容创建自XUL文件及数据源的数据，在Mozilla中，数据源包含用户邮件箱、书签、搜索结果等等，菜单、树状列表和其它元素都能从那添加，也可以从RDF文件添加自定义的数据。</p> - -<p>创建XUL应用程序的方法有几种：</p> - -<ul> - <li>Firefox扩展：扩展可以增强浏览器的功能，一般出现在工具栏、菜单，或自定义的界面里面。这里使用一种在XUL里称为overlay的东西完成，可以被主界面所引用，在实际使用中，Firefox将从扩展里面引入相关界面。扩展也可以被其它基于Mozilla平台的产品所使用，例如Thunderbird。</li> - <li>基于XULRunner的程序：XULRunner是创建基于Mozilla平台XUL程序的一个独立程序，它有自己的可执行文件，因而不需要浏览器。</li> - <li>XUL包：有别与前面基于Firefox扩展及XULRunner，它更像是有独立运行窗口的独立程序，一般用于不想携带大体积的XULRunner程序，但仍然需要Mozilla浏览器来允许该包。</li> - <li>远程XUL程序：你可以把XUL代码放在Web服务器，然后在浏览器打开访问，但基于安全方面的原因，该方法有局限性。</li> -</ul> - -<p>前三种类型需要在用户电脑做安装操作，但是这样程序就没有安全限制了，可以访问本地文件和读写属性。例如扩展，所包含的XUL文件、脚本和图像将被打包成单一文件，用户下载后安装到本地。基于Mozilla的程序比如Firefox，提供了扩展管理器来对包进行安装管理，而不需要很多代码操作。 XUL也可以从远程WEB站点打开，然而这样很多类型操作会有限制，以及一些XUL外观效果会失效。如果你需要从远程站点载入XUL内容，WEB服务器必须设置XUL文件头格式为'application/vnd.mozilla.xul+xml'。通常XUL文件使用.xul为扩展名，你可以从Mozilla浏览器打开它，跟打开其它文件一样，点击菜单【打开文件】或者直接在地址栏输入URL地址。</p> - -<h2 id=".E5.AD.A6.E4.B9.A0.E8.BF.99.E4.BB.BD.E6.95.99.E7.A8.8B.E4.B9.8B.E5.89.8D.EF.BC.8C.E6.88.91.E9.9C.80.E8.A6.81.E5.81.9A.E4.BA.9B.E4.BB.80.E4.B9.88.E7.9F.A5.E8.AF.86.E5.87.86.E5.A4.87.EF.BC.9F" name=".E5.AD.A6.E4.B9.A0.E8.BF.99.E4.BB.BD.E6.95.99.E7.A8.8B.E4.B9.8B.E5.89.8D.EF.BC.8C.E6.88.91.E9.9C.80.E8.A6.81.E5.81.9A.E4.BA.9B.E4.BB.80.E4.B9.88.E7.9F.A5.E8.AF.86.E5.87.86.E5.A4.87.EF.BC.9F">学习这份教程之前，我需要做些什么知识准备？</h2> - -<p>你需要理解HTML，以及了解XML和CSS一些基础知识，下面几点建议需要注意：</p> - -<ul> - <li>XUL标签和属性全部用小写，XML是区分大小写的(不像HTML)</li> - <li>XUL属性值都要写在引号内，即使是数字</li> - <li>XUL文件一般分割为四部分，一是布局和元素，二是样式描述，三是脚本，四是语言包，另外通常还会包括一些图片和数据文件</li> -</ul> - -<p>基于Mozilla和Gecko平台的程序都支持XUL，例如Mozilla Firefox和Netscape6。随着时间推移XUL在语法有些不同，你可能需要使用适当的版本来进行工作。在大多例子里使用的是Mozilla 1.0或更高版本。XUL在Firefox和其它基于Mozilla浏览器中是相似的，虽然也存在一些细微的差别，例如工具栏。 该指南将最大限度介绍XUL方方面面，然而还是无法讲述所有的特征。一旦你熟悉XUL，可以使用<a class="external" href="http://www.xulplanet.com/references/elemref/">XUL Element Reference</a>来查找其它标签的属性特征。</p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_教程:XUL的结构">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/introduction_to_rdf/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/introduction_to_rdf/index.html deleted file mode 100644 index 03e0c64a88..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/introduction_to_rdf/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: XUL_教程/RDF介绍 -slug: Mozilla/Tech/XUL/Tutorial/Introduction_to_RDF -translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Tree_Box_Objects" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Templates">下一页 »</a></p> -</div><p></p> -<p> </p> -<p> 本章我们关注与RDF (资源描述框架).</p> -<h3 id="Resource_Description_Framework" name="Resource_Description_Framework">资源描述框架</h3> -<p> 我们可以使用 <a href="/en/XUL_Tutorial/Trees" title="en/XUL_Tutorial/Trees">tree</a> 元素呈现数据集，就像书签和邮件管理器一样。然而这样却使向 <a href="/en/XUL" title="en/XUL">XUL</a> 文件中直接添加数据变得很不方便。直接在XUL文件中修改书签变得十分困难。这就需要RDF 数据结构。</p> -<p><a href="/en/RDF" title="en/RDF"> RDF</a> （资源描述框架）是一种用于储存像书签或邮件这样的资源的格式。其他形式的数据可以被编码为RDF，也可以有RDF创建其他形式的数据。这是 Mozilla 处理像书签、邮件、历史等的方法。Mozilla 为这些常用的数据提供了数据源，使我们很容易使用他们。</p> -<p> 你可以使用任意的RDF数据源来填充树结构，或者仅把RDF指向一个存有数据的XML文件。这使得显示含有许多行的树变得非常容易。RDF 也可以填充其他的 XUL 元素比如列表及菜单，见下一章。</p> -<p> 这里是关于RDF的一个非常简略的概述，希望看到更为详尽的内容请访问XULPlanet上的 <a class="external" href="http://www.xulplanet.com/tutorials/mozsdk/rdfstart.php">Introduction to the RDF Model</a>。如果你刚刚接触RDF请继续向下阅读。</p> -<p> 更多信息参见 <a class="external" href="http://www.w3.org/RDF/">RDF specification</a>.</p> -<h4 id="RDF.2FXML" name="RDF.2FXML">RDF/XML</h4> -<p> RDF 包含这数据的图表示形式。 RDF/XML 时一种用于表示RDF数据的XML语言。它包含非常简单的元素集，下面的例子显示一个简单的RDF模板。</p> -<pre><?xml version="1.0"?> -<RDF:RDF - xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> - ... -</RDF:RDF> -</pre> -<p> 与XUL头有些相似，<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 元素被 <code>RDF</code> 元素代替。同样为RDF定义了名空间，在RDF元素中将填充一些数据。可以在Mozilla文件夹中找到一些 RDF/XML 文件的例子，他们以rdf作为后缀。</p> -<h4 id="RDF_database" name="RDF_database">RDF 数据库</h4> -<p> 让我们来以有RDF产生的书签列表为例。书签列表包含一系列记录，每项记录都有一系列数据相关联，比如书签标题，URL，访问日期等。</p> -<p> 把书签当作数据库来考虑，这个数据库是一个含有多个域的表格。这个列表需要分级，因为我们需要利用文件夹来分组书签。每一个域都来源与RDF数据库，都由名字相关联。名字用URI描述。</p> -<p> 例如Mozilla书签列表的名字的RUI描述如下：</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <td>Name</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> - <td>Bookmark name</td> - </tr> - <tr> - <td>URL</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> - <td>URL to link to</td> - </tr> - <tr> - <td>Description</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Description</span></td> - <td>Bookmark description</td> - </tr> - <tr> - <td>Last Visited</td> - <td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastVisitDate</span></td> - <td>Date of last visit</td> - </tr> - </tbody> -</table> -<p> 这些是按照名空间加域名构造的。下一章，我们利用它来自动填充数据域。注意访问日期的名空间与其他的不同。</p> -<h4 id="RDF.2FXML_file_example" name="RDF.2FXML_file_example">RDF/XML 文件样例</h4> -<p> 下面是一个RDF/XML文件，有三条记录和三个域。</p> -<pre><RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"> - - <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"> - <RDF:li> - <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"> - <ANIMALS:name>Lion</ANIMALS:name> - <ANIMALS:species>Panthera leo</ANIMALS:species> - <ANIMALS:class>Mammal</ANIMALS:class> - </RDF:Description> - </RDF:li> - <RDF:li> - <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"> - <ANIMALS:name>Tarantula</ANIMALS:name> - <ANIMALS:species>Avicularia avicularia</ANIMALS:species> - <ANIMALS:class>Arachnid</ANIMALS:class> - </RDF:Description> - </RDF:li> - <RDF:li> - <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"> - <ANIMALS:name>Hippopotamus</ANIMALS:name> - <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species> - <ANIMALS:class>Mammal</ANIMALS:class> - </RDF:Description> - </RDF:li> - </RDF:Seq> -</RDF:RDF> -</pre> -<p> 对每一种动物使用一条记录描述。每一个 <code>RDF:Description</code> 标签描述一条记录。每条记录定义了三个域：<code>name</code>， <code>species</code> ，<code>class</code>。虽然没有必要让每一条记录拥有相同的域，但是最好如此。</p> -<p> 三个域都在 <code>ANIMALS</code>名空间下， <code>ANIMALS名空间在</code><code>RDF标签中定义<span style="font-family: Verdana,Tahoma,sans-serif;">。选择这个名字是因为它的意思，但完全可以选择其他名字。这里的名空间定义是有用的，因为如果使用样式表</span></code><code>class</code> 域可能发生冲突。</p> -<p> <code>Seq</code> 和 <code>li</code> 元素在列表中区分每一条记录，与HTML 列表中的定义很相似。 <code>Seq</code> 指明记录是有序的紧挨着的，对于无序内容使用 <code>Bag</code> 标签， <code>Alt 用于指明其中的记录只能选择其一</code>(如映射 URL)。</p> -<p> 在XUL文件中可以通过名空间和域名来引用其中的数据，在上例中，下面的URI描述其中的数据域：</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <td>Name</td> - <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#name</span></td> - </tr> - <tr> - <td>Species</td> - <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#species</span></td> - </tr> - <tr> - <td>Class</td> - <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#class</span></td> - </tr> - </tbody> -</table> -<p> 记下来，看看如何使用RDF来填充XUL数据。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Tree_Box_Objects" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Templates">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/list_controls/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/list_controls/index.html deleted file mode 100644 index 27486e030b..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/list_controls/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: XUL_教程/列表控件 -slug: Mozilla/Tech/XUL/Tutorial/List_Controls -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Numeric_Controls" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Progress_Meters">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E5.88.97.E8.A1.A8.E6.8E.A7.E4.BB.B6" name=".E5.88.97.E8.A1.A8.E6.8E.A7.E4.BB.B6">列表控件</h3> -<p>列表控件用来在列表中显示许多的项目。用户可以从列表中选择一个项。</p> -<p>XUL提供两种类型的元素去创建列表，<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>元素用于创建多行的列表框，和<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>元素用于创建下拉列表框。它们的工作方法类似于在HTML中的 <code>select</code>元素，它们执行的功能相同，但XUL的元素包括更多的特性。</p> -<p>简单列表框使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>元素创建列表框，和使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>元素创建每个项目。例如，这个列表框有四行，每个项目使用一行。</p> -<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">View</a></p> -<div class="float-right"> - <img alt="图像:lists1.png" class="internal" src="/@api/deki/files/2628/=Lists1.png"></div> -<pre><listbox> - <listitem label="Butter Pecan"/> - <listitem label="Chocolate Chip"/> - <listitem label="Raspberry Ripple"/> - <listitem label="Squash Swirl"/> -</listbox> -</pre> -<p>如HTML中的<code>option</code>元素，你可以使用<code><code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code>为每个项指定一个值。你也可以在脚本中使用这个值。列表框会默认设置一个合适的尺寸，但你可以通过<code><code id="a-rows"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code>属性来控制尺寸。通过设置它来确定在列表框中显示的行数。如果列表包括的项超出这个值，在显示时将会出现滚动条。</p> -<p>下面这个例子演示这些不同的特性：</p> -<p><span id="%E4%BE%8B2"><a id="%E4%BE%8B2"></a><strong>例2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">View</a></p> -<pre><listbox rows="3"> - <listitem label="Butter Pecan" value="bpecan"/> - <listitem label="Chocolate Chip" value="chocchip"/> - <listitem label="Raspberry Ripple" value="raspripple"/> - <listitem label="Squash Swirl" value="squash"/> -</listbox> -</pre> -<p>这个例子已改成一次只显示3行。已经为列表中的每个项目添加了值。列表框还有其他的一些特性，将在后面进行描述。</p> -<h3 id=".E5.A4.9A.E5.88.97.E5.88.97.E8.A1.A8.E6.A1.86" name=".E5.A4.9A.E5.88.97.E5.88.97.E8.A1.A8.E6.A1.86">多列列表框</h3> -<p>列表框也支持多列。每个单元格可以有独有的内容，即使只使用文本。当用户选择列表中的一个项目时，当前的行将被选中。你不能只选中其中的一个单元格。</p> -<p>在列表框中有两个标签可以使用。<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code></code>元素用来对列信息进行控制，每个列指定一个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code>元素。在列表框中你将需要为每个列指定一个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code>元素。</p> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>元素用于一行中的每个单元格。 如果你需要3列，你就需要增加3个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>元素到每个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>里面。要给单元格指定文本内容，替换<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>元素里面的<code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性。</p> -<p>一个简单的例子，如果只有一个列，你也需要将 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性直接地填充在<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>元素里面的<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>元素中, 看起来像前面的例子里一样。</p> -<p>下面是一个有2列和3行的列表框的例子：</p> -<p><span id="%E4%BE%8B3"><a id="%E4%BE%8B3"></a><strong>例3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul">View</a></p> -<pre><listbox> - <listcols> - <listcol/> - <listcol/> - </listcols> - <listitem> - <listcell label="George"/> - <listcell label="House Painter"/> - </listitem> - <listitem> - <listcell label="Mary Ellen"/> - <listcell label="Candle Maker"/> - </listitem> - <listitem> - <listcell label="Roger"/> - <listcell label="Swashbuckler"/> - </listitem> -</listbox> -</pre> -<h3 id=".E8.A1.A8.E5.A4.B4.E8.A1.8C" name=".E8.A1.A8.E5.A4.B4.E8.A1.8C">表头行</h3> -<p>列表框一直允许使用一个特殊的表头行。 这和正常的行显示有很大不同。你可以使用它来创建列头。有两个新的元素可以使用。</p> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code></code>元素用于表头行，就像<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>元素用于普通行。表头行不是普通行，因此使用脚本去获取列表的首行时获得的将是表头行的下一行。</p> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code></code>元素用于表头行里的单元格。使用 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性设置表头行单元格的标签。</p> -<p>这是一个带表头行的简单例子:</p> -<p><span id="%E4%BE%8B4"><a id="%E4%BE%8B4"></a><strong>例4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul">View</a></p> -<div class="float-right"> - <img alt="Image:morelists1.png" class="internal" src="/@api/deki/files/2629/=Morelists1.png"></div> -<pre><listbox> - - <listhead> - <listheader label="Name"/> - <listheader label="Occupation"/> - </listhead> - - <listcols> - <listcol/> - <listcol flex="1"/> - </listcols> - - <listitem> - <listcell label="George"/> - <listcell label="House Painter"/> - </listitem> - <listitem> - <listcell label="Mary Ellen"/> - <listcell label="Candle Maker"/> - </listitem> - <listitem> - <listcell label="Roger"/> - <listcell label="Swashbuckler"/> - </listitem> - -</listbox> -</pre> -<p>在这个例子中，<code><code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>属性用于制作灵活的列。这个属性将在最后一节中说明，这里它允许列进行水平扩展。你可以调整窗口的大小去查看列根据窗口而进行伸缩的效果。如果你水平缩小，表格中的标签会自动截成带省略号(...)的样子。你可以在表格或项中使用<code><code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></code>属性的值为<code>none</code>去禁止标签被截。</p> -<h3 id=".E4.B8.8B.E6.8B.89.E5.88.97.E8.A1.A8" name=".E4.B8.8B.E6.8B.89.E5.88.97.E8.A1.A8">下拉列表</h3> -<p>在HTML里可以使用<code>select</code>元素创建下拉列表。用户可以在文本框内看到一个单选并且点击箭头或其他类似按钮文本制做成不同的选项。其他的选择将会显示在一个弹出的窗口中。 XUL有一个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>元素可以实现这种效果。它是使用在一个文本框的旁边加一个按钮。选中这个名字是因为当它被选中时会弹出一个菜单。</p> -<p>描述一个下拉列表需要三个元素。第一个是<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 元素， 在按钮的旁边创建一个文本输入框。第二，<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>，当按钮被点击时创建并显示弹出窗口。第三，<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>，创建单独的选择。</p> -<p>下面的范例很好地描述了它的语法：</p> -<p><span id="Example_5"><a id="Example_5"></a><strong>Example 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">View</a></p> -<div class="float-right"> - <img alt="Image:inputs2.png" class="internal" src="/@api/deki/files/2627/=Inputs2.png"></div> -<pre><menulist label="Bus"> - <menupopup> - <menuitem label="Car"/> - <menuitem label="Taxi"/> - <menuitem label="Bus" selected="true"/> - <menuitem label="Train"/> - </menupopup> -</menulist> -</pre> -<p>这个菜单列表包括了四个项，全部都使用一个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 元素。要显示菜单里的项，点击菜单列表中的箭头按钮。当一个被选中，它会在菜单列表中显示为选中。<code><code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code>属性用于设置哪个被默认选中。</p> -<h4 id=".E5.8F.AF.E7.BC.96.E8.BE.91.E7.9A.84.E8.8F.9C.E5.8D.95.E5.88.97.E8.A1.A8" name=".E5.8F.AF.E7.BC.96.E8.BE.91.E7.9A.84.E8.8F.9C.E5.8D.95.E5.88.97.E8.A1.A8">可编辑的菜单列表</h4> -<p>默认情况，你只可以从列表中进行选择。你不能在它上面输入你自己的文本。一个特别的菜单列表允许编辑文件框中的文本。例如，浏览器的地址输入框有一个下拉列表去选择以前输入过的地址，但你也可以输入你自己的地址。</p> -<p>创建一个可编辑的菜单列表，像下面这样添加<code><code id="a-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/editable">editable</a></code></code> 属性:</p> -<p><span id="%E4%BE%8B6"><a id="%E4%BE%8B6"></a><strong>例6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">View</a></p> -<pre><menulist editable="true"> - <menupopup> - <menuitem label="www.mozilla.org"/> - <menuitem label="www.xulplanet.com"/> - <menuitem label="www.dmoz.org"/> - </menupopup> -</menulist> -</pre> -<p>这里创建的地址输入框由三个预设的选择，用户可以从中选择或者他们可以在文本框内输入一个他们自己的地址。用户输入的文本不会添加到新的选择中。因为<code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性没有用在这个例子中，默认是空的。</p> -<p>在下一节我们将会学习<a href="/cn/XUL_教程/Progress_Meters" title="cn/XUL_教程/Progress_Meters">creating progress meters</a>。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Numeric_Controls" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Progress_Meters">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/localization/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/localization/index.html deleted file mode 100644 index ffa7dd99de..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/localization/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: 本地化 -slug: Mozilla/Tech/XUL/Tutorial/Localization -translation_of: Archive/Mozilla/XUL/Tutorial/Localization ---- -<p> </p> -<div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Creating_a_Skin" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Property_Files" rel="internal">Next</a> »</span></p> -</div> -<p> </p> -<p> </p> -<p>XUL 和 XML 提供的实体（entities）是一个本地化的好方法。</p> -<div id="section_1"> - <h3 class="editable" id="实体"><span>实体</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Localization#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 不少软件都希望将界面上的语言尽可能简单的翻译为另外的语言。通常他们会为每一种语言创建一份字符串列表，来代替在代码中进行硬编码。代码中的每一段文本都代表字符串列表中的一项， <a href="../../../../en/XML" rel="internal">XML</a> 提供的实体正好实现这一目的。</p> - <p> 如果你写过 <a href="../../../../en/HTML" rel="internal">HTML</a> 代码，你应该对实体很熟悉 ， 像这样的代码 <code>&lt;</code> 和 <code>&gt;</code> 是作为“小于”和“大于”在文本中的替代出现的。XML 的语法允许你定义用户实体。你可以使用这些实体代替它实际的值，当然这个值可以是一段文本。实体可以用在任何文本应该出现的地方，包括属性。下面的例子在一个按钮中使用了实体。</p> - <pre><button label="&findLabel;"/> -</pre> - <p> 出现在按钮上的文本将是 <code>&findLabel;</code> 所代表的值。对每一种所要支持的语言需要创建一个文件包含对实体的定义。在英语中，<code>&findLabel;</code> 实体可能代表文本 "Find"。</p> -</div> -<div id="section_2"> - <h3 class="editable" id="DTD_文件"><span>DTD 文件 </span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Localization#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 实体在 <em>Document Type Definition</em> (DTD) 文件中定义。这类文件往往用于特定 XML 文件的语法和语义的定义，当然也可以用来定义实体。在 Mozilla 的 chrome 体系中，你会在<code> locales</code> 子目录中找到 DTD 文件。对应一个XUL 文件，一般会有一个 DTD 文件 (extension <code>.dtd</code>)。</p> - <p> 如果你查看 chrome 目录，你会看到一个针对你所用语言的压缩包 (<code>en-US.jar</code> 默认是英语的语言包) 。你也可能会找到多种语言的语言包：美式英语 (en-US) 、法语 (fr)等。在这些压缩包中，你会发现它保存着每个窗口的本地化文本。这种压缩包的结构与 <a href="../../../../en/XUL_Tutorial/Creating_a_Skin" rel="internal">skins</a> 是很相似的。</p> - <p> 你可以把你定义实体的 DTD 文件放置到语言包里，一般的，你应该为每一个 XUL 文件建立一个 DTD 文件，通常使用相同的文件名但以 <code>.dtd</code> 作为后缀。因此对应我们的 findfile 对话框，我们需要一个 <code>findfile.dtd</code> 文件。</p> - <p> 对于非安装的 chrome 文件，你可以简单的把 DTD 文件放在与 XUL 相同的目录中。</p> - <div class="note"> - <strong>注意：</strong> 你需要将含有非 ASCII 字符的 DTD 文件的字符编码设为 UTF-8。也就是说你应该按照 UTF-8 格式 (<a class="external" href="http://www.mozdev.org/notes/l10n/unicode/editors-en.html" rel="external nofollow" title="http://www.mozdev.org/notes/l10n/unicode/editors-en.html">without BOM</a>)保存。参见 <a class="external" href="http://www.mozilla.org/projects/l10n/mlp_chrome.html#text" rel="external nofollow" title="http://www.mozilla.org/projects/l10n/mlp_chrome.html#text">Mozilla Language Packs</a>.</div> - <p> 一旦为你的 XUL 文件创立 DTD 文件，你应该在 XUL 文件上添加一行以声明使用 DTD 文件。否则会发生找不到实体的错误，在 XUL 文件的头部加如下一行。</p> - <pre><!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd"> -</pre> - <p> 这一行表示这个 URL 被当作一个 DTD 使用。在这个例子中，我们引入了我们需要的 <code>findfile.dtd</code> 文件，这一行通常放在 <code><span class="lang lang-en"><a href="../../../../en/XUL/window" rel="internal">window</a> <span style="font-family: Verdana,Tahoma,sans-serif;">元素之前。</span></span></code></p> - <p> 你同样需要在 <a href="../../../../en/Chrome_Registration#locale" rel="internal">chrome.manifest</a> 文件中添加本地化信息，如下：</p> - <pre class="eval">locale findfile en-US locale/ -</pre> -</div> -<div id="section_3"> - <h3 class="editable" id="申明实体"><span>申明实体 </span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Localization#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 实体的申明使用如下语法：</p> - <pre><!ENTITY findLabel "Find"> -</pre> - <p> 上例创建了一个名为 <code>findLabel</code> 值为 "Find" 的实体，这意味着在文本中的任意位置出现的 "&findLabel;" 都将会被 "Find" 替代。注意实体申明无需反斜杠结束。在不同语言的 DTD 文件中，文件使用的不同的语言替代即可。</p> - <pre class="eval"><strong>日文:</strong> -<!ENTITY findLabel "検索"> -</pre> - <p> 例如，下面的文字：</p> - <pre><description value="&findLabel;"/> -</pre> - <p>被翻译为:</p> - <pre class="eval"><strong>英文版:</strong> -<description value="Find"/> - -<strong>日文版:</strong> -<description value="検索"/> -</pre> - <p> 你应该为你在界面中出现的每一个标签或字符串申明一个实体，在XUL文件中不应出现任何的显示文本。</p> - <p> 补充来说你可以在任何因语言不同而不同的的地方使用实体。以 <a href="../../../../en/XUL_Tutorial/Keyboard_Shortcuts" rel="internal">Access keys 及 keyboard shortcuts </a>为例。</p> - <pre class="eval"> <strong>XUL</strong> - <menuitem label="&undo.label;" accesskey="&undo.key;"/> - <strong>DTD</strong> - <!ENTITY undo.label "Undo"> - <!ENTITY undo.key "u"> -</pre> - <p> 上面的例子使用了两个实体，一个由于 Undo 菜单项的标签，第二个用于快捷键。</p> - <div class="highlight"> - <div id="section_4"> - <h3 class="editable" id="改写_Find_Files_的例子"><span>改写 Find Files 的例子</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/Localization#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 让我们看一看如何使用DTD文件修改我们的find files 对话框并将所有文本放在一起。整个文件列在下面。</p> - <pre class="eval"><?xml version="1.0"?> - -<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/global.css</a>" type="text/css"?> -<?xml-stylesheet href="findfile.css" type="text/css"?> - -<span class="highlightred"><!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://findfile/locale/findfile.dtd</a>"></span> - -<window - id="findfile-window" - title="<span class="highlightred">&findWindow.title;</span>" - persist="screenX screenY width height" - orient="horizontal" - onload="initSearchList()" - xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"> - -<script src="findfile.js"/> - -<popupset> - <menupopup id="editpopup"> - <menuitem label="<span class="highlightred">&cutCmd.label;</span>" accesskey="<span class="highlightred">&cutCmd.accesskey;</span>"/> - <menuitem label="<span class="highlightred">&copyCmd.label;</span>" accesskey="<span class="highlightred">&copyCmd.accesskey;</span>"/> - <menuitem label="<span class="highlightred">&pasteCmd.label;</span>" accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" disabled="true"/> - </menupopup> -</popupset> - -<keyset> - <key id="cut_cmd" modifiers="accel" key="<span class="highlightred">&cutCmd.commandkey;</span>"/> - <key id="copy_cmd" modifiers="accel" key="<span class="highlightred">&copyCmd.commandkey;</span>"/> - <key id="paste_cmd" modifiers="accel" key="<span class="highlightred">&pasteCmd.commandkey;</span>"/> - <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> -</keyset> - -<vbox flex="1"> - - <toolbox> - - <menubar id="findfiles-menubar"> - <menu id="file-menu" label="<span class="highlightred">&fileMenu.label;</span>" - accesskey="<span class="highlightred">&fileMenu.accesskey;</span>"> - <menupopup id="file-popup"> - <menuitem label="<span class="highlightred">&openCmd.label;</span>" - accesskey="<span class="highlightred">&openCmd.accesskey;</span>"/> - <menuitem label="<span class="highlightred">&saveCmd.label;</span>" - accesskey="<span class="highlightred">&saveCmd.accesskey;</span>"/> - <menuseparator/> - <menuitem label="<span class="highlightred">&closeCmd.label;</span>" - accesskey="<span class="highlightred">&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();</span>"/> - </menupopup> - </menu> - <menu id="edit-menu" label="<span class="highlightred">&editMenu.label;</span>" - accesskey="<span class="highlightred">&editMenu.accesskey;</span>"> - <menupopup id="edit-popup"> - <menuitem label="<span class="highlightred">&cutCmd.label;</span>" - accesskey="<span class="highlightred">&cutCmd.accesskey;</span>" key="cut_cmd"/> - <menuitem label="<span class="highlightred">&copyCmd.label;</span>" - accesskey="<span class="highlightred">&copyCmd.accesskey;</span>" key="copy_cmd"/> - <menuitem label="<span class="highlightred">&pasteCmd.label;</span>" - accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" key="paste_cmd" disabled="true"/> - </menupopup> - </menu> - </menubar> - - <toolbar id="findfiles-toolbar"> - <toolbarbutton id="opensearch" label="<span class="highlightred">&openCmdToolbar.label;</span>"/> - <toolbarbutton id="savesearch" label="<span class="highlightred">&saveCmdToolbar.label;</span>"/> - </toolbar> - </toolbox> - - <tabbox> - <tabs> - <tab label="<span class="highlightred">&searchTab;</span>" selected="true"/> - <tab label="<span class="highlightred">&optionsTab;</span>"/> - </tabs> - - <tabpanels> - - <tabpanel id="searchpanel" orient="vertical" context="editpopup"> - - <description> - <span class="highlightred">&findDescription;</span> - </description> - - <spacer class="titlespace"/> - - <groupbox orient="horizontal"> - <caption label="<span class="highlightred">&findCriteria;</span>"/> - - <menulist id="searchtype"> - <menupopup> - <menuitem label="<span class="highlightred">&type.name;</span>"/> - <menuitem label="<span class="highlightred">&type.size;</span>"/> - <menuitem label="<span class="highlightred">&type.date;</span>"/> - </menupopup> - </menulist> - <spacer class="springspace"/> - <menulist id="searchmode"> - <menupopup> - <menuitem label="<span class="highlightred">&mode.is;</span>"/> - <menuitem label="<span class="highlightred">&mode.isnot;</span>"/> - </menupopup> - </menulist> - <spacer class="springspace"/> - - <menulist id="find-text" flex="1" - editable="true" - datasources="<a class="external" rel="freelink">file:///mozilla/recents.rdf</a>" - ref="<a class="external" href="http://www.xulplanet.com/rdf/recent/all" rel="freelink">http://www.xulplanet.com/rdf/recent/all</a>"> - <template> - <menupopup> - <menuitem label="rdf:<a class="external" href="http://www.xulplanet.com/rdf/recent#Label" rel="freelink">http://www.xulplanet.com/rdf/recent#Label</a>" uri="rdf:*"/> - </menupopup> - </template> - </menulist> - - </groupbox> - - </tabpanel> - - <tabpanel id="optionspanel" orient="vertical"> - <checkbox id="casecheck" label="<span class="highlightred">&casesensitive;</span>"/> - <checkbox id="wordscheck" label="<span class="highlightred">&matchfilename;</span>"/> - </tabpanel> - - </tabpanels> - </tabbox> - - <tree id="results" style="display: none;" flex="1"> - <treecols> - <treecol id="name" label="<span class="highlightred">&results.filename;</span>" flex="1"/> - <treecol id="location" label="<span class="highlightred">&results.location;</span>" flex="2"/> - <treecol id="size" label="<span class="highlightred">&results.size;</span>" flex="1"/> - </treecols> - - <treechildren> - <treeitem> - <treerow> - <treecell label="mozilla"/> - <treecell label="/usr/local"/> - <treecell label="<span class="highlightred">&bytes.before;</span>2520<span class="highlightred">&bytes.after;</span>"/> - </treerow> - </treeitem> - </treechildren> - </tree> - - <splitter id="splitbar" resizeafter="grow" style="display: none;"/> - - <spacer class="titlespace"/> - - <hbox> - <progressmeter id="progmeter" value="50%" style="display: none;"/> - <spacer flex="1"/> - <button id="find-button" label="<span class="highlightred">&button.find;</span>" - oncommand="doFind()"/> - <button id="cancel-button" label="<span class="highlightred">&button.cancel;</span>" - oncommand="window.close();"/> - </hbox> -</vbox> - -</window> -</pre> - <p> 每一个字符串均被实体引用代替。一个 DTD 文件被包含在XUL文件的开头。每一个被引用的实体必须在DTD文件中申明，如果发现引用的实体没有申明，则窗口不会显示。</p> - <p> 注意实体的名字并不重要，在上面的例子里实体的名字被分成几段来写，请你不要这样，请按照其他代码的书写习惯来写实体引用。</p> - <p> 你可能已经注意到里字符串 '2520 bytes' 被两个实体代替。这是因为在别的语言中可能会有不同的语法要求。比如，可能要求数字写在后面而把 'bytes' 写在前面。当然对于 KB 、MB 会有更复杂的顺序要求。</p> - <p> <font>键盘访问键</font>及快捷键也被翻译为实体因为对不同的语言这些也会不同。</p> - <p> 下面是 DTD 文件 - findfile.dtd：</p> - <pre><!ENTITY findWindow.title "Find Files"> -<!ENTITY fileMenu.label "File"> -<!ENTITY editMenu.label "Edit"> -<!ENTITY fileMenu.accesskey "f"> -<!ENTITY editMenu.accesskey "e"> -<!ENTITY openCmd.label "Open Search..."> -<!ENTITY saveCmd.label "Save Search..."> -<!ENTITY closeCmd.label "Close"> -<!ENTITY openCmd.accesskey "o"> -<!ENTITY saveCmd.accesskey "s"> -<!ENTITY closeCmd.accesskey "c"> -<!ENTITY cutCmd.label "Cut"> -<!ENTITY copyCmd.label "Copy"> -<!ENTITY pasteCmd.label "Paste"> -<!ENTITY cutCmd.accesskey "t"> -<!ENTITY copyCmd.accesskey "c"> -<!ENTITY pasteCmd.accesskey "p"> -<!ENTITY cutCmd.commandkey "X"> -<!ENTITY copyCmd.commandkey "C"> -<!ENTITY pasteCmd.commandkey "V"> -<!ENTITY openCmdToolbar.label "Open"> -<!ENTITY saveCmdToolbar.label "Save"> -<!ENTITY searchTab "Search"> -<!ENTITY optionsTab "Options"> -<!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search."> -<!ENTITY findCriteria "Search Criteria"> -<!ENTITY type.name "Name"> -<!ENTITY type.size "Size"> -<!ENTITY type.date "Date Modified"> -<!ENTITY mode.is "Is"> -<!ENTITY mode.isnot "Is Not"> -<!ENTITY casesensitive "Case Sensitive Search"> -<!ENTITY matchfilename "Match Entire Filename"> -<!ENTITY results.filename "Filename"> -<!ENTITY results.location "Location"> -<!ENTITY results.size "Size"> -<!ENTITY bytes.before ""> -<!ENTITY bytes.after "bytes"> -<!ENTITY button.find "Find"> -<!ENTITY button.cancel "Cancel"> -</pre> - <p> 现在，为一个新语言添加文本仅需创建一个新的DTD文件。使用 chrome 系统把 DTD 文件加到另一个 <code> locales</code> 中，这样同一个 XUL 文件就可以使用不同的语言。</p> - <p>Find files example so far: <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-locale.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples//findfile/findfile-locale.xul.txt">Source</a> </span></p> - </div> - </div> - <p> </p> - <p> 下一章，看看 <a href="../../../../en/XUL_Tutorial/Property_Files" rel="internal">property files</a>.</p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Creating_a_Skin" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Property_Files" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> -</div> -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/manifest_files/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/manifest_files/index.html deleted file mode 100644 index 10dcc5a2dd..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/manifest_files/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Manifest Files -slug: Mozilla/Tech/XUL/Tutorial/Manifest_Files -translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files ---- -<h3 id="Contents.rdf_.E6.96.87.E4.BB.B6" name="Contents.rdf_.E6.96.87.E4.BB.B6">Contents.rdf 文件</h3> -<p>这部分内容，我们将了解如何将chrome和XUL文件打成包，以及为它们创建manifest文件。</p> -<p><big><b>包</b></big></p> -<p>一个包，就是一组XUL文件和定义了用户界面功能的脚本的集合，它可以直接存成一个目录，也可以打成JAR文件。包可以被安装到Mozilla里，并且可以被chrome URL 引用。一个包里面包含了多种类型的文件，这些文件也可以划分到包内的不同的子目录里。</p> -<p><big><b>Manifest 文件</b></big></p> -<p>manifest文件描述了包在硬盘上的物理存放位置与chrome URL的映射关系。当一个Mozilla应用启动时，它将检查chrome文件夹中的manifest文件，从而知道已经安装了哪些包。也就是说，当安装了一个新包时，你需要在应用程序的chrome目录下或者用户自己的chrome目录中加入一个新的manifest文件。一般情况下，当应用程序没有足够的权限向其目录中写入manifest文件时，才会将manifest文件放到用户自己的chrome目录中。</p> -<p>如果你想在Firefox浏览器中测试一下XUL代码的效果，只要在manifest文件中加入一行，就可以轻松实现了：</p> -<ol> - <li>创建一个目录. 例如, 在系统盘下创建一个目录, 就可以用 C:\testfiles</li> - <li>在chrome目录下创建一个新的名为 test.manifest 的文件（实际上，文件叫什么名字并不重要，只要扩展名是.manifest就可以了），则用下面一句:</li> -</ol> -<p><code>content tests <a class="external" rel="freelink">file:///C:/testfiles/</a></code></p> -<blockquote> - 这里的文件路径是指向上面创建的目录的。如果你不知道应该怎么写这个文件路径，可以在浏览器中打开那个目录，然后将地址栏里面的URL拷贝下来，就可以了。</blockquote> -<p>好了，现在，你只需要向上面新建的那个目录中加入一些XUL文件，然后，按照chrome://tests/content/<filename> 的格式键入chrome URL,就可以看到你的成果了。当然，为了你的修改能够起作用，需要重启浏览器。如果你创建的文件没有被加载，确认一下你键入的文件路径是否是正确的。</p> -<p>manifest 文件中每一行的基本语法是：</p> -<p><code>content <packagename> <filepath></code></p> -<p>第一个字段指明了包类型。主题包是'skin'，语言地区包是'locale'。上面例子中，包名为'tests'，也就意味着chrome URL中第一个部分是'tests'，例如：<a class="external" rel="freelink">chrome://tests/content/sample.xul</a>。如果包名为'browser'，那么chrome <a class="external" href="URL就变成chrome://browser/content/" rel="freelink">URL就变成chrome://browser/content/</a>。基本语法中最后一个字段为文件所在的路径。这既可以是用file URL(译者注：如file:///c:/dir/a)表示的本地文件路径，又可以是下面我们马上要说到的jar URL表示的JAR包。在manifest文件中添加多行，可以指定多个包。</p> -<p>Firefox用到的browser.manifest文件看起来是这样的：</p> -<pre><code>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes -content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes -overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul -overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul -overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul -</code></pre> -<p>这里有两个包，'branding'和'browser'。此外还有三个overlay，它们使得来自不同包的内容可以组合在一起。扩展(Extension)中会大量使用overlay，因为overlay的功能是将包的用户界面与浏览器的用户界面融合在一起。</p> -<p>由于内容被打包成jar，branding和browser包中文件的路径使用了jar URL。一个jar包可以通过ZIP工具来生成。在chrome目录中的JAR文件，语法相当简单：</p> -<p><code>jar:<filename.jar>!/<path_in_archive></code></p> -<p>browser包对应的JAR包是browser.jar，与manifest文件放在同一个chrome目录中。'content/browser'指明了在JAR压缩包中XUL的路径。若压缩包里面不含任何目录，则无需指明任何路径。在我们的例子中，压缩包里面有目录，所以这里需要指明。</p> -<p>对于上面我们建立的'tests'包，文件没有压缩到一个jar包里，所以我们用直接的文件路径来代替jar路径。这样做有利于开发——我们就不用每次在改动文件后重新打包。不过，在发布一个扩展或者应用是，为了避免安装一堆的小文件，通产都会采用打包的方式。</p> -<p>在manifest文件的最后，<b>xpcnativewrappers=yes</b>是一个可选的标志。JavaScript可以将网页中内置的函数替换成自己的代码。如果有xpcnativewrappers标志，这就表明在特权环境(privileged context)下的脚本不运行覆盖的版本而是运行原始自带的版本。否则，如果一个扩展试图调用一个修改版的脚本，就有可能无法正常工作甚至更糟——产生安全漏洞。添加这个标志就是为了避免类似的问题，在新的扩展中应当坚持使用，而对于那些无法兼容改变的老扩展可以不用这个标志。</p> -<h3 id=".E4.B8.BB.E9.A2.98.EF.BC.88Themes.EF.BC.89.E5.92.8C.E6.9C.AC.E5.9C.B0.E5.8C.96.EF.BC.88Locales.EF.BC.89" name=".E4.B8.BB.E9.A2.98.EF.BC.88Themes.EF.BC.89.E5.92.8C.E6.9C.AC.E5.9C.B0.E5.8C.96.EF.BC.88Locales.EF.BC.89">主题（Themes）和本地化（Locales）</h3> -<p>主题（Themes）和本地化（Locales)的打包语法,与内容（content）打包的语法上是相似的。如果你要提供一个主题（Themes）和本地化（Locales）时，你需要了解更多细节。例如:</p> -<p><code>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/</code><br> - <code>locale browser en-US jar:en-US.jar!/locale/browser/</code></p> -<p>如上面例子, 浏览器用来表示皮肤和本地化的特殊的项被加入。皮肤的名称是 'classic/1.0'。这里, 版本号被作为主体的一部分来使用, 但如果你制作自己的主题它是可选的。 Mozilla浏览器并不是用特殊方式来处理版本号;版本号仅仅作为主体名称的一部分。本地化语言是 'en-US'。映射的chrome <a class="external" href="URL应该是chrome://browser/skin和chrome://browser/locale" rel="freelink">URL应该是chrome://browser/skin和chrome://browser/locale</a>。如果你正在创作你自己的主题或者本地化浏览器,你说要做的全部是建立一个包含着两行内容的manifest文件，再修改内容来适应你的主题（Themes）和本地化（Locales）。</p> -<p>如果必要，也能够合并全部的三种类型内容放到一个单独文件里面。这种情况通常发生在当创建一个扩展（extension/Add on）时，你也许会把所有部分放到一个文件里面。例如，我们想做一个查找文件对话框时可以这样做。在chrome目录建立一个名称为findfiles.manifest的文件。把下面的内容加到文件里面：</p> -<pre><code>content findfiles file:///findfiles/content/ -skin findfiles classic/1.0 file:///findfiles/skin/ -locale findfiles en-US file:///findfiles/locale/ -</code></pre> -<p>通常， 你希望目录路径内够适应你的系统（不同的文件系统，目录的结构不同）。 这种情况下, 我们仅仅建立测试路径。如果我们在发布这个包，我们应该把全部内容打包成一个JAR文件，并且修改路径。这里只是一个例子，今后可以参照这个例子来做。注意，例子里的skinhe和 locale行的第二项被指定为'findfiles'。这意味着，skin和locale可以访问和修改在第一行定义的findfiles包。</p> -<p>上述的三个路径每部分有自己的子路径，意味着你可以给每一部分建立和指定的特殊子路径。</p> -<h3 id=".E5.AE.89.E8.A3.85.E5.8C.85" name=".E5.AE.89.E8.A3.85.E5.8C.85">安装包</h3> -<p>为了安装一个应用，你将需要建立一个安装器，或者把它作为另一个应用的一部分。方式依赖于你所创建的是那种应用，一般来说不同的应用类型安装包是不同的。例如<a href="cn/%e6%89%a9%e5%b1%95">扩展</a>，你需要建立一个名为install.rdf的安装描述文件，它描述了哪些东西被安装，以及扩展的作者和兼容性（那一个版本的浏览器，与那些程序兼容等等）。 还需要一个<a href="cn/Bundles">专用的目录结构</a>，安装文件也许被安装到里面，并被限制在这个目录。一个扩展通常打包成一个 <a href="cn/XPI">XPI</a> 文件。 <a href="cn/XPI">XPI</a> 是XPInstall的缩写，被以Mozilla为基础的浏览器用来安装组件。类似于JAR文件，一个 XPI文件仅仅是一个带有不同的扩展的ZIP文件，所以你可以用ZIP格式兼容的工具来创建和察看 <a href="cn/XPI">XPI</a> 文件。</p> -<p>Firefox的扩展管理器能够自动的安装 <a href="cn/XPI">XPI</a> 文件内部的扩展包。他建议上传你的扩展到[<a class="external" href="https://addons.mozilla.org/|Mozilla">Add-ons site</a>]，用户通常在这个地址寻找扩展包来安装特殊的应用。当然他们也可以从任何网址安装，不过不是Firefox默认的网址。</p> -<p>也可以用JavaScript写一个安装脚本来安装文件。这样你可以把文件复制到任何位置并执行文件管理任务。但是，用脚本安装的应用不能够被扩展管理器列出，意味着不能像其他应用那样自动地卸载。所以通常不使用脚本安装文件。</p> -<p>标准的应用，可以使用<a href="cn/XULRunner">XULRunner</a>来打包。由于与执行文件分离，可以被发布成与浏览器版本无依赖的应用。</p> -<p>创建<a href="cn/%e6%89%a9%e5%b1%95">扩展</a>的更多信息请参照<a href="cn/%e6%9e%84%e5%bb%ba%e4%b8%80%e4%b8%aa%e6%89%a9%e5%b1%95">构建一个扩展</a>。 <a href="cn/XULRunner">XULRunner</a>的更多信息请参照http://developer.mozilla.org/en/docs/XULRunner</p> -<h3 id=".E6.97.A7.E7.89.88.E6.9C.AC.E5.BA.94.E7.94.A8.E7.A8.8B.E5.BA.8F" name=".E6.97.A7.E7.89.88.E6.9C.AC.E5.BA.94.E7.94.A8.E7.A8.8B.E5.BA.8F">旧版本应用程序</h3> -<p>如果你为旧版本的Mozilla软件创建应用程序，比如Firefox 1.5或者Mozilla 1.8，那么这一章就很重要的。以下便是讲解怎样为先前版本建立包。如果你正在写新的扩展或者XUL应用程序的话，完全可以跳过此章。</p> -<p>1. 在你的磁盘上创建一个目录。许多人喜欢在Mozilla的chrome目录下面创建一个子目录，这样是没有必要的。这个目录可以在任何地方建立，随你喜欢。然后将你的XUL文件放置其中。</p> -<p>2. 创建一个名为contents.rdf，并放置在前面你所建立的目录中。将下面的文本框中的内容复制粘贴进新的contents.rdf文件中。这个文件是用来区别应用程序的id，它的名字，作者，版本等等的。</p> -<table class="standard-table"> - <tbody> - <tr> - <td> - <pre class="eval"> - <?xml version="1.0"?> -</pre> - <pre class="eval"> - <RDF:RDF xmlns:RDF="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" - xmlns:chrome="<a class="external" href="http://www.mozilla.org/rdf/chrome#" rel="freelink">http://www.mozilla.org/rdf/chrome#</a>"> -</pre> - <pre class="eval"> - <RDF:Seq about="urn:mozilla:package:root"> - <RDF:li resource="urn:mozilla:package:myapplication"/> - </RDF:Seq> -</pre> - <pre class="eval"> - <RDF:Description about="urn:mozilla:package:myapplication" - chrome:displayName="Application Title" - chrome:author="Author Name" - chrome:name="myapplication" - chrome:extension="true"/> -</pre> - <pre class="eval"> - </RDF:RDF> -</pre> - </td> - </tr> - </tbody> -</table> -<p>3. 将文本中的高亮显示部分改换成你自己的信息。比如红色部分“myapplication”应该是你应用程序的ID。你把它填写上，这个ID和你的应用程序名是相似的。用你的应用程序的题目和作者来替换文本中的蓝色高亮部分。</p> -<p>4. 如果'chrome:extension'字段为真，那么这个应用程序是Mozilla Firefox Extension（即Mozilla Firefox的扩展），而且还会在浏览器相应的附加软件窗口中见到。否则，它将不会显示。</p> -<p>5. 保存contents.rdf文件，同时确认它在你在步骤一中创建的那个文件内。</p> -<p>6. 打开<mozilla-directory>/chrome/installed-chrome.txt 这个文件，<mozilla-directory>就是Mozilla程序所安装的那个目录。记住在此之前先退出Mozilla程序。</p> -<p>7. 接下来，你必须在注册新的应用程序，这样Mozilla程序就可以找到它。在installed-chrome.txt中的最后添加新的一行，来指向你在步骤一中创建的那个目录。</p> -<p> </p> -<pre class="eval"> content,install,url,<a class="external" rel="freelink">file:///main/app/</a> -</pre> -<blockquote> - 用你的目录的URL来替换掉上面高亮的文字。并且必须在最后的保留一个斜杠再加一个回车。如果你不能确定那个URL是什么，那么就用Mozilla浏览器来打开该目录，并复制地址栏中所显示的URL。注意这一项必须是个目录的显示，而不是具体到文件的显示。</blockquote> -<p>8. 删除 <mozilla-directory>/chrome/chrome.rdf 文件.</p> -<p>9. 打开 Mozilla 程序.你将可以看到任何你放到那个目录下的XUL文件，以下面的URL：<b><a class="external" rel="freelink">chrome://</a><font color="red">applicationid</font>/content/file.xul</b>其中file.xul是文件名。主XUL文件应该是：<b>applicationid.xul</b>，你可以用以下的方式打开它<b><a class="external" rel="freelink">chrome://</a><font color="red">applicationid</font>/content/</b>。</p> -<p>如果你要创建skin和locale这两项的话，重复以上步骤，除了contents.rdf的形式略有不同。可以参考contents.rdf为其它应用程序所设置的细节。</p> -<p>创建一个chrome包是一件艰难的事情，诊断问题也很困难。以下是一些小小的提示，如果你遇到困难时也许用得着。</p> -<ul> - <li>打开<mozilla-directory>/chrome/chrome.rdf。你应该能够找到，你的应用程序ID。否则说明注册存在问题。如果有的话，也许你在调用文件时用了错误的chrome URL。</li> - <li>当你试着删除<mozilla-directory>/chrome/chrome.rdf时，它会自动重新建立。甚至是删除整个<mozilla-directory>/chrome/overlayinfo/目录也一样，因为你用了overlays（叠加）。</li> - <li>确定在installed-chrome.txt中的URL最后又一个斜杠，还有这个文件的最后有一个空行。</li> - <li>在Windows操作系统中，文件的URLs是这样的形式：///C|/files/app/，其中C 是盘符。</li> - <li>确认contents.rdf在正确的目录下，并有着正确的格式。在Mozilla程序中打开contents.rdf来看是不是一个完好的XML。否则，你就会看到有带着黄色的背景的错误显示。</li> - <li>如果你应用Mozilla调试构建，有些信息会显示到终端，在最开始会提示哪些chrome应用程序checked（被查出问题？）。请自己清查一些那上面所列出的应用程序。</li> -</ul> -<hr> -<div> - <a href="cn/XUL_%e6%95%99%e7%a8%8b/%e5%85%b3%e4%ba%8eChrome_URL"><< 前页</a> <a href="cn/XUL_%e6%95%99%e7%a8%8b/%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e7%aa%97%e5%8f%a3">后页 >></a></div> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/modifying_a_xul_interface/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/modifying_a_xul_interface/index.html deleted file mode 100644 index 3ee3d691e0..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/modifying_a_xul_interface/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: XUL_教程/修改XUL界面 -slug: Mozilla/Tech/XUL/Tutorial/Modifying_a_XUL_Interface -tags: - - DOM - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_教程：文档对象模型" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Manipulating_Lists">下一页 »</a></p> -</div><p></p> -<p> </p> -<p>DOM 提供了一系列方法来修改文档。</p> -<h3 id=".E5.88.9B.E5.BB.BA.E6.96.B0.E5.85.83.E7.B4.A0__Creating_New_Elements" name=".E5.88.9B.E5.BB.BA.E6.96.B0.E5.85.83.E7.B4.A0__Creating_New_Elements">创建新元素 </h3> -<p> 你可以使用文档对象的 <code><a href="/cn/DOM/document.createElement" title="cn/DOM/document.createElement">createElement()</a></code> 方法创建新元素。它有一个参数，待创建元素的标签名。可以使用元素的 <code><a href="/cn/DOM/element.setAttribute" title="cn/DOM/element.setAttribute">setAttribute()</a></code> 方法设置属性，使用 <code><a href="/cn/DOM/element.appendChild" title="cn/DOM/element.appendChild">appendChild()</a></code> 方法将其加入到XUL文件之中。例如下面的例子将一个按钮加入的XUL窗口中。</p> -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul">View</a></p> -<pre><script> -function addButton(){ - var aBox = document.getElementById("aBox"); - var button = document.createElement("button"); - button.setAttribute("label","A new Button"); - aBox.appendChild(button); -} -</script> - -<box id="aBox" width="200"> - <button label="Add" oncommand="addButton();"/> -</box> -</pre> -<ul> - <li>脚本先用<code><a href="/cn/DOM/document.getElementById" title="cn/DOM/document.getElementById">getElementById()</a></code>获得 一个容纳按钮的box的引用。</li> - <li>用<code><a href="/cn/DOM/document.createElement" title="cn/DOM/document.createElement">createElement()</a></code>方法创建新按钮。</li> - <li>用 <code><a href="/cn/DOM/element.setAttribute" title="cn/DOM/element.setAttribute">setAttribute()</a></code> 方法设置按钮的标签属性。</li> - <li>用<code><a href="/cn/DOM/element.appendChild" title="cn/DOM/element.appendChild">box.appendChild()</a></code> 方法将按钮加入其中。</li> -</ul> -<p> <code><a href="/cn/DOM/document.createElement" title="cn/DOM/document.createElement">createElement()</a></code> 方法将为文档创建一个默认类型的元素。对于XUL 文档，通常会创建一个XUL元素。对于 HTML 文档会创建一个HTML元素，它会包含HTML元素的功能及方法。 <code><a href="/cn/DOM/document.createElementNS" title="cn/DOM/document.createElementNS">createElementNS()</a></code> 方法用于在不同的名空间创建元素。</p> -<p> <code><a href="/cn/DOM/element.appendChild" title="cn/DOM/element.appendChild">appendChild()</a></code> 方法用于像一个元素添加另一个元素。有三个相关的方法： <code><a href="/cn/DOM/element.insertBefore" title="cn/DOM/element.insertBefore">insertBefore()</a></code>，<code><a href="/cn/DOM/element.replaceChild" title="cn/DOM/element.replaceChild">replaceChild()</a></code> ， <code><a href="/cn/DOM/element.removeChild" title="cn/DOM/element.removeChild">removeChild</a></code> 语法如下。</p> -<pre>parent.appendChild(child); -parent.insertBefore(child, referenceChild); -parent.replaceChild(newChild, oldChild); -parent.removeChild(child); -</pre> -<p> 下面是这桑函数的简单说明。</p> -<ul> - <li> <code><a href="/cn/DOM/element.insertBefore" title="cn/DOM/element.insertBefore">insertBefore()</a></code> 方法在存在的元素之前插入一个新的子节点。它可以在一些子元素之间插入元素，而不像 <code><a href="/cn/DOM/element.appendChild" title="cn/DOM/element.appendChild">appendChild()</a></code> 只在最后插入。</li> - <li><code><a href="/cn/DOM/element.replaceChild" title="cn/DOM/element.replaceChild">replaceChild()</a></code> 方法移除一个旧的元素并在相同的位置插入新元素。</li> - <li><code><a href="/cn/DOM/element.removeChild" title="cn/DOM/element.removeChild">removeChild()</a></code> 删除一个节点。</li> -</ul> -<p> 注意，以上所有的方法中的 referenceChild 及 child 必须是一个已经存在的节点否则会出错。</p> -<p> 通常你会希望移除一个现有的节点，并把它放到其他的位置。那么你没有必要先删除它。因为一个节点在同一时间只能在一个位置，插入方法总是先将节点从当前位置删除再插入新位置。这是一个在文档中移动节点的好方法。</p> -<h4 id=".E6.8B.B7.E8.B4.9D.E8.8A.82.E7.82.B9__Copying_Nodes" name=".E6.8B.B7.E8.B4.9D.E8.8A.82.E7.82.B9__Copying_Nodes">拷贝节点</h4> -<p> 可以使用 <code><a href="/cn/DOM/element.cloneNode" title="cn/DOM/element.cloneNode">cloneNode()</a></code> 方法复制节点。这方法复制现有的节点，你可以将新的节点放置到任何位置（原始节点不动），此方法带一个 boolean 型参数确定是否复制此元素的全部子节点。如果‘否’只复制此节点，不包含任何子节点。如果‘是’，将复制全部子节点。此函数会递归调用，如需复制树结构请传递true给函数，如下例。</p> -<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul">View</a></p> -<pre><hbox height="400"> - <button label="Copy" - oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/> - - <vbox> - <button label="First"/> - <button label="Second"/> - </vbox> -</hbox> -</pre> -<p>当 Copy 按钮按下：</p> -<ul> - <li><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>元素</code>的 <code><a href="/cn/DOM/element.nextSibling" title="cn/DOM/element.nextSibling">nextSibling</a></code> 是<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code>元素。</li> - <li>用 <code><a href="/cn/DOM/element.cloneNode" title="cn/DOM/element.cloneNode">cloneNode()</a></code> 方法获得拷贝。</li> - <li>用 <code><a href="/cn/DOM/element.appendChild" title="cn/DOM/element.appendChild">appendChild()</a></code>加入。</li> -</ul> -<p> 注意：有些元素，如<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code> 和 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 提供了一些其他的修改方法，可以使用他们来代替，下一章（ <a href="/cn/XUL_Tutorial/Manipulating_Lists" title="cn/XUL_Tutorial/Manipulating_Lists">next section</a>）会讨论。</p> -<h3 id=".E5.A4.84.E7.90.86.E5.9F.BA.E6.9C.AC.E5.85.83.E7.B4.A0__Manipulating_Basic_Elements" name=".E5.A4.84.E7.90.86.E5.9F.BA.E6.9C.AC.E5.85.83.E7.B4.A0__Manipulating_Basic_Elements">处理基本元素</h3> -<p> 像按钮，复选框，单选按钮这些XUL的注意元素可以通过脚本属性处理。这些属性列在 <a href="/cn/XUL_Reference" title="cn/XUL_Reference">element reference</a> 。一些公共的属性如 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></code>, <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></code>, <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/checked">checked</a></span></code></code> 及<code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></code> 。可以根据需要来设定他们。</p> -<h4 id=".E4.BE.8B.EF.BC.9A.E6.A0.87.E7.AD.BE.E5.92.8C.E5.80.BC.E7.89.B9.E6.80.A7__Label_and_value_properties_examples" name=".E4.BE.8B.EF.BC.9A.E6.A0.87.E7.AD.BE.E5.92.8C.E5.80.BC.E7.89.B9.E6.80.A7__Label_and_value_properties_examples">例：标签和值特性</h4> -<p> 这里有一个改变按钮标签的例子。</p> -<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul">View</a></p> -<pre><button label="Hello" oncommand="this.label = 'Goodbye';"/> -</pre> -<p> 当按钮按下时<code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code>会改变。对于有标签的元素这是通用的。比如文本框。同样的可以修改 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></code> 属性。</p> -<p><span id="Example_4"><a id="Example_4"></a><strong>Example 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul">View</a></p> -<pre><button label="Add" oncommand="this.nextSibling.value += '1';"/> -<textbox/> -</pre> -<p> 当按钮按下时文本框中的内容每次加 '1' 。 <code><a href="/cn/DOM/element.nextSibling" title="cn/DOM/element.nextSibling">nextSibling</a></code> 重当前元素转移到下一个元素（textbox）。 += 用于像当前值加一个值，此处把 1 加到文本的末尾。注意此时你仍可以在文本框中输入，你也可以获取现在的标签和值属性的值，如下例。</p> -<p><span id="Example_5"><a id="Example_5"></a><strong>Example 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul">View</a></p> -<pre><button label="Hello" oncommand="alert(this.label);"/> -</pre> -<h4 id="Toggling_a_checkbox" name="Toggling_a_checkbox">标记checkbox</h4> -<p> Checkboxes 有 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/checked">checked</a></span></code></code> 属性可以是 check 或 uncheck 。很容易知道怎么样。下一个例子，当按钮按下时把<code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/checked">checked</a></span></code>属性取反<span style="font-family: Verdana,Tahoma,sans-serif;">。</span></code> 注意 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></code> 和<code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></code> 属性是字符串，而 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/checked">checked</a></span></code></code> 属性是布尔值。</p> -<p><span id="Example_6"><a id="Example_6"></a><strong>Example 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul">View</a></p> -<pre><button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/> -<checkbox label="Check for messages"/> -</pre> -<p> 单选按钮也可以用属性选中或取消，注意在一个组中一次只能选中一个，这无需手工操作。单选组的 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code>属性用在这里 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> 属性用于获得被选中的单选按钮的序号，同样可改变它。</p> -<h4 id=".E6.BF.80.E6.B4.BB.E6.88.96.E6.97.A0.E6.95.88.E4.B8.80.E4.B8.AA.E5.85.83.E7.B4.A0__Changing_a_element_disabled_or_enabled" name=".E6.BF.80.E6.B4.BB.E6.88.96.E6.97.A0.E6.95.88.E4.B8.80.E4.B8.AA.E5.85.83.E7.B4.A0__Changing_a_element_disabled_or_enabled">激活或无效一个元素</h4> -<p> 在某些情况下一些操作将不被支持，有些内容将会无效。比如，在参数选择对话框中，能选择一系列参数但只有一项允许用户改变。下面的例子创建这样的一个界面。</p> -<p><span id="Example_7"><a id="Example_7"></a><strong>Example 7</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul">View</a></p> -<pre><script> -function updateState(){ - var name = document.getElementById("name"); - var sindex = document.getElementById("group").selectedIndex; - name.disabled = sindex == 0; -} -</script> - -<radiogroup id="group" onselect="updateState();"> - <radio label="Random name" selected="true"/> - <hbox> - <radio label="Specify a name:"/> - <textbox id="name" value="Jim" disabled="true"/> - </hbox> -</radiogroup> -</pre> -<p> 当单选组中的一个选择事件发生时会调用updateState() 方法。这个函数用<code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> 属性返回当前被选中的 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 元素。。注意<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>中的元素也被包含在单选组中。如果第一个按钮 (序0)被选中，通过设置文本框的 <code><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code> 属性，使文本框无效<span style="font-family: Verdana,Tahoma,sans-serif;">，第二个按钮被选中时，文本框又被激活了。</span></code></p> -<p>下一章将提供关于单选框和列表的更多信息。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Document_Object_Model" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Manipulating_Lists">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/modifying_the_default_skin/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/modifying_the_default_skin/index.html deleted file mode 100644 index 5bf9abae27..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/modifying_the_default_skin/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 修改默认的皮肤 -slug: Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin -translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin ---- -<p> 本章论述如何修改窗口的皮肤。</p> - -<div id="section_1"> -<h3 class="editable" id="关于皮肤"><span>关于皮肤</span><a href="../../../../en/XUL_Tutorial/Modifying_the_Default_Skin#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"> </span></a></h3> - -<p><a href="../../../../en/Creating_a_Skin_for_Firefox/Getting_Started" rel="internal">皮肤</a> 是一组样式表，图片及应用于ＸＵＬ的行为文件。 通过使用不同的皮肤，你可以再不改变窗口的功能的前提下改变其外观。火狐提供了一个默认的皮肤，并且你也可以下载到其他的一些。对于所有的皮肤来说ＸＵＬ是一样的，只是，他们使用的样式表及图片不同罢了。</p> - -<p> 如果你想让你的火狐窗口看起来更有个性，你可以简单的改变与之关联的样式表文件。当然可以创建一个全新的皮肤来进行进一步的修改。火狐有一个主题管理器用以修改默认的皮肤（尽管在底层代码中，人们把皮肤和用户界面叫“主题”，但实际上他们就是指一个相同的东西）。</p> - -<p> 皮肤使用 <a href="../../../../en/CSS" rel="internal">CSS</a>描述，允许你定义绘图元素使用的颜色、边框和图片。再文件classic.jar中包含有皮肤的定义。此包中的全局目录中有一个主样式定义，他用于定义一系列ＸＵＬ元素是如何显示的。通过修改这些文件，你就能改变ＸＵＬ程序的外观。。</p> -</div> - -<div id="section_2"> -<h3 class="editable" id="使用userChrome.css定制"><span> 使用userChrome.css定制</span><a href="../../../../en/XUL_Tutorial/Modifying_the_Default_Skin#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"> </span></a></h3> - -<p> 在你的profile文件夹中，'chrome'文件夹下放置一个'userChrome.css' 文件你就可以通过覆盖而不是修改主题包来改变程序外观。当你创建一个profile 是就会创建这样一个文件夹，并且其中会包含一些内容。文件'userContent.css' 定制网页， 文件'userChrome.css' 定制chrome 文件。</p> - -<p> 下例，把下面这行加到文件的底部，你会发现所有的菜单栏都变成了红色背景。</p> - -<pre>menubar { - background-color: red; -} -</pre> - -<p> 当你进行了以上修改之后，你会发现所有的火狐窗口都已改变，所有的菜单栏都是红色的。因为他改变了用户样式表，并且作用于所有的窗口。也就是说，浏览器菜单栏、书签菜单栏甚至是查找菜单栏都是红色的。</p> -</div> - -<p> </p> - -<h3 class="editable" id="皮肤包"><span>皮肤包 </span></h3> - -<div class="editIcon"><a href="../../../../en/XUL_Tutorial/Modifying_the_Default_Skin#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - -<p> 仅改变一个窗口，你需要修改与ＸＵＬ文件相关的样式表。比如，为书签管理器的菜单命令增加一个红色的边框，把下面的内容加到classic.jar或你要用的其他主题包的 bookmarksManager.css 文件最后。</p> - -<pre>menuitem { - border: 1px solid red; -} -</pre> - -<p> 如果你观察一个皮肤包，你就会注意到其中包含有一系列的样式表及图片。样式表引用图片。当你希望你的程序可以改变皮肤时，你应该避免在ＸＵＬ文件中直接引用图片。这是因为一个别的什么皮肤设计者可能不希望使用图片，但是如果在ＸＵＬ文件中直接使用了图片，就会使他的工作变得复杂。请使用ＣＳＳ间接引用图片，这样就很容易被移除。</p> - -<p> 使用<code>list-style-image属性，</code>你可以为按钮、复选框或是其他什么元素设计图形，如下例：</p> - -<pre>checkbox { - list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); -} - -checkbox[checked="true"] { - list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); -} -</pre> - -<p> 这些代码改变了与复选框相关的图形，首先复选框有一个一般的外观，然后为选中的复选框设置了一个新的图像。修饰'checked=true' makes the style only apply to elements which have their checked attributes set to true.</p> - -<p><small><span class="lang lang-en"><span id="See_also"><strong>See also</strong></span> </span> : <a href="../../../../en/Creating_a_Skin_for_Firefox" rel="internal">creating a skin for Firefox</a> and <a href="../../../../en/CSS/Getting_Started" rel="internal">CSS getting started</a> </small></p> - -<p>下一节，创建一个新皮肤</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/more_button_features/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/more_button_features/index.html deleted file mode 100644 index a5dc1c3a54..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/more_button_features/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: 沙盒 -slug: Mozilla/Tech/XUL/Tutorial/More_Button_Features -tags: - - test - - 沙盒 - - 练习 -translation_of: Sandbox ---- -<article class="approved"> -<div class="boxed translate-rendered text-content"> -<p class="summary">{{EmbedLiveSample('Sample')}}</p> - -<p class="summary">How To Edit The Sandbox For Publication</p> - -<p>There should be a video editing add-on.</p> - -<h2 id="Steven" name="Steven">Another in this article section (<em>maybe</em>)</h2> - -<h3 id="adam" name="adam">Nesting?</h3> - -<p>Hmmm, maybe this works? I don't <a href="http://google.com/">know</a>.</p> - -<p>I will get there!</p> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">link testing</a></p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> there <span class="operator token">=</span> <span class="number token">999999999</span><span class="punctuation token">;</span> - -<span class="keyword token">let</span> stepCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> - -<span class="keyword token">while</span><span class="punctuation token">(</span><span class="operator token">!</span>there<span class="punctuation token">)</span> <span class="punctuation token">{</span> - stepCount<span class="operator token">++</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="comment token">//you cannot got there</span> -<span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'I GOT THERE!!!!!!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h4 id="H4_heading">H4 heading</h4> - -<h5 id="h5_indicates_that_youve_dug_too_deep!">h5 indicates that you've dug too deep!</h5> - -<h2 id="Code_Sample">Code Sample</h2> - -<pre class="brush: cpp line-numbers language-cpp"><code class="language-cpp">#include <span class="operator token"><</span>iostream<span class="operator token">></span> - -int <span class="function token">main</span><span class="punctuation token">(</span><span class="punctuation token">)</span> - -<span class="punctuation token">{</span> - -<span class="function token">print</span><span class="punctuation token">(</span><span class="string token">"This is a sample code!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">return</span> <span class="number token">3</span><span class="punctuation token">;</span> - -<span class="punctuation token">}</span></code></pre> - -<h2 id="Alerts_in_Javascript">Alert's in Javascript</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>test_code<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> - Test Sample Code -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#test_code</span></span> <span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> purple<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hi there !!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('My_Alert')}}</p> - -<h2 id="Hello_World">Hello World</h2> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> - -<h3 id="Result_2">Result</h3> - -<p>{{EmbedLiveSample('Hello_World')}}</p> - -<h2 id="sand" name="sand">结论</h2> - -<p>本文档提供了JavaScript中alerts---警告的基本信息</p> - -<h2 id="webgl" name="webgl">WebGL 基本原理</h2> - -<p>WebglRenderingContext的shaderSource方法非常酷！</p> - -<h2 id="子导航">子导航</h2> - -<section id="Quick_Links"> -<ol> - <li><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Sandbox">Sandbox</a></strong> {{ListSubpages("/en-US/docs/Sandbox", 2, 0, 1)}}</li> -</ol> -</section> -</div> -</article> - -<article class="localized"> -<header> -<h3 id="中文_简体_翻译：">中文 (简体) 翻译：</h3> -</header> - -<div class="guide-links"><a href="https://wiki.developer.mozilla.org/zh-CN/docs/MDN/Community" rel="noopener">需要帮助？</a> • <a href="https://wiki.developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor" rel="noopener">编者指南</a> • <a href="https://wiki.developer.mozilla.org/zh-CN/docs/MDN/Contribute/Content/Style_guide" rel="noopener">风格指南</a></div> - -<div class="editor-wrapper" id="editor-wrapper"> -<div class="draft-container"> -<div class="draft-old"></div> - -<div class="draft-status"><span id="draft-action">草稿已自动保存： <time class="time-ago" id="draft-time" title="2019-11-15T05:28:03.006Z">2019/11/15 下午1:28:03</time></span></div> -</div> - -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="editor-tools"></div> - -<div style="height: 232px;"> -<div style="border: 1px solid rgb(182, 182, 182); width: 702px; position: relative; top: 0px;"></div> -</div> -</div> -</div> -</div> -</article> - -<article class="localized"> -<div class="editor-wrapper" id="editor-wrapper"> -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="cke" dir="ltr" id="cke_id_content" lang="zh-cn"> -<div> -<div id="cke_1_contents" style="height: 2399.9px;"></div> -</div> -</div> -</div> -</div> -</div> -</article> - -<p class="summary" id="bob">如何编辑沙盒页面的发布版本test</p> - -<p>这里应该有一个视频编辑插件。</p> - -<h2 id="vvv" name="vvv">本文的另一个小节（<em>大概</em>）</h2> - -<h3 id="adam" name="adam">嵌套？</h3> - -<p>嗯, 这样能行吧? 我也不<a href="http://google.com/">知道</a>。</p> - -<p>我会做到的！</p> - -<p><a href="/zh-CN/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">链接测试</a></p> - -<pre class="brush: js">let there = 999999999; - -let stepCount = 1; - -while(!there) { - stepCount++; -} - -alert('I GOT THERE!!!!!!');</pre> - -<h4 id="H4_标题">H4 标题</h4> - -<h5 id="h5_表明你钻研的太深奥了有么？">h5 表明你钻研的太深奥了(有么？)</h5> - -<h2 id="代码示例">代码示例</h2> - -<pre class="brush: cpp line-numbers language-cpp"><code class="language-cpp">#include <span class="operator token"><</span>iostream<span class="operator token">></span> - -int <span class="function token">main</span><span class="punctuation token">(</span><span class="punctuation token">)</span> - -<span class="punctuation token">{</span> - -<span class="function token">print</span><span class="punctuation token">(</span><span class="string token">"This is a sample code!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">return</span> <span class="number token">3</span><span class="punctuation token">;</span> - -<span class="punctuation token">}</span></code></pre> - -<h2 id="我的警示">我的警示</h2> - -<h3 id="HTML_3">HTML</h3> - -<pre class="brush: html"><p id='test_code'> - 测试示例代码 -</p></pre> - -<h3 id="CSS_2">CSS</h3> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#test_code</span></span> <span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> purple<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="JavaScript_2">JavaScript</h3> - -<pre class="brush: js">console.log("嗨，我在这儿 !!");</pre> - -<h3 id="结果">结果</h3> - -<p>{{EmbedLiveSample('My_Alert')}}</p> - -<h2 id="sand" name="sand">大家好</h2> - -<p>本文档旨在健全科学。</p> - -<h2 id="webgl" name="webgl">WebGL基本原理</h2> - -<p>WebglRenderingContext中的shaderSource方法非常酷炫！</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/more_event_handlers/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/more_event_handlers/index.html deleted file mode 100644 index efb14f298f..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/more_event_handlers/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: 其他事件处理器 -slug: Mozilla/Tech/XUL/Tutorial/More_Event_Handlers -translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers ---- -<div class="pageTitle"> - <h1 id="更多关于事件处理">更多关于事件处理</h1> -</div> -<div id="page-top"> - <div class="pageText" id="pageText"> - <p> </p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Adding_Event_Handlers" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Keyboard_Shortcuts" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - <p> 在这一章，详细讨论事件对象，并引入一些新事件。</p> - <div id="section_1"> - <h3 class="editable" id="事件对象"><span>事件对象</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 每一个事件处理函数都包含一个保存这事件（ <a href="../../../../en/DOM/event" rel="internal">event</a> ）对象的参数。在以属性的发生添加的事件监听器里也有一个隐含的事件对象（event）被当作参数传递到事件监听器中。在 <a href="../../../../en/DOM/element.addEventListener" rel="internal">addEventListener</a> 的形式中，事件监听器的第一个参数就是事件对象。实践大学有一系列的属性，完整列表参见 <a href="../../../../en/DOM/event" rel="internal"> reference</a>。</p> - <p> 我们已经在上一章知道了<code><a href="../../../../en/DOM/event.target" rel="internal">target</a></code> 属性，它保存这产生事件元素的一个引用。一个相似的 <code><a href="../../../../en/DOM/event.currentTarget" rel="internal">currentTarget</a></code> 属性当前处理此事件的元素，下面的例子 <code><a href="../../../../en/DOM/event.currentTarget" rel="internal">currentTarget</a></code> 总是 vbox，而 <code><a href="../../../../en/DOM/event.target" rel="internal">target</a></code> 可能是不同的元素， button 或 checkbox。</p> - <p><span class="lang lang-en"><span id="Example_1"><strong>Example 1</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">View</a> </span></p> - <pre><vbox oncommand="alert(event.currentTarget.tagName);"> - <button label="OK"/> - <checkbox label="Show images"/> -</vbox> -</pre> - <div id="section_2"> - <h4 class="editable" id="停止事件传播"><span>停止事件传播</span></h4> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 一旦你处理一个事件，无论事件传播到什么程度，你都希望停止事件继续向下传播。因为添加事件监听器的方式不同有以下两种方式停止事件传播。</p> - <p> 由于路由阶段先于返回阶段发生所以路由监听器会先于返回监听器触发。如果路由阶段停止事件传播，那么其后的路由监听器及所有返回监听器都不会触发。手动停止事件对象传播使用 <code><a href="../../../../en/DOM/event.stopPropagation" rel="internal">stopPropagation</a></code> 方法，如下例。</p> - <p><span class="lang lang-en"><span id="Example_2"><strong>Example 2</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">View</a> </span></p> - <pre><hbox id="outerbox"> - <button id="okbutton" label="OK"/> -</hbox> - -<script> -function buttonPressed(event){ - alert('Button was pressed!'); -} - -function boxPressed(event){ - alert('Box was pressed!'); - event.stopPropagation(); -} - -var button = document.getElementById("okbutton"); -button.addEventListener('command',buttonPressed,true); - -var outerbox = document.getElementById("outerbox"); -outerbox.addEventListener('command',boxPressed,true); -</script> -</pre> - <p> 这里分别在按钮和box上添加事件监听器，在调用box的监听器中使用了 <code><a href="../../../../en/DOM/event.stopPropagation" rel="internal">stopPropagation</a></code> 方法，因此按钮的监听器永远不会被调用。如果去掉此命令两个监听器的显示都会出现。</p> - </div> - <div id="section_3"> - <h4 class="editable" id="阻止默认响应"><span>阻止默认响应</span></h4> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 如果没有注册事件处理，那么当完成路由及返回后，元素会以一种默认的方式对事件作出响应。这种默认响应依赖于元素的定义。比如， 'popupshowing' 事件在快捷菜单显示之前被发送。默认的响应就是显示快捷菜单。如果默认的响应被阻止，那么快捷菜单就不会显示。默认的响应可以使用事件对象的 <code><a href="../../../../en/DOM/event.preventDefault" rel="internal">preventDefault</a></code> 方法阻止，如下例。</p> - <p><span class="lang lang-en"><span id="Example_3"><strong>Example 3</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">View</a> </span></p> - <pre><button label="Types" type="menu"> - <menupopup onpopupshowing="event.preventDefault();"> - <menuitem label="Glass"/> - <menuitem label="Plastic"/> - </menupopup> -</button> -</pre> - <p> 另一种方式， 对于以属性形式使用的可以在代码中直接返回 false 。 注意阻止默认响应不同于 <code><a href="../../../../en/DOM/event.stopPropagation" rel="internal">stopPropagation</a></code> 方法，即使默认响应被阻止，事件依然会传播下去。同样的，定义 <code><a href="../../../../en/DOM/event.stopPropagation" rel="internal">stopPropagation</a></code> 方法也不会阻止默认响应。如果需要，必须同时调用。</p> - <p> 注意一旦传播或默认调用被阻止，都不可恢复。</p> - <p> 下面的几章列出可能用到的一些事件，一个完整的列表在这里 <a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html" rel="external nofollow" title="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">XULPlanet event reference</a>。</p> - </div> - </div> - <div id="section_4"> - <h3 class="editable" id="鼠标事件"><span>鼠标事件</span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 这里的一些事件用来描述鼠标动作，简单的描述如下：</p> - <dl> - <dt> - click </dt> - <dd> - 当鼠标键在一个元素上按下并释放后调用。</dd> - </dl> - <dl> - <dt> - dblclick </dt> - <dd> - 当鼠标双击时调用。</dd> - </dl> - <dl> - <dt> - mousedown </dt> - <dd> - 当鼠标键在一个元素上按下时调用，事件处理会被立即调用，甚至在鼠标键释放之前。</dd> - </dl> - <dl> - <dt> - mouseup </dt> - <dd> - 当鼠标键在一个元素上释放时调用。</dd> - </dl> - <dl> - <dt> - mouseover </dt> - <dd> - 当鼠标移动到一个元素之上时调用，你可以使用它来高亮显示该元素，然而CSS提供了一个方案自动实现它，所以你可能不会使用它，当然你也可以在状态栏显示一些提示信息。</dd> - </dl> - <dl> - <dt> - mousemove </dt> - <dd> - 当鼠标在一个元素上移动时调用，在移动过程中可能会多次调用事件处理，请务必避免冗长，复杂操作。</dd> - </dl> - <dl> - <dt> - mouseout </dt> - <dd> - 当指针移除元素时调用。你可以将该元素取消高亮或移除状态栏提示。</dd> - </dl> - <p> 也有一些与拖动相关的事件，当用户按下鼠标键并移动鼠标时产生，这一部分参见 <a href="../../../../en/Drag_and_Drop" rel="internal">Drag and Drop</a>.</p> - <div id="section_5"> - <h4 class="editable" id="鼠标键事件属性"><span>鼠标键事件属性</span></h4> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 当一个鼠标键事件产生，一系列附件属性也随之产生用以描述哪个鼠标键被按下及鼠标指针的位置。事件的 <code><a href="../../../../en/DOM/event.button" rel="internal">button</a></code> 可以用于确定哪个按键被按下。0 代表左键，1 代表中键 ，2代表右键。如果鼠标设置不同，值也不同。</p> - <p> <code><a href="../../../../en/DOM/event.detail" rel="internal">detail</a></code> 保存着鼠标键被短时间内快速点击的次数。这允许你检查这是一次单击，双击还是三击。当然如果你希望检查双击你可以使用 dblclick 事件代替。一旦第一次点击开始 click 事件就会触发，第二次点击会再触发一次，第三次又一次。但 dblclick 事件仅在双击发生时触发。</p> - <p> <code><a href="../../../../en/DOM/event.button" rel="internal">button</a></code> 及 <code><a href="../../../../en/DOM/event.detail" rel="internal">detail</a></code> 仅支持与鼠标键相关的事件，对鼠标移动事件无效。对于鼠标移动事件这两个值均为0。</p> - </div> - <div id="section_6"> - <h4 class="editable" id="鼠标位置事件属性"><span>鼠标位置事件属性 </span></h4> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 所以的鼠标事件都提供事件发生时鼠标的坐标位置。有两个坐标系统。其一是 <code><a href="../../../../en/DOM/event.screenX" rel="internal">screenX</a></code> 、 <code><a href="../../../../en/DOM/event.screenY" rel="internal">screenY</a></code> 属性他们是基于屏幕左上角的。另一个是 <code><a href="../../../../en/DOM/event.clientX" rel="internal">clientX</a></code> 、 <code><a href="../../../../en/DOM/event.clientY" rel="internal">clientY</a></code> 他们是相对于文件左上角的。这里有一个显示当前鼠标位置的例子。</p> - <p><span class="lang lang-en"><span id="Example_4"><strong>Example 4</strong></span> </span> : <span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">Source</a> <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul" rel="external nofollow" title="http://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">View</a> </span></p> - <pre><script> - -function updateMouseCoordinates(e){ - var text = "X:" + e.clientX + " Y:" + e.clientY; - document.getElementById("xy").value = text; -} -</script> - -<label id="xy"/> -<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/> -</pre> - <p> 在这个例子里，box 的尺寸被准确设定，这样更容易看出结果。事件处理器得到 <code><a href="../../../../en/DOM/event.clientX" rel="internal">clientX</a></code> 和 <code><a href="../../../../en/DOM/event.clientY" rel="internal">clientY</a></code> 属性并根据他们创建一个字符串。这个字符串又被设置成为 label.value 的值。注意事件对象必须作为参数传递给<code>updateMouseCoordinates</code> 函数。如果快速的在剥削的边缘上移动鼠标，你可能会发现坐标并不会准确的停到 400。这是因为 mousemove 事件触发的间隔取决于鼠标移动的速度。因为当鼠标移动过一段距离后新的事件才触发，因为发送鼠标每一像素的移动是十分没有效率的。</p> - </div> - <div id="section_7"> - <h4 class="editable" id="元素相关坐标"><span>元素相关坐标</span></h4> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 你经常想知道事件发生时对元素的坐标而非对于这个窗口。这时你可以使用减法来计算，示例如下。</p> - <pre>var element = event.target; -var elementX = event.clientX - element.boxObject.x; -var elementY = event.clientY - element.boxObject.y; -</pre> - <p> XUL 元素有一个 box 对象可以通过 <code><span class="lang lang-en"><a href="../../../../en/XUL/Property/boxObject" rel="internal">boxObject</a> <span style="font-family: Verdana,Tahoma,sans-serif;">属性获得。在</span></span></code><a href="../../../../en/XUL_Tutorial/Box_Objects" rel="internal"><code><span class="lang lang-en"><span style="font-family: Verdana,Tahoma,sans-serif;">后一章</span></span></code></a><code><span class="lang lang-en"><span style="font-family: Verdana,Tahoma,sans-serif;">我们会学习更多相关内容</span></span></code>，但记住它保存着如何显示元素包括元素的x，y 位置。在这个例子中，这些坐标被从事件坐标中减去，这样就得到了事件相对于元素的坐标。</p> - </div> - </div> - <div id="section_8"> - <h3 class="editable" id="加载事件"><span>加载事件 </span></h3> - <div class="editIcon"> - <a href="/../../../../en/XUL_Tutorial/More_Event_Handlers#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 一旦XUL文件加载完成 load 事件就会被发送到文件 ( <code><span class="lang lang-en"><a href="../../../../en/XUL/window" rel="internal">window</a> <span style="font-family: Verdana,Tahoma,sans-serif;">标记</span></span></code>)，此时正是内容显示之前。这个事件通常被用于初始化操作及完成一些任务使得用户可以使用窗口。你可以通过调用一个顶层的脚本函数来使用这一事件处理以上这些事情。这是因为XUL文件为完全加载，一些事情可能会处理出错。使用 load 事件，在 <code><span class="lang lang-en"><a href="../../../../en/XUL/window" rel="internal">window</a> </span></code>标记处放置 <code><span class="lang lang-en"><a href="../../../../en/XUL/Attribute/onload" rel="internal">onload</a> <span style="font-family: Verdana,Tahoma,sans-serif;">属性，调用处理加载事件的处理器来完成必要的界面初始化。</span></span></code></p> - <p> 也有unload 事件，它当窗口关闭时被调用，或者作为浏览器的内容时，页面换为另一URL 时调用。你可以使用这一事件保存任何改变的信息。</p> - <p><br> - 接下来我们看看如何添加键盘快捷方式（ <a href="../../../../en/XUL_Tutorial/Keyboard_Shortcuts" rel="internal">keyboard shortcuts</a>）.</p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Adding_Event_Handlers" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Keyboard_Shortcuts" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - </div> - </div> -</div> -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/more_menu_features/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/more_menu_features/index.html deleted file mode 100644 index 30cc1b3046..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/more_menu_features/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: XUL_教程/更多菜单特性 -slug: Mozilla/Tech/XUL/Tutorial/More_Menu_Features -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Popup_Menus">下一页 »</a></p> -</div><p></p> -<p>在本节中，我们来学习如何创建子菜单和check菜单。</p> -<h3 id=".E5.88.9B.E5.BB.BA.E5.AD.90.E8.8F.9C.E5.8D.95" name=".E5.88.9B.E5.BB.BA.E5.AD.90.E8.8F.9C.E5.8D.95">创建子菜单</h3> -<p>使用已存在元素可以在其它菜单（递归菜单）中创建子菜单。记住可以在<code>menupopup</code>中放置任意元素。我们已经学过在<code>menuseparator</code>s中放置<code>menuitem</code>s。但是，还可以通过在<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>元素中简单的放置<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>元素来创建子菜单。这样也可以运行，因为菜单元素即使不直接放在菜单栏里面它也是有效的。下面的示例在 文件 菜单中创建了一个简单的子菜单：</p> -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">View</a></p> -<div class="float-right"> - <img alt="Image:menubar-ex3.png"></div> -<pre><toolbox flex="1"> - <menubar id="sample-menubar"> - <menu id="file-menu" label="File"> - <menupopup id="file-popup"> - <menu id="new-menu" label="New"> - <menupopup id="new-popup"> - <menuitem label="Window"/> - <menuitem label="Message"/> - </menupopup> - </menu> - <menuitem label="Open"/> - <menuitem label="Save"/> - <menuseparator/> - <menuitem label="Exit"/> - </menupopup> - </menu> - </menubar> -</toolbox> -</pre> -<div class="highlight"> - <h3 id=".E5.9C.A8.E6.88.91.E4.BB.AC.E7.9A.84.E3.80.80.E6.9F.A5.E6.89.BE.E6.96.87.E4.BB.B6.E3.80.80.E7.A4.BA.E4.BE.8B.E4.B8.AD.E5.8A.A0.E5.85.A5.E8.8F.9C.E5.8D.95" name=".E5.9C.A8.E6.88.91.E4.BB.AC.E7.9A.84.E3.80.80.E6.9F.A5.E6.89.BE.E6.96.87.E4.BB.B6.E3.80.80.E7.A4.BA.E4.BE.8B.E4.B8.AD.E5.8A.A0.E5.85.A5.E8.8F.9C.E5.8D.95">在我们的 查找文件 示例中加入菜单</h3> - <p>让我们在查找文件对话框中加入菜单。我们仅加入少量简单的命令至 文件 菜单和 编辑 菜单中。这与上面示例类似。</p> - <pre class="eval"><toolbox> - - <span class="highlightred"><menubar id="findfiles-menubar"> - <menu id="file-menu" label="File" accesskey="f"> - <menupopup id="file-popup"> - <menuitem label="Open Search..." accesskey="o"/> - <menuitem label="Save Search..." accesskey="s"/> - <menuseparator/> - <menuitem label="Close" accesskey="c"/> - </menupopup> - </menu> - <menu id="edit-menu" label="Edit" accesskey="e"> - <menupopup id="edit-popup"> - <menuitem label="Cut" accesskey="t"/> - <menuitem label="Copy" accesskey="c"/> - <menuitem label="Paste" accesskey="p" disabled="true"/> - </menupopup> - </menu> - </menubar></span> - -<toolbar id="findfiles-toolbar> -</pre> - <div class="float-right"> - <img alt="Image:menubar1.png"></div> - <p>在此我们已经加入了两个菜单以及一些不同的菜单命令。注意菜单栏是如何放置在toolbox内的。在 打开搜索 和 保存搜索 后面的三个点通常提示用户本命令操作会打开一个对话框。每个菜单和菜单项已经加入了访问快捷键。在图中可以看到菜单标签内的字母已经被打上了下划线。而 粘贴 命令在此被禁止。我们假定没有什么可以用来粘贴。</p> - <p><span id="Our_Find_files_example_so_far"><a id="Our_Find_files_example_so_far"></a><strong>Our Find files example so far</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">View</a></p> -</div> -<h3 id=".E7.BB.99.E8.8F.9C.E5.8D.95.E5.8A.A0.E5.85.A5.E5.8B.BE.E9.80.89.28check.29.E6.A0.87.E8.AE.B0" name=".E7.BB.99.E8.8F.9C.E5.8D.95.E5.8A.A0.E5.85.A5.E5.8B.BE.E9.80.89.28check.29.E6.A0.87.E8.AE.B0">给菜单加入勾选(check)标记</h3> -<p>许多应用程序的菜单项都有check标记。例如，许可特性在命令里面会有一个check，而禁止特征则没有check在里面。当用户选择菜单后，check状态就进行了切换。你也可以在菜单项上创建radio按钮。</p> -<p>check创建类似于<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>元素和<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>元素。包括了两个属性的使用：<code><a href="cn/XUL/Attribute/button.type">type</a></code>标识check的类型，而<code><a href="cn/XUL/Attribute/menuitem.name">name</a></code>标识同在一起的组命令。下面的示例创建一个带有check项的菜单。</p> -<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">View</a></p> -<pre><toolbox> - <menubar id="options-menubar"> - <menu id="options_menu" label="Options"> - <menupopup> - <menuitem id="backups" label="Make Backups" type="checkbox"/> - <menuitem id="backups" label="Email Administrator" type="checkbox" checked="true"/> - </menupopup> - </menu> - </menubar> -</toolbox> -</pre> -<p>加入的<code><a href="cn/XUL/Attribute/button.type">type</a></code>属性用来标识菜单项是可以check的。通过设置<code>checkbox</code>的值，通过选择菜单项，使它被勾选或取消勾选。</p> -<h4 id=".E5.B8.A6.E6.9C.89radio.E6.A0.87.E8.AE.B0.E7.9A.84.E8.8F.9C.E5.8D.95" name=".E5.B8.A6.E6.9C.89radio.E6.A0.87.E8.AE.B0.E7.9A.84.E8.8F.9C.E5.8D.95">带有radio标记的菜单</h4> -<p>除标准check菜单外，还可以通过设置<code><a href="cn/XUL/Attribute/button.type">type</a></code>的值为<code>radio</code>来创建radio风格的check型菜单。radio风格的check菜单用于在一组目录项中仅选择一项的时候。例如在一个菜单中每次只能选取一个生效的情况。当选取另外一项时，前面的选择项就会自动取消选择。</p> -<p>为了将一组菜单项放置在一起，需要将每一项的<code><a href="cn/XUL/Attribute/menuitem.name">name</a></code>属性设置为一样，就会形成一个菜单组。示例如下：</p> -<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">View</a></p> -<pre><toolbox> - <menubar id="planets-menubar"> - <menu id="planet-menu" label="Planet"> - <menupopup> - <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/> - <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/> - <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/> - <menuseparator/> - <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/> - <menuitem id="moon" label="Moon" type="radio" name="inhabited"/> - </menupopup> - </menu> - </menubar> -</toolbox> -</pre> -<p>试一下这个示例，可以发现前三个菜单项只有一个可以被勾选。它们被聚为一组，因为他们的name属性值相同。最后一个菜单项－－Earth，一个radio按钮，由于拥有不同的name属性值，因此不是这个菜单组的一部分。</p> -<p>当然，聚集在一组中的项只能放置在相同的菜单中。虽然将它们相邻的放在一起比分开放要直观得多，但在菜单中并没有必要将它们放在一起。</p> -<p>下一回，我们将学习如何<a href="cn/XUL_%e6%95%99%e7%a8%8b/%e5%bc%b9%e5%87%ba%e8%8f%9c%e5%8d%95">创建弹出菜单</a>。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Popup_Menus">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/more_wizards/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/more_wizards/index.html deleted file mode 100644 index 48648bb971..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/more_wizards/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: More Wizards -slug: Mozilla/Tech/XUL/Tutorial/More_Wizards -translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards ---- -<div> - <div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial/Creating_a_Wizard" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial/Overlays">下一页 »</a></p> -</div></div> -<p>This section describes some additional features of wizards.</p> -<h2 id="More_Complex_Wizard_Navigation" name="More_Complex_Wizard_Navigation">More Complex Wizard Navigation</h2> -<p>Normally, a wizard displays each <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> in the order that you place them in the XUL file. In some cases however, you may want to have different pages of the wizard appear depending on what the user selects in earlier pages.</p> -<p>In this case, place a <code>pageid</code> attribute on each of the pages. This should be set to an identifier for each page. Then, to navigate to a page, use one of two methods:</p> -<ol> - <li>Set the <code>next</code> attribute on each page to the page ID of the next page to go to. You can change these attributes as needed to navigate to different pages.</li> - <li>Call the wizard's <code>goTo()</code> method. It takes one argument, the page ID of a page to go to. You might call this method in the <code>onpageadvanced</code> or <code>onwizardnext</code> handlers. Remember to return false in this case, because you have already changed the page yourself. Note that the <code>goTo()</code> method, because it causes a page change, will fire the events again, so you'll have to make sure you handle that case.</li> -</ol> -<p>For example, here are a set of wizard pages (the inner content has been omitted):</p> -<pre class="brush:xml"><wizardpage pageid="type" next="font"> -<wizardpage pageid="font" next="done"> -<wizardpage pageid="color" next="done"> -<wizardpage pageid="done"></pre> -<ul> - <li>The wizard always starts at the first page, which in this case has the page ID <code>type</code>. The next page is the one with the page ID <code>font</code>, so the wizard will navigate to that page next.</li> - <li>On the page with the page ID <code>font</code>, we can see that the next page is <code>done</code>, so that page will be displayed afterwards.</li> - <li>The page with the page ID <code>done</code> has no <code>next</code> attribute, so this will be the last page.</li> -</ul> -<p>A script will adjust the <code>next</code> attributes as necessary to go to the page with the page ID <code>color</code> when needed.</p> -<h2 id="Wizard_Functions" name="Wizard_Functions">Wizard Functions</h2> -<p>The wizard works much like a <a href="/en-US/docs/XUL_Tutorial/Tabboxes" title="XUL_Tutorial/Tabboxes">tabbed panel</a>, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom. Because all of the pages are part of the same file, all of the values of the fields on all pages will be remembered. Thus, you do not have to load and save information between pages.</p> -<p>However, you may want to do some validation of each field on each page. For this, use the handlers described in the previous section. If a field is invalid, you might display an alert. In some cases, it would be more convenient to disable the Next button until valid input has been entered.</p> -<p>The wizard has a property <code>canAdvance</code>, which can be set to true to indicate that the Next button should be enabled. If set to false, the Next button is disabled. You can change the property when invalid or valid data has been entered.</p> -<p>In the following example, the user must enter a secret code into a textbox on the first page of the wizard. The function checkCode() is called whenever the first page is shown as indicated by the <code>onpageshow</code> attribute. It is also called whenever a key is pressed in the textbox, to determine whether the Next button should be enabled again.</p> -<h3 id="Wizard_example" name="Wizard_example">Wizard example</h3> -<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul.txt">Source</a></p> -<pre class="brush:xml"><?xml version="1.0"?> -<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> - -<wizard id="theWizard" title="Secret Code Wizard" - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - -<script> -function checkCode(){ - document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage"); -} -</script> - - <wizardpage onpageshow="checkCode(); return true;"> - <label value="Enter the secret code:"/> - <textbox id="secretCode" onkeyup="checkCode();"/> - </wizardpage> - - <wizardpage> - <label value="That is the correct secret code."/> - </wizardpage> - -</wizard></pre> -<p>There is also a corresponding <code>canRewind</code> property that you can use to enable or disable the Back button. Both properties are adjusted automatically as you switch pages. Thus, the Back button will be disabled on the first page so you don't have to set it yourself.</p> -<p>Another useful property of the wizard is <code>currentPage</code>, which holds a reference to the currently displayed <code>wizardpage</code>. You can also modify the current page by changing this property. If you do change it, the various page change events will still be fired.</p> -<p>Next, we'll see how to use overlays to <a href="/en-US/docs/XUL_Tutorial/Overlays" title="XUL_Tutorial/Overlays">handle common content</a>.</p> -<div> - <div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial/Creating_a_Wizard" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial/Overlays">下一页 »</a></p> -</div></div> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/numeric_controls/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/numeric_controls/index.html deleted file mode 100644 index 310abf97a4..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/numeric_controls/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 数值控件 -slug: Mozilla/Tech/XUL/Tutorial/Numeric_Controls -translation_of: Archive/Mozilla/XUL/Tutorial/Numeric_Controls ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Input_Controls" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:List_Controls">下一页 »</a></p> -</div><p></p> -<p></p> -<p>XUL有两种输入数值或者范围的元素，两种输入日期和时间的元素。这些元素仅适用于Firefox 3以及后续版本。</p> -<p>XUL has two elements used for the entry of numeric values or ranges, and well as two elements for entering dates and times. These elements are only available in Firefox 3 and later.</p> -<h3 id="Number_Fields" name="Number_Fields">数值域Number Fields</h3> -<p>textbox元素也可以用于输入数值，只要设置<code id="a-type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code>属性的值为<code>number</code>即可。这种类型的textbox可以仅用于输入数字而会忽略输入的其他类型字符。另外，textbox一侧添加了上下箭头，允许用户增减输入的值。</p> -<p>A textbox may be used for entering numbers by setting the value of the <code id="a-type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute to the value <code>number</code>. This type of textbox may only be used to enter numbers. Other characters are not allowed and are just ignored if typed. In addition, arrow buttons appear beside the textbox to allow the user to cycle through the values.</p> -<div class="float-right"> - <img alt="Image:Controlguide-textbox-number.gif" class="internal" src="/@api/deki/files/137/=Controlguide-textbox-number.gif"></div> -<p>和其他类型的textbox一样，可以通过<code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code>属性指定默认值。自然，这个值应该是一个数值。另外，可以通过<code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>属性和<code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>属性指定元素的最小和最大值。如果指定了最小和最大值，你就设定了textbox可以输入的值域。如果用户输入了一个超出上下界的值，它会自动取最大值或最小值代替。例如，下面的数值类型textbox的值域是1到20。</p> -<p>As with other textboxes, the default value can be specified with the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute. Naturally, this value should be a number. However, the minimum and maximum values can also be specified using the <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> and <code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> attributes. If these are set, you can control the range of values that the textbox may be set to. If the user enters a value less or greater than this value, it will be reset to the minimum or maximum value as necessary. For instance, the following numeric textbox has a range between 1 and 20.</p> -<pre><textbox type="number" min="1" max="20"/> -</pre> -<p>由于没有指定默认值，元素默认取值1，即最小值。设置<code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>属性为1表明元素的最小可能值是1，同时设置<code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>属性为20表明最大可能值是20。如果没有设置最小值，那么默认是0。<code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>属性默认是<code>Infinity</code>，即最大值没有限制。</p> -<p>As the default value isn't specified, it will default to 1, the minimum value. The <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> attribute is set to <code>1</code> to indicate a minimum possible value of 1 and the <code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> attribute is set to <code>20</code> to indiciate a maximum possible value of 20. If the minimum value is not specified, it has a default value of 0. The maximum value defaults to the special value <code>Infinity</code> which means that there is no limit.</p> -<h4 id="Other_numeric_textbox_attributes" name="Other_numeric_textbox_attributes">其他数值型textbox属性Other numeric textbox attributes</h4> -<p><code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>属性指定当点击箭头时数值的改变量。默认值是1，当然可以设置一个更大的值来加大改变量。例如，下面的例子设置为以10的倍数改变值。</p> -<p>The <code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> attribute may be used to specify by how much the value changes when the arrows are pressed. The default value is 1, but specifying a different value allows the number to change by a larger amount. For instance, the following example steps in multiples of 10.</p> -<pre><textbox type="number" increment="10" max="100"/> -</pre> -<p>这个textbox从0到100，依次取10的倍数。由于没有指定<code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>属性，默认是0。注意，用户仍然可以直接输入其他值。<code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>属性只会影响到上下箭头。当textbox有焦点时，用户可以通过上箭头增加值，用下箭头减小值。</p> -<p>This textbox steps in multiples of 10 from 0 to 100. Since the <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> attribute was not specified, it defaults to 0. Note that the user can still enter other values if they are typed in. The <code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> attribute only affects the arrow buttons. The user may also increment or decrement the value using this increment by using the up and down cursor keys while the textbox is focused.</p> -<p><code id="a-decimalplaces"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code>属性表明需要显示的小数位数。默认值是0，表明只显示整数部分。指定其他值则可用于显示小数。</p> -<p>The <code id="a-decimalplaces"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code> attribute indicates how many decimal places to show. The default value is 0, which means show integers only. However a different value may be used to show decimal values.</p> -<pre><textbox type="number" decimalplaces="2"/> -</pre> -<p>在这个例子中，textbox将显示小数点后两位数字。小数位数多于两位的数值会被舍入到两位小数。</p> -<p>In this example, two digits right of the decimal point are shown. Values with additional fractional digits are rounded to two digits.</p> -<h3 id="Scales" name="Scales">滑块Scales</h3> -<p><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/scale" title="scale">scale</a></code>元素也可以用来从一个区间中选择值。和textbox不同的是滑轨代替了文本框。用户可以拖动滑轨上的滑块来调整值。</p> -<p>A <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/scale" title="scale">scale</a></code> element may also be used to select from a range of values. Instead of a textbox however, a sliding scale is used. The user may drag the thumb of the scale to adjust the value.</p> -<div class="float-right"> - <img alt="Image:Controlguide-scale.gif" class="internal" src="/@api/deki/files/133/=Controlguide-scale.gif"></div> -<p>Scale与textbox有很多相同的属性：<code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code>, <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>, <code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> and <code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>，使用方法也类似。Scale并不实际显示数值，但这个值可能在脚本中用到。当值改变时，Scale将触发<code>change</code>事件。</p> -<p>Many of the same attributes as a numeric textbox may be used with a scale: <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code>, <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>, <code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> and <code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> may all be used in a similar fashion. The scale does not actually show the value as a number, but it may be used in a script. A scale will fire a <code>change</code> event whenever the scales's value is modified.</p> -<pre><scale value="40" min="1" max="50"/> -</pre> -<p>这个例子设置了一个默认值是40，值域是1到50的Scale元素。</p> -<p>This scale defaults to a value of 40 and has a range between 1 and 50.</p> -<p>数值型textbox一般应用于数值对用户而言很重要的情况，例如需要用户输入天数或者文件的最大大小。而Scale则应该用于实际值对用户不那么重要，只要用户能改变它就可以的情况。例如调整音量或者缩放。</p> -<p>A numeric textbox would normally be used when the value was important to the user, for instance, a field to enter a number of days, or the maximum size of a file. A scale would be used when the actual value isn't important, just that sliding the scale decreases or increases a state. For instance, a volume slider or a zoom level.</p> -<p>Scale元素的默认布局是小值在左，大值在右，水平放置。可以通过改变<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>属性和<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>属性修改。</p> -<p>The default arrangement of a scale is horizontal with lower values to the left and higher values to the right. However, you can change this orientation with the <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> and <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attributes.</p> -<pre><scale orient="vertical" dir="reverse"/> -</pre> -<p>这个例子设置Scale垂直显示，且小值在下，大值在上。</p> -<p>This scale will be shown vertical with lower values at the bottom and higher values at the top.</p> -<h3 id="Date_and_Time_Entry_Fields" name="Date_and_Time_Entry_Fields">日期时间输入域Date and Time Entry Fields</h3> -<p><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code>元素和<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code>元素用于用户输入日期和时间。他们会显示一组数值textbox用于输入日期和时间的各部分。</p> -<p>The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> and <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code> elements may be used to allow the user to enter dates and times. When used, they display a set of numeric textboxes to enter each of the components of the date or time.</p> -<pre><datepicker value="2004-03-24"/> -<timepicker value="15:30:00"/> -</pre> -<div class="float-right"> - <img alt="Image:Controlguide-timepicker.gif" class="internal" src="/@api/deki/files/141/=Controlguide-timepicker.gif"></div> -<p><code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code>属性用于设置默认值；如果没有显示指定，则初始化为当前日期或时间。属性值的格式严格按照例子所示，日期为YYYY-MM-DD，时间是HH:MM:SS（也可以省去秒以及前面的冒号）。</p> -<p>The <code>value</code> attribute is used to set the default value; if this attribute is omitted, the field will be initially set to the current date or time. The format of the attribute is exactly as above, that is dates are of the form YYYY/MM/DD and times are of the form HH:MM:SS (although the seconds and the accompanying colon may be omitted).</p> -<p>这两个元素保证用户输入一个有效的日期或者时间，因此你就不用再自己校验用户输入的日是不是大于当月的总天数以及闰年等等。</p> -<p>These two elements ensure that the user enters a value date or time. This way, you do not have to check for valid dates, ensure that the day isn't greater than the number of days in the month, handle leap years, and so forth.</p> -<p><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code>元素只有一种样式，而<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code>元素有三种不同的样式。默认样式是显示三个输入域分别对应年月日。<code id="a-type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code>属性用于选择另外两种样式。<code>grid</code>样式效果如下。</p> -<p>While the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code> only comes is one style, the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> has three different variations. The default style shows three fields for entering the year, month and date. The <code id="a-type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute may be used to select the other two. Using a value of <code>grid</code> uses a calendar grid, as shown in the image below.</p> -<p><img alt="Image:Controlsguide-datepicker-grid.png" class="internal" src="/@api/deki/files/156/=Controlsguide-datepicker-grid.png"></p> -<p>你也可以使用<code>popup样式，该样式结合了另两种，也有三个输入域用于输入年月日，同时提供一个下拉按钮，用于显示日历供用户选择一天。</code></p> -<p>You can also use the value <code>popup</code> which creates a combination of the two types. This type has three fields for entering the year, month and date, as well as a dropdown button for displaying a popup calendar grid for selecting a day.</p> -<pre><datepicker type="popup"/> -</pre> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Input_Controls" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:List_Controls">下一页 »</a></p> -</div><p></p> -<p> </p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/popup_menus/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/popup_menus/index.html deleted file mode 100644 index 026ec62f83..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/popup_menus/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 弹出菜单 -slug: Mozilla/Tech/XUL/Tutorial/Popup_Menus -translation_of: Archive/Mozilla/XUL/Tutorial/Popup_Menus ---- -<p>[fd]</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/progress_meters/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/progress_meters/index.html deleted file mode 100644 index bacf39b352..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/progress_meters/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: XUL_教程/进度条 -slug: Mozilla/Tech/XUL/Tutorial/Progress_Meters -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/Progress_Meters ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:List_Controls" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_HTML_Elements">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E6.B7.BB.E5.8A.A0.E4.B8.80.E4.B8.AA.E8.BF.9B.E5.BA.A6.E6.9D.A1" name=".E6.B7.BB.E5.8A.A0.E4.B8.80.E4.B8.AA.E8.BF.9B.E5.BA.A6.E6.9D.A1">添加一个进度条</h3> -<p>进度条是条状的，它用来指示一个任务完成了多少。你通常可以在当下载文件或当执行一个很长的操作时看到它。XUL有一个<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/progressmeter" title="progressmeter">progressmeter</a></code>元素可以用来创建这些。有两种类型的进度条: 确定的和不确定的。</p> -<p>确定的进度条可以用在当你已经知道完成某个操作的时间长度时。进度条将会被往上填充，并且在充 满时，操作刚好完成。这会用在文件的长度已经知道的下载文件对话框。</p> -<p>不确定进度条会用于当你不知道一个操作的时间长度的情况。进度条是动态的就像一个不停循环移动的杆或一个可调整的框，发生在平台和外观被使用。</p> -<p>确定的进度条: <img alt="Image:prog-det.png" class="internal" src="/@api/deki/files/2673/=Prog-det.png"></p> -<p>不确定的进度条: <img alt="Image:prog-udet.png" class="internal" src="/@api/deki/files/2674/=Prog-udet.png"></p> -<p>进度条的语法如下：</p> -<pre><progressmeter - id="identifier" - mode="determined" - value="50%"/> -</pre> -<p>属性如下:</p> -<dl> - <dt> - <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> - <dd> - 进度条的唯一标识符。</dd> - <dt> - <a href="/cn/XUL/Attribute/progressmeter.mode" title="cn/XUL/Attribute/progressmeter.mode">mode</a></dt> - <dd> - 进度条的类型。如果这里设置为<code>determined</code>，进度条就是确定型进行度，在任务完成时在填满。如果这里设置为<code>undetermined</code>，这个进度条就是不确定型进度条，用于当你不知道花费时间的长度时。如果不指定这个属性默认值为确定型。</dd> - <dt> - <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt> - <dd> - 当前进度条的尺度值。你只能在确定型进度条中使用这个属性。这个值可以设成从0%到100%的百分值。这个值可以在任务结束时由脚本来改变。</dd> -</dl> -<div class="highlight"> - <h5 id=".E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E7.9A.84.E4.BE.8B.E5.AD.90" name=".E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E7.9A.84.E4.BE.8B.E5.AD.90">文件查找的例子</h5> - <p>让我们添加一个进度条到我们文件查找的对话框吧。我们应该使用不确定的进度条因为我们不知道能搜索到多少文件或者要多久才能搜索完成。然而，现在我们将要增加一个普通的因为动态的可以避免在开发期间的困恼。 进度条仅显示在搜索过程中。我们将在后面的脚本中对它进行开合控制。</p> - <pre class="eval"><hbox> - - <span class="highlightred"><progressmeter value="50%" style="margin: 4px;"/></span> - - <spacer flex="1"/> -</hbox> -</pre> - <p>值被设成50%因此我们能在窗口上看到尺度。边缘被设成4像素因此它会与窗口的边缘分开。最开始，我们只希望进度条被显示在搜索开始时。脚本会在需要时显示和隐藏它。</p> - <p>例子太长了。 <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul">View</a></p> - <p><img alt="Image:progress1.png" class="internal" src="/@api/deki/files/2675/=Progress1.png"></p> - <p> </p> -</div> -<p>在下一节，我们将学习如何<a href="/cn/XUL_教程/添加HTML元素" title="cn/XUL_教程/添加HTML元素">在窗口增加HTML的附加元素</a>。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:List_Controls" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_HTML_Elements">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/property_files/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/property_files/index.html deleted file mode 100644 index a5800e69f9..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/property_files/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 属性文件 -slug: Mozilla/Tech/XUL/Tutorial/Property_Files -translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files ---- -<div id="page-top"> - <div class="pageText" id="pageText"> - <p> </p> - <p> 在脚本中，不能使用实体，用属性文件代替。</p> - <p> </p> - <div id="section_1"> - <h3 class="editable" id="属性"><span>属性</span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Property_Files#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 当你在XUL文件中使用DTD文件是恰当的。然而，脚本不解析实体。也就是说，如果你希望在脚本中显示信息而且你不知道到底要显示什么，请使用属性文件</p> - <p> 一个属性文件包含一系列字符串。你可以在DTD文件旁边找到属性文件（.properties后缀）。属性按照以下语法定义 name=value。实例如下。</p> - <pre>notFoundAlert=No files were found matching the criteria. -deleteAlert=Click OK to have all your files deleted. -resultMessage=%2$S files found in the %1$S directory. -</pre> - <p> 上例中，属性文件包含桑属性，可以由脚本读取显示给用户。</p> - </div> - <div id="section_2"> - <h3 class="editable" id="Stringbundles"><span>Stringbundles </span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Property_Files#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> 你可以写一段代码手动来读取属性，而在XUL中有一个 <code><span class="lang lang-en"><a href="../../../../en/XUL/stringbundle" rel="internal">stringbundle</a> </span></code>元素来帮你做。这个元素有一系列函数有属性文件中获取属性并得到本地化信息。这个元素有属性文件读取内容并为你建立一个属性列表。你可以通过名字来查找属性。</p> - <pre><stringbundleset id="strbundles"> -<stringbundle id="strings" src="strings.properties"/> -</stringbundleset> -</pre> - <p> 这个元素会从与该XUL文件系统的目录中读取名为 'strings.properties'的文件。像其他非显示元素一样你可以使用一个 <code><span class="lang lang-en"><a href="../../../../en/XUL/stringbundleset" rel="internal">stringbundleset</a> <span style="font-family: Verdana,Tahoma,sans-serif;">来包含所以的</span></span></code><code><span class="lang lang-en"><a href="../../../../en/XUL/stringbundle" rel="internal">stringbundle</a> </span></code><code><span class="lang lang-en"><span style="font-family: Verdana,Tahoma,sans-serif;">。</span></span></code></p> - <div id="section_3"> - <h4 class="editable" id="由_stringbundle获取字符串"><span>由 </span><code><span class="lang lang-en"><a href="../../../../en/XUL/stringbundle" rel="internal">stringbundle</a>获取字符串</span></code></h4> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Property_Files#" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> <code><span class="lang lang-en"><a href="../../../../en/XUL/stringbundle" rel="internal">stringbundle</a> </span></code> 元素有一系列方法。首先是 <code>getString</code> 用于脚本读取字符串。</p> - <pre>var strbundle = document.getElementById("strings"); -var nofilesfound=strbundle.getString("notFoundAlert"); - -alert(nofilesfound); -</pre> - <ul> - <li>本例首先使用 <code>id 获得字符串束的一个引用</code></li> - <li>然后在属性文件中查找 'notFoundAlert' 字符串 <code>getString()</code> 函数返回字符串的值或 null （字符串不存在）。</li> - <li>最后把职工文本显示在提示框里。</li> - </ul> - </div> - <div id="section_4"> - <h4 class="editable" id="文本格式"><span>文本格式</span></h4> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Property_Files#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> <code>getFormattedString()</code>方法也根据名字从文本束中查找字符串，此外会按照格式控制代码 (如 <code>%S</code>) 将其后给出的数组内容替换入字符串。</p> - <pre>var dir = "/usr/local/document"; -var count = 10; - -var strbundle = document.getElementById("strings"); -var result = strbundle.getFormattedString("resultMessage", [ dir, count ]); - -alert(result); -</pre> - <p> 本例显示如下。</p> - <pre>10 files found in the /usr/local/document directory.</pre> - <p> 你会注意到格式化代码 <code>%1$S</code> 及 <code>%2$S</code>被使用，替换顺序也和在数组中的不同。格式化代码 %<em>n</em>$S 直接描述替换参数的位置。尽管在不同语言中词序可能不同通过 <code>getFormattedString()</code>描述的顺序可以被写入属性文件。</p> - </div> - </div> - <div id="section_5"> - <h3 class="editable" id="非ASCII码的换码符"><span>非ASCII码的换码符 </span></h3> - <div class="editIcon"> - <a href="../../../../en/XUL_Tutorial/Property_Files#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> - <p> （这可能不再正确：在 <a href="../../../../en/Localizing_extension_descriptions" rel="internal">Localizing extension descriptions</a>中说 “使用 UTF-8 编码(而非 BOM) 保证外文正确显示。” UTF-8 编码文本有效， 换码符同样有用。一些新想法的引入会更有用。）</p> - <p> 尽管大多数语言使用非ASCII字符集。属性文件只能使用ASCII字符集编制。然而，属性文件支持其他字符的换码形式： <code>\uXXXX</code> 这里的 XXXX 是字符码，因此，你的属性文件可以包含非ASCII字符，不过你需要把他们转换为换码形式。你可以使用 Sun's Java Development Kit (JDK)的 native2ascii 命令来完成它。</p> - <p>Gecko 1.8.x (or later) 支持属性文件以 UTF-8编码。你可以直接写入非ASCII字符。</p> - <p><br> - 下一章，我们将讨论 XBL，它用于定义元素的行为（ <a href="../../../../en/XUL_Tutorial/Introduction_to_XBL" rel="internal">behavior of an element</a>.）</p> - <p> </p> - <div class="prevnext"> - <p><span style="float: left;">« <a href="../../../../en/XUL_Tutorial/Localization" rel="internal">Previous</a></span> <span style="float: right;"><a href="../../../../en/XUL_Tutorial/Introduction_to_XBL" rel="internal">Next</a> »</span></p> - </div> - <p> </p> - <p> </p> - </div> - </div> -</div> -<div class="printfooter" id="printfooter"> - <hr> - <p>Retrieved from "<a href="../../../../En/XUL_Tutorial/Property_Files">https://developer.mozilla.org/En/XUL_Tutorial/Property_Files</a>"</p> -</div> -<div class="collapsed" id="languages"> - <h5 id="Languages">Languages</h5> - <ul style="display: none;"> - <li><a href="../../../../fr/Tutoriel_XUL/Les_fichiers_de_propri%c3%a9t%c3%a9s" rel="internal">Français</a></li> - <li><a href="../../../../pl/Kurs_XUL/Plik_w%c5%82asno%c5%9bci" rel="internal">Polski</a></li> - <li><a href="../../../../ja/XUL_Tutorial/Property_Files" rel="internal">日本語</a></li> - </ul> -</div> -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/rdf_datasources/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/rdf_datasources/index.html deleted file mode 100644 index b4d4c51238..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/rdf_datasources/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: RDF Datasources -slug: Mozilla/Tech/XUL/Tutorial/RDF_Datasources -translation_of: Archive/Mozilla/XUL/Tutorial/RDF_Datasources ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Trees_and_Templates" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Advanced_Rules">下一页 »</a></p> -</div><p></p> -<p>Here, we'll look at additional datasources and how to use your own RDF files as datasources.</p> -<h3 id="Other_Mozilla_Datasources" name="Other_Mozilla_Datasources">Other Mozilla Datasources</h3> -<p>Mozilla provides a number of other built-in datasources. Some of them are listed here with a few examples. They work very similarly to the bookmarks, although the fields will be different in each case.</p> -<h3 id="The_History_List" name="The_History_List">The History List</h3> -<p>The history datasource provides access to the user's history list which is the list of URLs the user has visited recently. The resource can be referred to using <code>rdf:history</code> as the datasource. The table below shows the resources (or fields) that you can retrieve from the history datasource. Put the URL values below where you want the value of the resource to be used.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <td>Date</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Date</span></td> - <td>Date of last visit</td> - </tr> - <tr> - <td>Name</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> - <td>Title of the page</td> - </tr> - <tr> - <td>Page</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Page</span></td> - <td>Page name</td> - </tr> - <tr> - <td>Referrer</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Referrer</span></td> - <td>Referrer of the page</td> - </tr> - <tr> - <td>URL</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> - <td>URL of the page</td> - </tr> - <tr> - <td>Visit Count</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#VisitCount</span></td> - <td>Number of page visits</td> - </tr> - </tbody> -</table> -<p>A typical history list will display a tree with a selection of these fields. To use them, just put the URL values above in the <code>label</code> attributes of the buttons or treecells. You can use <code>NC:HistoryRoot</code> as the value of the <code>ref</code> attribute. You can also use the value <code>NC:HistoryByDate</code> to get the history sorted into days.</p> -<h4 id="Using_The_History_List_Example" name="Using_The_History_List_Example">Using The History List Example</h4> -<p>Let's see an example of displaying the history list. We'll display the history in a tree with three columns, the Name, the URL and the Date.</p> -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_1.xul.txt">Source</a></p> -<pre><tree flex="1" datasources="rdf:history" ref="NC:HistoryRoot"> - - <treecols> - <treecol id="name" label="Name" flex="1"/> - <treecol id="url" label="URL" flex="1"/> - <treecol id="date" label="Date" flex="1"/> - </treecols> - - <template> - - <rule> - <treechildren> - <treeitem uri="rdf:*"> - <treerow> - <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/> - <treecell label="rdf:http://home.netscape.com/NC-rdf#URL"/> - <treecell label="rdf:http://home.netscape.com/NC-rdf#Date"/> - </treerow> - </treeitem> - </treechildren> - </rule> - - </template> -</tree> -</pre> -<h3 id="Other_Datasources" name="Other_Datasources">Other Datasources</h3> -<p>The tables below list some of the other datasources available with Mozilla. You can use any of the resources that you want.</p> -<dl> - <dt> - Bookmarks (<span class="nowiki">rdf:bookmarks</span>)</dt> - <dd> - The bookmarks are generated from the user's bookmark list.</dd> -</dl> -<table class="fullwidth-table"> - <tbody> - <tr> - <th colspan="3">Resources</th> - </tr> - <tr> - <td>Added Date</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#BookmarkAddDate</span></td> - <td>Date the bookmark was added</td> - </tr> - <tr> - <td>Description</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Description</span></td> - <td>Bookmark description</td> - </tr> - <tr> - <td>Last Modified</td> - <td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastModifiedDate</span></td> - <td>Date of last modification</td> - </tr> - <tr> - <td>Last Visited</td> - <td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastVisitDate</span></td> - <td>Date of last visit</td> - </tr> - <tr> - <td>Name</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> - <td>Bookmark name</td> - </tr> - <tr> - <td>Shortcut URL</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#ShortcutURL</span></td> - <td>Custom keywords field</td> - </tr> - <tr> - <td>URL</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> - <td>The URL to link to</td> - </tr> - </tbody> -</table> -<table class="fullwidth-table"> - <tbody> - <tr> - <th colspan="2">Possible Bookmarks Roots</th> - </tr> - <tr> - <td>NC:BookmarksRoot</td> - <td>The top level of the bookmarks hierarchy</td> - </tr> - <tr> - <td>NC:IEFavoritesRoot</td> - <td>The bookmark folder that corresponds to the user's IE favorites.</td> - </tr> - <tr> - <td>NC:PersonalToolbarFolder</td> - <td>The bookmark folder that corresponds to the personal toolbar folder.</td> - </tr> - </tbody> -</table> -<dl> - <dt> - Files (<span class="nowiki">rdf:files</span>)</dt> - <dd> - A view of the user's files.</dd> -</dl> -<table class="fullwidth-table"> - <tbody> - <tr> - <th colspan="3">Resources</th> - </tr> - <tr> - <td>Name</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> - <td>Name of the file</td> - </tr> - <tr> - <td>URL</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> - <td>URL of the file</td> - </tr> - <tr> - <td>Content-Length</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#Content-Length</span></td> - <td>The length of the file.</td> - </tr> - <tr> - <td>LastModifiedDate</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#LastModifiedDate</span></td> - <td>The date that URL was last modified.</td> - </tr> - <tr> - <td>extension</td> - <td><span class="nowiki">http://home.netscape.com/NC-rdf#extension</span></td> - <td>The extension of the file, including the period. This property is only available on platforms that use file extensions.</td> - </tr> - </tbody> -</table> -<table class="fullwidth-table"> - <tbody> - <tr> - <th colspan="2">Possible Files Roots</th> - </tr> - <tr> - <td>NC:FilesRoot</td> - <td>Top level of the filesystem (usually the list of drives)</td> - </tr> - <tr> - <td>A file URL</td> - <td>By using a file URL for the ref attribute, you can select a specific directory to be returned. For example, you might use <a class="external" rel="freelink">file:///windows</a> or <a class="external" rel="freelink">files:///usr/local</a>.</td> - </tr> - </tbody> -</table> -<p>The files datasource is an example of a datasource that determines its resources only when necessary. We don't want every file in the filesystem to be determined before the data is displayed. Instead, only the files and directories that the tree element (or other elements) will need to display at a given time will be determined.</p> -<h3 id="Composite_Datasources" name="Composite_Datasources">Composite Datasources</h3> -<p>You can specify multiple datasources in the <code>datasources</code> attribute by separating them with whitespace as in the example below. This has the effect of reading the data from all the datasources mentioned.</p> -<pre><tree datasources="rdf:bookmarks rdf:history animals.rdf" ref="NC:BookmarksRoot"> -</pre> -<p>This example reads the resources from the bookmarks, history and the animals.rdf file. They are combined into a single composite datasource and can be used as if they were one.</p> -<p>The special datasource <code>rdf:null</code> corresponds to nothing. You can use this datasource if you want to dynamically set the datasource using a script, but don't want one initially or don't know its exact URL.</p> -<h3 id="Custom_RDF_Datasources" name="Custom_RDF_Datasources">Custom RDF Datasources</h3> -<p>You can use any of the above internal datasources if you wish. There are several others for mail, address books and searching and so on. However, you might want to use your own RDF datasource stored in an RDF file. The file can be either a local file or a remote file. Just put the URL of the RDF file in the <code><code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code></code> attribute.</p> -<p>Using RDF files provides just as much functionality as any of the internal datasources. You can use rules to match specific types of content. The attributes on the <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code> element will match if they match the attributes on an RDF <code>Description</code> element. You can also create RDF files that are hierarchical.</p> -<h4 id="Using_RDF_file_Example" name="Using_RDF_file_Example">Using RDF file Example</h4> -<p>The following is an example of how an RDF file can be used as a datasource. The RDF file is fairly large and can be viewed separately: <a href="https://developer.mozilla.org/samples/xultu/examples/animals.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/animals.rdf">RDF</a></p> -<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_2.xul">View</a></p> -<pre><tree flex="1" width="200" height="200" - datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> - - <treecols> - <treecol id="name" label="Name" primary="true" flex="1"/> - <treecol id="species" label="Species" flex="1"/> - </treecols> - - <template> - <rule> - <treechildren> - <treeitem uri="rdf:*"> - <treerow> - <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> - <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/> - </treerow> - </treeitem> - </treechildren> - </rule> - - </template> -</tree> -</pre> -<p><img alt="Image:datasrc1.jpg"></p> -<p>Here, the data has been generated from the file. The <code><code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> attribute has been set to the root element in the RDF file, which is the top-level <code>Seq</code>. This will give us a complete list of animals. If we wanted to, we could set the <code><code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> attribute to any of the other <code>about</code> attribute values to limit the set of data that is returned. For example, to display only the reptiles, use a value of <code><span class="nowiki">http://www.some-fictitious-zoo.com/reptiles</span></code>.</p> -<h4 id="Setting_the_ref_Attribute_Example" name="Setting_the_ref_Attribute_Example">Setting the <code>ref</code> Attribute Example</h4> -<p>The example below shows how to display a particular piece of an RDF datasource by setting the <code><code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> attribute.</p> -<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_3.xul">View</a></p> -<pre><window - id="example-window" - title="History List" - xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#" - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - -<button label="Click here to see the mammals the zoo has" type="menu" - datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> - <template> - <rule ANIMALS:specimens="0"></rule> - <rule> - <menupopup> - <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> - </menupopup> - </rule> - </template> -</button> - -</window> -</pre> -<p>In this case only the mammals are desired, so we select the URI of the mammals list. You will notice that the value of the <code><code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> attribute in the example is <code><span class="nowiki">http://www.some-fictitious-zoo.com/mammals</span></code> which corresponds to one of the <code>Seq</code> elements in the RDF file. This causes only the descendants of this list to be returned.</p> -<p>Two rules have been used here. The first rule catches all the resources that have their <code>ANIMALS:specimens</code> attribute set to <code>0</code>. You can see this attribute in the RDF file on each of the <code>Description</code> elements. Some of them have a value of 0. So in these cases, rule one will match. Because rule one has no content, nothing will be displayed for these ones. This is an effective way to hide data that we don't want to display.</p> -<p>The second rule applies to all other resources and creates a row in a popup menu. The end effect is that we get a popup menu containing all the mammals which have a specimen that is not 0.</p> -<p>Next, we'll look at the full rule syntax.</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Trees_and_Templates" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Advanced_Rules">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/scroll_bars/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/scroll_bars/index.html deleted file mode 100644 index ea21fc9535..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/scroll_bars/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 滚动栏 -slug: Mozilla/Tech/XUL/Tutorial/Scroll_Bars -translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars ---- -<p>This page has no content. Enrich M</p><dt>DC by contributing.cxz -<table style="width: 319px; height: 100px;"> <tbody> <tr> <td> </td> <td style="text-align: center;"> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> -</table> -<p> </p></dt> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/scrolling_menus/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/scrolling_menus/index.html deleted file mode 100644 index e484aba178..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/scrolling_menus/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: XUL_教程/滚动菜单 -slug: Mozilla/Tech/XUL/Tutorial/Scrolling_Menus -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_Event_Handlers">下一页 »</a></p> -</div><p></p> -<p>本节讲述滚动菜单并且将本机制运用到其它元素中。</p> -<h3 id=".E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA.E5.A4.A7.E8.8F.9C.E5.8D.95" name=".E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA.E5.A4.A7.E8.8F.9C.E5.8D.95">创建一个大菜单</h3> -<p>如果创建一个菜单，里面有很多的命令在里面，会发生什么呢？这样所有的项不会一次性在屏幕上显示完。Mozilla提供一种滚动机制允许滚动这些项。</p> -<div class="float-right"> - <img alt="Image:menuscroll1.png"></div> -<p>如果可用空间太小，在每个菜单的末端会出现箭头。如果将鼠标移动到箭头上，菜单可以上翻或下翻。如果可用的空间足够大，箭头则不会显示。注意是否出现滚动行为完全依赖于当前的实际情况(theme)。</p> -<p>该行为是完全自动的。你不必特意的去为得到滚动菜单而做些工作。它会应用于菜单栏上的菜单，滚动菜单或菜单列表中。执行它使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code>元素。该元素用来创建带箭头的滚动框。</p> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code>可以被用在任何使用规范框的地方。但不能用于菜单中。通常是用于垂直的框中，并且可能包括有很多元素在里面。可以将它用于下拉列表中，当你不想要它是一个下拉框的时候。</p> -<h4 id=".E7.A4.BA.E4.BE.8B_-_.E6.8C.89.E9.92.AE.E7.9A.84.E6.BB.9A.E5.8A.A8.E5.88.97.E8.A1.A8" name=".E7.A4.BA.E4.BE.8B_-_.E6.8C.89.E9.92.AE.E7.9A.84.E6.BB.9A.E5.8A.A8.E5.88.97.E8.A1.A8">示例 - 按钮的滚动列表</h4> -<p>下面的示例说明了如何创建多个按钮的一个滚动列表（需要改变窗口大小以查看箭头按钮）：</p> -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">View</a></p> -<pre><arrowscrollbox orient="vertical" flex="1"> - <button label="Red"/> - <button label="Blue"/> - <button label="Green"/> - <button label="Yellow"/> - <button label="Orange"/> - <button label="Silver"/> - <button label="Lavender"/> - <button label="Gold"/> - <button label="Turquoise"/> - <button label="Peach"/> - <button label="Maroon"/> - <button label="Black"/> -</arrowscrollbox> -</pre> -<p>试一下这个示例，首先它会以完全大小打开。但是，如果缩小窗口的高度，滚动箭头就会出现。将窗口拉大则箭头会消失。</p> -<p>可以设置CSS中<code>arrowscrollbox</code>的<code>max-height</code>属性来限制滚动框的大小，这样使箭头能够一直显示。</p> -<p>因此，<code>arrowscrollbox</code>在菜单和弹出菜单中相当有用。</p> -<p>下回，我们将学习如何添加一些<a href="cn/XUL_Tutorial/Adding_Event_Handlers">XUL元素的事件句柄</a>.</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Adding_Event_Handlers">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/simple_menu_bars/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/simple_menu_bars/index.html deleted file mode 100644 index a9179852f7..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/simple_menu_bars/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: XUL_教程/简单菜单栏 -slug: Mozilla/Tech/XUL/Tutorial/Simple_Menu_Bars -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars ---- -<p> </p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Toolbars" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:More_Menu_Features">下一页 »</a></p> -</div><p></p> - -<p>在本节中，我们来看看如何创建菜单栏及菜单项。</p> - -<h3 id=".E5.88.9B.E5.BB.BA.E8.8F.9C.E5.8D.95" name=".E5.88.9B.E5.BB.BA.E8.8F.9C.E5.8D.95">创建菜单</h3> - -<p>XUL有几种不同的方式来创建菜单。最基本的方式当然是类似大多数程序拥有一个菜单栏并附有一排菜单项在上面。也可以创建弹出式菜单。XUL的菜单特性由几种不同的元素组成，它可以让你创建菜单栏和弹出式菜单。菜单上的项可以轻松的进行自定义。我们在<a href="cn/XUL_Tutorial/List_Controls#Drop-down_Lists">part of how to make menus</a>一文中已经学习过使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>了。本节我们就以此为基础。</p> - -<p>菜单栏通常像<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>一样创建。菜单栏也可以放置于<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>中，则菜单就像在其它类型工具栏一样。XUL拥有一些特殊元素，可以提供一些特定功能的菜单。</p> - -<p>有五种相关的元素用来创建菜单栏及其菜单，在此我们简单解释一下，在后面我们再详述：</p> - -<dl> - <dt><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></dt> - <dd>一排菜单的窗口。</dd> -</dl> - -<dl> - <dt><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></dt> - <dd>尽管名字是菜单，但它实际上在菜单栏上仅仅体现其主题而已。该元素可以放置在菜单栏中或者独立放置。</dd> -</dl> - -<dl> - <dt><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></dt> - <dd>当点击菜单主题时，弹出框会显现。该框包括了菜单命令的列表。</dd> -</dl> - -<dl> - <dt><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></dt> - <dd>菜单上的独立命令。应放置于<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>中。</dd> -</dl> - -<dl> - <dt><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dt> - <dd>菜单上的分割条。应放置于<code>menupopup</code>中。</dd> -</dl> - -<div class="note"> -<p>你可以在除Macintosh之外的任何平台在菜单栏中自定义任何你想要的菜单。这是因为Macintosh自己特殊的菜单置于屏幕最顶端，由系统控制着。虽然你可以创建自定义菜单，但放置于菜单上的任何特殊样式的规则或非菜单元素均不能生效。在创建菜单时头脑中留意这一点。</p> -</div> - -<h5 id=".E7.AE.80.E5.8D.95.E8.8F.9C.E5.8D.95.E6.A0.8F.E7.A4.BA.E4.BE.8B" name=".E7.AE.80.E5.8D.95.E8.8F.9C.E5.8D.95.E6.A0.8F.E7.A4.BA.E4.BE.8B">简单菜单栏示例</h5> - -<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul">View</a></p> - -<div class="float-right"><img alt="Image:menubar-ex1.png"></div> - -<pre><toolbox flex="1"> - <menubar id="sample-menubar"> - <menu id="file-menu" label="File"> - <menupopup id="file-popup"> - <menuitem label="New"/> - <menuitem label="Open"/> - <menuitem label="Save"/> - <menuseparator/> - <menuitem label="Exit"/> - </menupopup> - </menu> - <menu id="edit-menu" label="Edit"> - <menupopup id="edit-popup"> - <menuitem label="Undo"/> - <menuitem label="Redo"/> - </menupopup> - </menu> - </menubar> -</toolbox> -</pre> - -<p>喏，使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>元素创建了一个简单的菜单栏。上面还会创建一排菜单。<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>元素在菜单顶端创建菜单主题显示于菜单栏上。使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>元素创建弹出菜单。用户点击父菜单主题时，会弹出显示。弹出菜单框的大小会足够的大，可以容纳里面所有的菜单命令显示。菜单命令本身使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>元素进行创建。每一个都代表菜单弹出框上的一个单独命令。</p> - -<p>你还可以使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>元素创建菜单上面的分割线。用于分割不同的菜单项组。</p> - -<h4 id="menubar.E5.85.83.E7.B4.A0" name="menubar.E5.85.83.E7.B4.A0"><code>menubar</code>元素</h4> - -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>是一个包括菜单的框。注意它已经被放置于一个固定的<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>中。菜单栏没有特殊的属性一，仅仅是一种类型的框。这意味着可以创建一个垂直的工具栏，通过设置<code><code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code>属性为vertical。</p> - -<h4 id="menu.E5.85.83.E7.B4.A0" name="menu.E5.85.83.E7.B4.A0"><code>menu</code>元素</h4> - -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>元素运行起来就像是<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>元素。可以接受与它相同的部分属性及额外的一些属性：</p> - -<dl> - <dt><code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> - <dd>菜单主题按钮的唯一标识符。</dd> -</dl> - -<dl> - <dt><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> - <dd>显示在菜单上的文字，例如 文件 或 编辑。</dd> -</dl> - -<dl> - <dt><code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> - <dd>该布尔属性决定菜单是否被禁用。虽然可以，但很少情况需要禁止整个菜单。该属性值可以被设置为<code>true</code>或者<code>false</code>。当然，后者是默认值。</dd> -</dl> - -<dl> - <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> - <dd>该属性值是用户可以按键盘激活菜单项的键值。该字母通常在菜单主题后面以下划线方式显示。Mozilla会视标签属性根据在此指定的字符给它加上下划线。因此，需要指定一个在文本中存在的字符（尽管指定的键不在文本中也能正常工作）。</dd> -</dl> - -<div class="float-right"><img alt="Image:menubar-ex2.jpg"></div> - -<p><code>menu</code>元素通常放置在菜单栏上，尽管这不是必需的。但是，这将出现不一样的显示结果。此处的图片展示了早期没有菜单栏的示例看起来的效果。</p> - -<h4 id="menupopup.E5.85.83.E7.B4.A0" name="menupopup.E5.85.83.E7.B4.A0"><code>menupopup</code>元素</h4> - -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>元素创建包括菜单命令的弹出窗口。它是一种类型的框，默认为垂直布局。如果你想要并且将<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>s</code>放置在一排中，你可以将它改为水平布局。通常仅有<code>menuitem</code>s元素和<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code>s</code>放置在<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>中。你可以放置任何元素在<code>menupopup</code>中，但是在Macintosh中它们都会被忽略。</p> - -<h4 id="menuitem.E5.85.83.E7.B4.A0" name="menuitem.E5.85.83.E7.B4.A0"><code>menuitem</code>元素</h4> - -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>元素与<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>元素非常相似并且拥有部分相同属性。</p> - -<dl> - <dt><code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> - <dd>菜单项的唯一标识符。</dd> -</dl> - -<dl> - <dt><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> - <dd>显示在菜单项上的文本，例如打开 或 保存。</dd> -</dl> - -<dl> - <dt><code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> - <dd>该布尔属性值决定菜单项是否被禁止。该属性可以被设置为<code>true</code>或者<code>false</code>，但默认值是后者。</dd> -</dl> - -<dl> - <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> - <dd>该值是用户可以使用键盘激活菜单项的键值。该字母通常以下划线方式显示于菜单主题后面。Mozilla将视<code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性值给指定的字母加上下划线。因此，你需要指定在文本中存在的字符。</dd> -</dl> - -<dl> - <dt><code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></dt> - <dd>该值指定显示在菜单命令末尾的快捷键文本提示。但是它还没有与<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>进行键的关联。我们在后面再研究如何<a href="cn/XUL_Tutorial/Keyboard_Shortcuts">do this later</a>.</dd> -</dl> - -<h4 id="menuseparator.E5.85.83.E7.B4.A0" name="menuseparator.E5.85.83.E7.B4.A0"><code>menuseparator</code>元素</h4> - -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>没有特别的属性。它只是在两个相信的菜单元素之间创建一条水平的分割线。</p> - -<p>下一节，我们会学习一些<a href="cn/XUL_%e6%95%99%e7%a8%8b/%e6%9b%b4%e5%a4%9a%e8%8f%9c%e5%8d%95%e7%89%b9%e6%80%a7">更多菜单特性</a>.</p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Toolbars" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:More_Menu_Features">下一页 »</a></p> -</div><p></p> - -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/splitters/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/splitters/index.html deleted file mode 100644 index 172190858c..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/splitters/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 分割线 -slug: Mozilla/Tech/XUL/Tutorial/Splitters -translation_of: Archive/Mozilla/XUL/Tutorial/Splitters ---- -<p>我们来看看如何向一个窗口添加分隔线。</p> -<h3 id="分隔box"> 分隔box</h3> -<p>有时候你可能会想将一个窗口分成两节，而使用户可以改变这两节的尺寸。一个例子是mozilla的浏览器窗口，你可以通过拖动两个结构之间的小条来改变侧边栏的尺寸。你也可以点击旁边的标记隐藏这个侧边栏</p> -<h4 id="元素splitter">元素splitter</h4> -<p>这个特性是由一个叫做splitter的元素来实现的。它可以在两个节之间创建一个较小的条，可以让用户来改变两边的大小。你可以将splitter放在任何想要放置的地方，这样就可以改变在同一个格子里前后元素的大小了当在水平box中放置一个splitter的时候，将会水平的改变大小。当放在竖直的box中的时候，就可以改变竖直方向的大小了。</p> -<p>元素splitter的用法如下：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><splitter</p> - <p> id="identifier"</p> - <p> state="open"</p> - <p> collapse="before"</p> - <p> resizebefore="closest"</p> - <p> resizeafter="closest"></p> - </td> - </tr> - </tbody> -</table> -<p>属性如下：</p> -<p>属性id 全局唯一标识</p> -<p>属性state 指出splitter的状态。默认设为open，将分割面板分开，否则设置为collapse，将其中一个隐藏，另一个占据整个空间</p> -<p>属性collapse 这表明当点击隐藏标记的时候隐藏哪一边。设置为before则隐藏前面的元素，如果设置为after则隐藏分割线后面的元素。如果设置为none，也是默认的值，当点击隐藏标记的时候都不会隐藏。</p> -<p>属性resizebefore 当分割线被拖动的时候。其左边或者上面的元素会改变大小。这一属性说明哪一个元素改变大小。设置为closest会使左边离分割线最近的立即改变大小，设置为farther则左边离分割线最远的元素将会最先改变大小。默认值为closest。</p> -<p>属性resizeafter当分割线被拖动的时候。其右边或者下面的元素会改变大小。这一属性说明哪一个元素改变大小。设置为closest会使右边离分割线最近的立即改变大小，设置为farther则右边离分割线最远的元素会改变大小。这个属性还可以设置为grow，这种情况下分割线右边的部分不会改变大小，相反的，整个格子会改变大小。默认值为closest。</p> -<p>如果设置了collapse属性，还可以添加一个grippy元素在splitter里面，这个元素可以用来销毁元素。</p> -<p>分割线旁边的元素的width和height属性会在splitter拖动的时候进行调整。准确的说是根据resizebefore和resizeafter属性来调整。</p> -<h4 id="Splitter的例子">Splitter的例子</h4> -<p>例子1：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><hbox flex="1"></p> - <p> <iframe id="content-1" width="60" height="20" src="w1.html"/></p> - <p> <splitter collapse="before" resizeafter="farthest"></p> - <p> <grippy/></p> - <p> </splitter></p> - <p> <iframe id="content-2" width="60" height="20" src="w2.html"/></p> - <p> <iframe id="content-3" width="60" height="20" src="w3.html"/></p> - <p> <iframe id="content-4" width="60" height="20" src="w4.html"/></p> - <p></hbox></p> - </td> - </tr> - </tbody> -</table> -<p><img alt=""></p> -<p>这里创建了4个iframe以及一个分割线，分割线在第一个和第二个iframe之间。属性collapse设置为before，也就是当隐藏标记点击的时候，第一个frame会消失。</p> -<p>这个splitter的resizeafter属性设置为farther。也就是说当拖动splitter的时候，其后最远的元素会改变大小。也就是frame4会改变大小。</p> -<p>没有对resizebefore设置值，因此其默认值是closest。这里，分割线之前只有一个splitter，因此frame1会改变大小。</p> -<p>Frame2和frame3只有在frame4达到最小值时才会改变大小。</p> -<p><img alt="" style="">、<img alt=""></p> -<p>也可以在一个窗口上放置多个splitter。同样的也可以隐藏其他元素，而不仅仅是frame。</p> -<h3 id="查找文件对话框例子"> 查找文件对话框例子</h3> -<p>让我们看看给查找文件对话框添加一个splitter之后是个什么样子。一个可能是在对话框中添加查找结果，在搜索选项和按钮之间。分割线可以让你隐藏或者查看搜索结果。</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p></tabbox></p> - <p> </p> - <p> <iframe src="results.html"/></p> - <p> <splitter collapse="before" resizeafter="grow"></p> - <p> <grippy/></p> - <p> </splitter></p> - <p> </p> - <p> <hbox></p> - </td> - </tr> - </tbody> -</table> -<p>这里添加了一个iframe和一个splitter。这里在tabbox之后不需要spacer了，可以将其移除。Frame的内容包含在一个'<code>results.html</code>'文件里面，现在创建这个文件并将其放在任何地方。以后我们会用一个结果列表来代替它。</p> -<p>这个splitter的collapse属性设置为before，就是说分割线之前的元素将会被隐藏。这里就是这个iframe。下面又一个隐藏标志点击之后的图。</p> -<p>属性resizeafter设置为grow，这样分割线之后的元素将会在分割线向下拖动的时候向下移动。Frame中的内容的大小可以变到任何尺寸。注意，窗口自己不会改变大小，你也会发现这是一个水平分割线，因为是放在竖直box里面的。</p> -<p>正常状态</p> -<p><img alt=""></p> -<p>隐藏后状态</p> -<p><img alt=""></p> -<p>接下来将会介绍如何创建工具条</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html deleted file mode 100644 index 40712df82e..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: 定位层(stack堆) -slug: Mozilla/Tech/XUL/Tutorial/Stack_Positioning -translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning ---- -<p>这一节描述如何为堆中的元素进行定位</p> -<h3 id="堆子元素的位置">堆子元素的位置</h3> -<p>通常，stack的子元素为与堆的大小匹配会自动扩展。然而，你也可以将其子元素放在指定的位置。例如，如果一个堆有两个按钮子元素，一个房子左边缘20像素，距顶部50像素。第二个可以房子距离左边缘100像素而距离顶部5像素。</p> -<p>可以通过设置两个属性来指定子元素的位置，水平方向上使用left属性，竖直方向上使用top属性。如果你在stack的子元素中不指定这些属性，就会扩展以匹配堆的尺寸。</p> -<p>例子1：</p> -<p><img alt="" style=""></p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><stack></p> - <p> <button label="Goblins" left="5" top="5"/></p> - <p> <button label="Trolls" left="60" top="20"/></p> - <p> <button label="Vampires" left="10" top="60"/></p> - <p></stack></p> - </td> - </tr> - </tbody> -</table> -<p>这个堆有三个子元素，每个元素都使用了left和top属性来定位。这里所有的子元素都是按钮，但是并不是所有的子元素必须是同一类型。可以是任意元素，包括格子或者其他堆。</p> -<p>堆的大小由所有紫云山的位置来决定，总会将大小调整到所有子元素都可见的大小。如果你将left属性设置为400，堆将会有一个400加上元素宽度的宽度。你也可以通过各种样式的不同属性如width。Max-width等来重写这个尺寸。</p> -<p>也可以通过脚本来调整left和top的值，这样就会使元素移动。堆的优点是当一个指定位置元素位置发生变化时，其他元素不会受到影响。如果在格子中移动子元素，其他元素可能会动态的改它们的位置。</p> -<p>你也可以将元素重叠起来。当绘制子元素的时候，元素会按照它们出现在堆中的顺序出现。就是说，第一个子元素在最后面。最后一个元素出现在顶部。你可以使用DOM函数来改变子元素的顺序。</p> -<p>在响应鼠标事件的时候，顶部的元素会最先获取这个事件。也就是说如果有两个按钮重叠起来了，最上面的那个按钮会捕获到鼠标点击的事件。</p> -<p>下一节描述标签格子（tabboxes），与面板相似但有自己的外观</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/stacks_and_decks/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/stacks_and_decks/index.html deleted file mode 100644 index 39aa1762a1..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/stacks_and_decks/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: 层和卡片 -slug: Mozilla/Tech/XUL/Tutorial/Stacks_and_Decks -translation_of: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks ---- -<p>有时候需要将元素按照一系列重叠的卡片一样进行显示。堆和面板元素可以达到这一目的。</p> -<h3 id="容器"> 容器</h3> -<p>每一个XUL格子元素都是一个可以容纳其他元素的容器。有很多具有特殊样式的格子，例如工具条和标签面板。标签box可以创建不带有任何特殊属性的最简单格子。然而，具有特殊样式的格子与常规的格子一样对其内部的元素进行排列，只是他们有附加特性而已。</p> -<p>事实上，很多组件可以容纳其他元素。我们已经看到了按钮可以容纳除了默认元素之外的其他元素。滚动条也是也是一种特殊的格子类型，如果你不提供元素的话，他们会自己创建自己的元素。它也会自己处理滑块的运动。</p> -<p>接下来的几节，我们会介绍一些用来容纳其他元素的元素。他们都是有特殊样式的格子，可以将格子的所有属性都用在这些元素上。</p> -<h3 id="堆"> 堆</h3> -<p>元素stack是一个简单的格子，与其他格子的工作模式一样，只是它的子元素将会处于所有其他元素的最上面。第一个子元素会在最下面。第二个紧接着第一个，接着是第三个，等等。在一个堆中可以堆上任意多的元素。</p> -<p>属性orient没有什么意义，因为堆中的子元素都是一个在一个的上面，而不是一个紧挨一个的。堆的大小由最大的子元素的大小决定。但你可以使用CSS属性的width，height，min-width和其他相关属性来控制堆和他的子元素。</p> -<p>元素stack可以在需要为已经存在的元素添加状态指示器时使用。例如，进度条可能会用一个直条和上面一个label来创建。</p> -<h4 id="带有阴影的堆">带有阴影的堆</h4> -<p>为了方便的使用stack元素，可能需要为它仿制很多CSS属性。比如像下面这样为它创建一个文字阴影的效果：</p> -<p>例子1：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><stack></p> - <p> <description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/></p> - <p> <description value="Shadowed" style="color: red; font-size: 15pt;"/></p> - <p></stack></p> - </td> - </tr> - </tbody> -</table> -<p><img alt=""></p> -<p>两个description元素都创建了一个大小为15点的文字。首先是通过在左边和顶部添加一个1像素的偏移。这样的结果是重复绘制文字'Shadowed'但会与另一个有一点点的偏移。</p> -<p>这种方法的比使用text-shadow有一些优势，因为你可以完全将主体文字与阴</p> -<p>影分开进行控制。它可以有自己的字体，下划线或者大小。（你甚至可以制作阴影闪烁的效果）。这在mozilla不支持CSS的文字阴影时也很有用。缺点是阴影的存在使得堆的尺寸变大了。。阴影效果对于创建禁用的按钮的外观很有用：</p> -<p>例子2：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><stack style="background-color: #C0C0C0"></p> - <p> <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/></p> - <p> <description value="Disabled" style="color: grey;"/></p> - <p></stack></p> - </td> - </tr> - </tbody> -</table> -<p>这样安排文字和阴影颜色在某些平台上会产生禁用的外观</p> -<p>注意，鼠标点击或者按键按下的事件是在堆上顶部元素，即堆中的最后一个元素。就意味着按钮只有是堆中最后一个元素的时候才能工作。</p> -<h3 id="面板"> 面板</h3> -<p>元素deck也是和stack一样只在顶部显示一个子元素，但是面板一次只显示一个子元素。这对向导接口非常有用，其中一系列相似的面板顺序显示。你可以通过使面板中的内容发生变化而只创建一个窗口，而不是创建多个独立的窗口和导航按钮。</p> -<p>与堆相似，deck元素的直接子元素组成ianb的页面。面板的显示页面可以通过改变设置selectedIndex属性来控制显示出来的子元素。索引是一个数字，可以指定哪一个页面将会显示。页面索引起始值为0.因此第一个子元素的page0，第二个是page1，等等。</p> -<p>例子3：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><deck selectedIndex="2"></p> - <p> <description value="This is the first page"/></p> - <p> <button label="This is the second page"/></p> - <p> <box></p> - <p> <description value="This is the third page"/></p> - <p> <button label="This is also the third page"/></p> - <p> </box></p> - <p></deck></p> - </td> - </tr> - </tbody> -</table> -<p>这里有三个页面，默认为显示第三个。第三个页面是一个格子，里面有两个元素。格子里面的元素和格子本身组成了一个页面。面板的大小是子元素中最大的大小这里就是第三个页面。</p> -<p>你可以在脚本中改变selectedIndex属性来对页面进行切换。更多关于这个方面的介绍在事件和DOM的章节</p> -<p>下一节将会描述如何定位堆中的元素</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/styling_a_tree/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/styling_a_tree/index.html deleted file mode 100644 index 7574e792b7..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/styling_a_tree/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 样式化树 -slug: Mozilla/Tech/XUL/Tutorial/Styling_a_Tree -translation_of: Archive/Mozilla/XUL/Tutorial/Styling_a_Tree ---- -<p>XUL:<treerow properties="makeItBlue"></p> -<p>css:<br> - treechildren::-moz-tree-row(makeItBlue)<br> - {<br> - background-color: blue;<br> - }</p> -<p>可以参考这里 <a href="/en/XUL_Tutorial/Styling_a_Tree" name="____">点击这里</a></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html deleted file mode 100644 index c8c3e527c7..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: 分页组 -slug: Mozilla/Tech/XUL/Tutorial/Tabboxes -tags: - - tabbox -translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes ---- -<p>选择对话框中经常出现标签页，这里我们将会了解如何创建它们。</p> -<h3 id="分页组">分页组</h3> -<p>在应用程序的选择窗口中经常出现典型的标签页。在窗口的顶部会出现一系列的标签。用户可以通过点击相应的标签来查看不同的选项集合。当你有很多选项而无法在一个屏幕中完全显示的时候非常有用。</p> -<p>XUL也提供了一种方法来创建这样的对话框。包含五种新的元素，下面详细的介绍这几个元素。</p> -<p><strong>tabbox</strong> 最外层的格子，含有顶部的标签和标签页。</p> -<p><strong>tabs </strong>含有独立标签页的内部格。即这是一排标签</p> -<p><strong>tabpanels</strong> 页面的容器</p> -<p><strong>tabpanel </strong>一个单独的页面的主体。你可以将一个页面的内容放在里面。第一个tabpanel对应于第一个标签页，第二个对应第二个，等等。</p> -<p>元素tabbox含有两个子元素，一个tabs元素和一个tabpanels元素。用法如下：</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><tabbox id="tablist"></p> - <p> <tabs></p> - <p> <!-- tab elements go here --></p> - <p> </tabs></p> - <p> <tabpanels></p> - <p> <!-- tabpanel elements go here --></p> - <p> </tabpanels></p> - <p></tabbox></p> - </td> - </tr> - </tbody> -</table> -<p>元素tab放在tabs里面，这与常规的box很像。元素tab与box其实没有什么不同的。Tab可以容纳任何类型的元素。不同的是，tab的面板一次只显示一个页面，与deck很相像。</p> -<p>每个标签页的内容应该放到每个tabpanel元素内部。他们不是在tab元素内部的。Tab元素的内容出现在顶部。</p> -<p>每个tabpanel元素成为显示时的一个页面。最大的页面的尺寸用作整个tabbox的尺寸。</p> -<h4 id="分页组实例">分页组实例</h4> -<p>例子1：</p> -<p><img alt=""></p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><tabbox></p> - <p> <tabs></p> - <p> <tab label="Mail"/></p> - <p> <tab label="News"/></p> - <p> </tabs></p> - <p> <tabpanels></p> - <p> <tabpanel id="mailtab"></p> - <p> <checkbox label="Automatically check for mail"/></p> - <p> </tabpanel></p> - <p> <tabpanel id="newstab"></p> - <p> <button label="Clear News Buffer"/></p> - <p> </tabpanel></p> - <p> </tabpanels></p> - <p></tabbox></p> - </td> - </tr> - </tbody> -</table> -<p>这里有两个标签页，一个mail一个news。当点击news标签的时候，带有'Clear News Buffer'按钮的页面会出现。</p> -<p>当前选择的标签元素有一个selected属性值为true。这可以改变当前选择的标签页。一次只能有一个标签的selected属性为true。</p> -<h4 id="标签页的位置">标签页的位置</h4> -<p>最后，你可以改变标签页的位置以使他们出现这个页面的任意位置。没有特殊的语法。你可以简单的使用orient和dir属性来实现。注意在布局的时候记住tab元素就像一般的格子，而tabbox元素更像是常规的竖直容器，tabs元素更像是默认为水平的容器格子。</p> -<p>例如，要将标签放到左边，可以将tabs元素的朝向改为竖直的。然后调整tabbox使其具有水平朝向。这会使得标签出现在左边而不是顶部。注意改变tabpanels元素的朝向没有影响，因为标签页是相互覆盖的。</p> -<p>也可以通过将tabs元素放在tabpanels元素后面来实现将标签放在右边或者下面。或者，也可以将tabbox的dir属性设置为reverse来实现。但是你最好将标签放在上面，否则在某些流行的主题下可能看起来不是很好。</p> -<h3 id="为查找文件对话框添加标签页。">为查找文件对话框添加标签页。</h3> -<p>让我们为查找文件的对话框添加第二个panel。我们将会创建一个选项标签（并默认选择）来包含一些搜索选项。这可能不是最好的接口。但我们使用它来说明标签的使用。顶部的文字和搜索选择各种需要放在第一个标签中，我们将会添加一些选项在第二个标签中。进度条和按钮可以放在主窗口中，在标签外部。</p> -<table> - <tbody> - <tr> - <td style="width: 568px;"> - <p><vbox flex="1"></p> - <p> </p> - <p><tabbox selectedIndex="1"></p> - <p> <tabs></p> - <p> <tab label="Search"/></p> - <p> <tab label="Options"/></p> - <p> </tabs></p> - <p> <tabpanels></p> - <p> <tabpanel id="searchpanel" orient="vertical"></p> - <p> </p> - <p> <description></p> - <p> Enter your search criteria below and select the Find button to begin</p> - <p> the search.</p> - <p> </description></p> - <p> </p> - <p> <spacer style="height: 10px"/></p> - <p> </p> - <p> <groupbox orient="horizontal"></p> - <p> <caption label="Search Criteria"/></p> - <p> </p> - <p> <menulist id="searchtype"></p> - <p> <menupopup></p> - <p> <menuitem label="Name"/></p> - <p> <menuitem label="Size"/></p> - <p> <menuitem label="Date Modified"/></p> - <p> </menupopup></p> - <p> </menulist></p> - <p> <spacer style="width: 10px;"/></p> - <p> <menulist id="searchmode"></p> - <p> <menupopup></p> - <p> <menuitem label="Is"/></p> - <p> <menuitem label="Is Not"/></p> - <p> </menupopup></p> - <p> </menulist></p> - <p> </p> - <p> <spacer style="height: 10px"/></p> - <p> <textbox id="find-text" flex="1" style="min-width: 15em;"/></p> - <p> </p> - <p> </groupbox></p> - <p> </tabpanel></p> - <p> <tabpanel id="optionspanel" orient="vertical"></p> - <p> <checkbox id="casecheck" label="Case Sensitive Search"/></p> - <p> <checkbox id="wordscheck" label="Match Entire Filename"/></p> - <p> </tabpanel></p> - <p> </tabpanels></p> - <p></tabbox></p> - </td> - </tr> - </tbody> -</table> -<p><img alt=""></p> -<p>元素tab硬件放在了窗口的主要内容外面。你可以看到两标签，search和options。点击每一个都会将相应的标签页显示出来。如图中显示，两个选项出现在第二个标签上。第一个标签看起来与之前的更像，除了有顶部的标签之外。</p> -<p>下一节，我们来看看如何创建内容的网格（grid）</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/templates/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/templates/index.html deleted file mode 100644 index 01b1eb0cf4..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/templates/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: XUL_教程/模板（Templates） -slug: Mozilla/Tech/XUL/Tutorial/Templates -translation_of: Archive/Mozilla/XUL/Tutorial/Templates ---- -<p> </p> -<p>在这一小节，我们将学习如果使用数据填充元素。</p> -<h3 id="填充元素（Populating_Elements）">填充元素（Populating Elements）</h3> -<p>XUL提供了通过RDF数据建立元素的方法，来源可以是一个RDF文件，也可以是一个内部数据源。Mozilla本身提供了很多数据源，比如书签、历史记录、邮件列表等。我们在下一小节会针对这部分进行更多的讨论。</p> -<p>我们通常会向treeitems和menuitems这类的元素填充数据。但你完全可以根据实际情况向其他元素填充数据。在这里，我们还是从这些其他元素入手开始讲解，因为实现树型和菜单需要的代码比较多。</p> -<p>为了使用RDF数据建立元素，首先要为这些元素提供一个复制用的模板。实际上，我们只是提供了第一个元素而已，剩下的元素都是在第一个元素的基础上构造出来的。</p> -<p>模板是通过<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素建立的。<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素里用于放置那些新构建元素的内容。<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素要置于包含新构建元素的容器中，比如说你要创建一个<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_tree.html">tree</a>元素，那么就要把<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素置于<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_tree.html">tree</a>元素中。</p> -<p>上面这些通过一个简单的例子来说明会很直观明了，在这个例子中，我们会为每个书签都建立 一个按钮。Mozilla提供了一个书签的数据源，我们可以直接拿来使用，为了简便，我们只取最顶层的书签（也可能是文件夹）来建立按钮。对于那些子标 签，我们可能会通过树型结构或者菜单等来显示这种层叠的结构。</p> -<p>这个例子和其他直接引用内部数据源的程序一样，只能通过chrome开头的地址来调用，处于安全考虑，Mozilla禁止从其他数据源间接调用内部数据源。</p> -<p>为了运行这个例子，你需要建立一个chrome包并把文件都置于包中，这时就可以通过在浏览器的地址栏输入chrome地址运行了。</p> -<p>示例 9.2.1: <a class="external" href="http://www.xulplanet.com/tutorials/xultu/examples/ex_templates_1.xul.txt">下载</a></p> -<div class="examplec"> - <pre><vbox datasources="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:bookmarks" ref="NC:BookmarksRoot" flex="1"> - <<a class="bodytag" href="http://www.yeeyan.com/articles/tag/template"><em>template</em></a>> - <button uri="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> - </<a class="bodytag" href="http://www.yeeyan.com/articles/tag/template"><em>template</em></a>> -</vbox></pre> -</div> -<p><img align="right" alt="" height="166" src="http://www.xulplanet.com/tutorials/xultu/images/templates1.jpg" width="107"> 在这个例子中，建立了一个vbox，vbox里面包含一列的按钮，每个按钮都对应一个顶级的书签。你可以注意到<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素内只有一个<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a>元素。这个唯一的按钮元素是所有按钮元素建立的基础。旁边的图片就是最后的运行结果，每个按钮对应于一个书签。</p> -<p>你可以试着在保持这个例子打开的情况下，向浏览器添加一个书签，你会发现这个例子中会立刻添加一个按钮，对应于你刚刚添加的那个书签。（你可能需要重新激活这个窗口，这样才能看到结果）</p> -<p>模板本身被置于vbox中，而box容器有两个特性专门是为模板服务的，可以标识数据的来源。第一个是datasource特性，用来声明用来建立元素的RDF数据源。在这个例子中，对应的是<a class="bodytag external" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:bookmarks。你一定可以猜到这个RDF对应的就是书签数据源。这个数据源是由Mozilla提供的。如果要使用自己的数据源，只需要在datasources特性中指定自定义的RDF地址就可以，就像下面例子中的一样：</p> -<div class="sample"> - <pre><box datasources="chrome://zoo/content/animals.<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>" - ref="http://www.some-fictitious-zoo.com/all-animals"></pre> -</div> -<p>也还可以同时设置多个数据源，只要在不同的数据源地址间加上空格就可以。这通常用于显示多个来源的数据。</p> -<p>ref特性用于说明你想从数据源获取哪些数据。在这个书签的例子中，使用的是NC:<span class="aval">BookmarksRoot</span>，对应的是最顶级的书签。ref具体取什么值依赖于要使用的数据源。如果你使用自己的RDF文件作为数据源，ref的value值通常被设置为Bag、Seq或者Alt元素的about特性的值。</p> -<p>当向box容器添加了这两个特性以后，就可以使用模板来生成元素了。模板里的元素要使用不同的方式来声明。你应该注意到上面例子中，<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a>元素设置了uri特性，同时为label特性设置了一个特殊含义的值。</p> -<p>模板里的特性值如果是以“<a class="bodytag external" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:”开头的，就表明这个值是要从数据源中读取的。在上面的例子中，label特性就是这种情况。value中除了“rdf:”的剩余部分由命名空间和属性名称组成，表明要使用数据源中的name属性。如果你对这部分感到迷糊，请重新阅读《<a class="external" href="http://cuimingda.com/2008/10/xul-tutorial-introduction-to-rdf.html">XUL教程 - 9.1 - RDF概述</a>》的最后一段。那个例子描述了RDF中的资源是怎样被指向的。在这里我们只使用name属性，当然其他属性在这里也是可以使用的。</p> -<p>我们为这些按钮的label特性设置了特定的URI，是因为我们需要用RDF数据源中的name属性来填充label。我们可以把URI放到按钮的 任何一个特性中，放到其他元素中也是可以的。不管放到哪个特性中，都会被数据源中相应的值替换。最后的结果，就是我们用按钮label显示出了每个书签的 名字。</p> -<p>下面的例子展示了我们如何为按钮的其他特性设置数据源。当然我们已经假设数据源中包含相应的资源。如果需要的资源在数据源中没有被找到，那么特性的value就会被设置为空字符串。</p> -<div class="sample"> - <pre><button class="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:http://www.example.com/rdf#class" - uri="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:*" - label="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:http://www.example.com/rdf#name"/> - crop="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:http://www.example.com/rdf#crop"/></pre> -</div> -<p>如上面例子所示，你可以通过不同的数据源动态设置元素的每个特性。</p> -<p>uri特性用定义开始生成内容的元素。之前的内容只会生成一次，而之后的内容会每次都生成。在后面通过模板建立树型元素的例子中，我们将对这点进行更加详细的阐述。</p> -<p>当我们将这些特性添加进模板所在的容器后（在这个例子中是box），就可以使用外部数据来建立各种有趣的列表了。我们当然可以在模板中多放几个元素，也可以在任何元素的特性上添加RDF引用，下面就是一个例子：</p> -<p>实例 9.2.2: <a class="external" href="http://www.xulplanet.com/tutorials/xultu/examples/ex_templates_2.xul.txt">下载</a></p> -<div class="examplec"> - <pre><vbox datasources="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:bookmarks" ref="NC:BookmarksRoot" flex="1"> - <<a class="bodytag" href="http://www.yeeyan.com/articles/tag/template"><em>template</em></a>> - <vbox uri="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:*"> - <button label="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:http://home.netscape.com/NC-rdf#Name"/> - <label value="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:http://home.netscape.com/NC-rdf#URL"/> - </vbox> - </<a class="bodytag" href="http://www.yeeyan.com/articles/tag/template"><em>template</em></a>> -</vbox></pre> -</div> -<p>这个模板建立了一个vbox，容器中每个书签都对应于一个按钮和一个标签。按钮上显示的是书签的名字，标签上显示的是书签的地址。</p> -<p>新建立的元素从功能上来说，和直接向XUL中添加数据是没有差别的。每一个通过模板建立的元素都会被自动添加id特性，用来标识这个资源，你也可以使用这个特性对每个资源进行引用。</p> -<p>你还可以在同一个特性的值中，定义多个不同的资源，中间用空格分隔，下面就是一个例子。可以在<a class="external" href="http://www.xulplanet.com/tutorials/xultu/templateex.html">这里</a>查看更多关于资源定义的语法。</p> -<p>示例 9.2.3: <a class="external" href="http://www.xulplanet.com/tutorials/xultu/examples/ex_templates_3.xul.txt">源代码</a></p> -<div class="examplec"> - <pre><vbox datasources="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:bookmarks" ref="NC:BookmarksRoot" - flex="1"> - <<a class="bodytag" href="http://www.yeeyan.com/articles/tag/template"><em>template</em></a>> - <label uri="<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:*" value="rdf:http://home.netscape.com/NC-rdf#Name -<a class="bodytag" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:http://home.netscape.com/NC-rdf#URL"/> - </<a class="bodytag" href="http://www.yeeyan.com/articles/tag/template"><em>template</em></a>> -</vbox></pre> -</div> -<h3 id="建立模板（How_Templates_are_Built）">建立模板（How Templates are Built）</h3> -<p>一旦为元素设置了datasources特性，就表明这个元素将会通过模板来生成。要明确这点，是否生成内容不是由<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>标 记决定的，而是由atasources特性来决定的。只要设置了这个特性，元素就会自动被添加一个叫做构造器的对象。这个对象的责任就是通过模板来构建内 容。在JavaSciprt中，你可以使用builder属性来访问这个构造器对象，但通常你只有在需要手动重新生成内容的时候才需要调用这个对象。</p> -<p>构造器有两种类型，最常用的是内容构造器（content builder），另外一种是树型构造器（tree builder），当然只有在构造树型元素的时候才用的到。</p> -<p>内容构造器从<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素中读取内容，并在每行都进行复制。比如在上面的例子中如果有十个书签，就会构建10个<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_label.html">label</a>元素，并都会添加到<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_vbox.html">vbox</a>元素下面。如果你使用DOM函数对树型结构进行遍历，你可以找到这些元素，并可以调用它们的属性。这些元素最终会在界面显示出来，但是<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素本身是不会显示的，虽然在DOM中是可以找到<a class="tag external" href="http://www.xulplanet.com/references/elemref/ref_template.html">template</a>元素的。另外，每个label的id特性将被设置为RDF资源中对应的值。</p> -<p>内容构造器总是从uri="<a class="bodytag external" href="http://www.yeeyan.com/articles/tag/rdf"><em>rdf</em></a>:*"定义的地方开始操作。如果uri特性所在的元素不是在第一行，那么之前的元素都值将被建立一次。下面的例子中会建立一个hbox，hbox内会用一组label来填充。</p> -<p>--------------------------------------------------------------------------------</p> -<p>本文完整内容请参见：</p> -<p><a class="external" href="http://cuimingda.com/2008/10/xul-tutorial-templates.html">http://cuimingda.com/2008/10/xul-tutorial-templates.html</a></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/the_box_model/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/the_box_model/index.html deleted file mode 100644 index be0bf1832c..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/the_box_model/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: XUL_教程/分组方式 -slug: Mozilla/Tech/XUL/Tutorial/The_Box_Model -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Element_Positioning">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E7.AE.B1.E4.BD.93.E5.85.A5.E9.97.A8" name=".E7.AE.B1.E4.BD.93.E5.85.A5.E9.97.A8">盒模型入门</h3> -<p>在XUL里主要的布局叫做“盒模型”。这个模型允许你把窗口分割成连续的盒子。在盒子里面元素可以按水平或垂直方向排列。通过将一系列的盒子结合在一起，使用定位格和元素的<code><code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>属性，你可以控制窗口的布局。</p> -<p>虽然盒模型是XUL元素布局的基础部份，但原理并不复杂，只有几条简单的规则。一个盒子可以将它的子盒布置在两个方向之一，水平或垂直。水平盒子将它的元素进行水平排列，而垂直盒子将它的元素进行垂直排列。你可以把一个盒子想像HTML表格中的一行或一列。除了可以在子元素中放置不同的属性还可以使用一些样式表属性来控制子盒的精确定位和尺寸。</p> -<h4 id=".E7.AE.B1.E4.BD.93.E4.BE.8B.E5.AD.90" name=".E7.AE.B1.E4.BD.93.E4.BE.8B.E5.AD.90">盒的例子</h4> -<p>下面是定义盒子的基本语法:</p> -<pre><hbox> - <!-- horizontal elements --> -</hbox> - -<vbox> - <!-- vertical elements --> -</vbox> -</pre> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>元素用来创建一个水平方向的盒子。每个放在<code>hbox</code>中的元素将被水平地排成一行。<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> 元素用来创建一个垂直方向的盒子。添加进来的元素将会被垂直地放在前一个的下面。</p> -<p>同样有一个普通的<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>元素默认是水平方向的，和<code>hbox</code>的意思相同。然而，你可以使用<code><code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属生去操作盒子的方向。你可以设置这个属性的值为<code>horizontal</code> 去创建一个水平的盒子和<code>vertical</code>去创建一个垂直的盒子。</p> -<p>因此，下面两行的效果是一样的:</p> -<pre><vbox></vbox> - -<box orient="vertical"></box> -</pre> -<p>下面例子展示怎么垂直放置三个按钮。</p> -<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul">View</a></p> -<div class="float-right"> - <img alt="Image:boxes-ex1.png" class="internal" src="/@api/deki/files/2644/=Boxes-ex1.png"></div> -<pre><vbox> - <button id="yes" label="Yes"/> - <button id="no" label="No"/> - <</pre> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/the_chrome_url/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/the_chrome_url/index.html deleted file mode 100644 index 817869f2d2..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/the_chrome_url/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 关于Chrome URL -slug: Mozilla/Tech/XUL/Tutorial/The_Chrome_URL -translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL ---- -<div> - <a href="cn/XUL_%e6%95%99%e7%a8%8b/XUL%e7%9a%84%e7%bb%93%e6%9e%84"><< 前页</a> <a href="cn">后页 >></a></div> -<h3 id="Chrome.E7.BB.9F.E4.B8.80.E8.B5.84.E6.BA.90.E5.AE.9A.E4.BD.8D.E5.99.A8.28URL.29" name="Chrome.E7.BB.9F.E4.B8.80.E8.B5.84.E6.BA.90.E5.AE.9A.E4.BD.8D.E5.99.A8.28URL.29">Chrome统一资源定位器(URL)</h3> -<p>下面的部分将描述如何关联（引用）XUL文档和其他的chrome文件。</p> -<p><big><strong>Chrome统一资源定位器(URL)</strong></big></p> -<p>XUL文件可以像HTML文件一样被一个普通的HTTP URL（或者其他任何类型的URL）关联。尽管如此，用于Mozilla的chrome系统的软件包可以用特殊的chrome URL关联。Mozilla自带的软件包伴随Mozilla已经安装好，但你可以注册自己的包。</p> -<p>软件包安装过之后具有不受安全限制的优点——安全限制对于很多程序来说都是必须的。相对于其他类型的URL来说，另外一个好处是它们可以自动处理多个主题和语言选项。举例来说，一条chrome URL允许你关联（引用）某个主题当中的一个文件，比如说是图片，与此同时你不需要知道用户当前使用的是哪个主题。只要不同主题里面的对应文件名相同，你总是可以通过chrome URL来引用这个文件。Mozilla会找到文件的路径并返回正确的数据。这也就意味着，软件包安装的位置与是否能访问它没有关系。chrome URL与文件物理存放位置无关，这使得写含有很多文件的程序变得简单了，因为你无需关心文件位置的细节。</p> -<p>Chrome统一资源定位器(URL)的基本语法规则如下：</p> -<table> - <tbody> - <tr> - <td> - <pre> -chrome://<package name>/<part>/<file.xul></pre> - </td> - </tr> - </tbody> -</table> -<p>上面的<code><package name></code>是软件包的名字，比如是编辑器或聊天工具。<code><part></code>可以是'content'，'skin'或'locale'，这取决于你的需要。'file.xul'是文件名。</p> -<p><strong>示例</strong>：<a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p> -<p>这个例子关联到的是'content'中的messenger窗口。将'content'替换为'skin'并改掉文件名，就可以指向皮肤中的某个文件。同样的，用'locale'替换'content'后，我们就能指向语言中的文件。</p> -<p>当你打开一个chrome URL，Mozilla在其已安装包列表中查找，尝试定位到与URL中包名相同的JAR文件和目录.chrome URL和JAR文件之间的对应关系由chrome目录中的'清单'(manifest)文件来指定。如果你把messenger.jar移动到别的地方，并相应地更新'清单'文件中的信息，Thunderbird(译者注：此处Thunderbird是上文中提到的messenger)仍然能够正确工作，因为它不依赖特定的安装位置。利用chrome URL我们可以脱离Mozilla中例如包的位置等细节信息。类似地，如果用户改变了主题，'skin'部分的chrome URL实际所指向的就是另外的一套文件，但XUL和脚本无需改变。</p> -<p>下面是更多的示例。注意例子中URL是如何避免指定使用某个特定的主题或者语言，以及如何避免指定特定目录的。</p> -<table> - <tbody> - <tr> - <td> - <pre> -chrome://messenger/content/messenger.xul -chrome://messenger/content/attach.js -chrome://messenger/skin/icons/folder-inbox.png -chrome://messenger/locale/messenger.dtd -</pre> - </td> - </tr> - </tbody> -</table> -<p>要关联到子目录，你只要在chrome URL的最后加上目录名就可以。下面的这些URL关联到bookmarks窗口，这里列出来了适合Mozilla和Firefox的版本——因为两者软件包的名字有差异：</p> -<table> - <tbody> - <tr> - <td> - <pre> -chrome://communicator/content/bookmarks/bookmarksManager.xul (Mozilla) -chrome://browser/content/bookmarks/bookmarksManager.xul (Firefox) -</pre> - </td> - </tr> - </tbody> -</table> -<p>chrome URL在任何普通URL可以使用地方一样能用，甚至你可以在Mozilla的浏览器窗口（译者注：地址栏）中直接输入。当在浏览器地址栏中输入上面提到的URL之一，你会发现窗口会像网页一样显示出来，而且大多数功能和在单独的窗口一样可以正常使用。但是，有些对话框可能工作不正常，那可能是因为需要由父窗口在打开他们的时候传递一些参数。</p> -<p>你还将会遇到不带文件名的chrome URL，比如：</p> -<table> - <tbody> - <tr> - <td> - <pre> -chrome://browser/content/</pre> - </td> - </tr> - </tbody> -</table> -<p>这种情况只有给出了包名和模块名。这类的引用（关联）会自动从目录中选择一个合适的文件。对于content来说，与包同名并带有.xul后缀的文件会被选中。在上面的例子中，显示的会是'browser.xul'。对于messenger包，messenger.xul会被显示。当你创建自己的包时，你需要为你的主窗口创建一个和软件包同名的文件，这样它就能被上面这种短形式的URL关联。这样带来的便利是只要用户知道包的名字，他就能打这个应用程序。当然了，对于修改浏览器界面的扩展(extensions)来说，用户不需要知道URL，因为扩展通过用户界面来显示自身。</p> -<p>对于皮肤而言，包名.css被选中；对于语言，选中的是包名.dtd。</p> -<p>需要记住的是，chrome URL与它在磁盘上的位置无关。URL的第一部分两个元素是包名和模块（content,skin或locale）。将内容文件放在叫'content'的目录是很普遍的事情，这和惯例不符，这些文件会被放在一个完全不同的结构中。</p> -<hr> -<p>(<a href="/cn" title="cn">下一部分</a>) 在接下来的部分，我们将看看如何创建'清单'(manifest)文件和包。</p> -<div> - <a href="/cn/XUL_%E6%95%99%E7%A8%8B/XUL%E7%9A%84%E7%BB%93%E6%9E%84" title="cn/XUL_教程/XUL的结构"><< 前页</a> <a href="/cn/XUL_%E6%95%99%E7%A8%8B/%E5%85%B3%E4%BA%8EContents.rdf" title="cn/XUL_教程/关于Contents.rdf">后页 >></a></div> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/toolbars/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/toolbars/index.html deleted file mode 100644 index 4ba0a4e2e3..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/toolbars/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: XUL_教程/工具栏 -slug: Mozilla/Tech/XUL/Tutorial/Toolbars -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars ---- -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Splitters" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Simple_Menu_Bars">下一页 »</a></p> -</div><p></p> -<p>工具栏通常沿着窗口顶部放置，并包含许多完成普通功能的按钮。XUL有一个创建工具栏的方法。</p> -<p>A toolbar is usually placed along the top of a window and contains a number of buttons that perform common functions. XUL has a method to create toolbars.</p> -<p><br> - 工具栏</p> -<p>Like a number of elements, XUL toolbars are a type of box.像许多的界面要素， XUL工具栏也是一种界面框。 Usually, a row of buttons would appear in the toolbar, but any element can be placed in a toolbar.通常，工具栏里会出现一排按钮，但任何界面要素都可以放到工具栏里。 For example, the Mozilla browser window contains a textbox that displays the page URL.举例来说， mozilla浏览器窗口包含一个文本框 ，显示了该网页的url 。</p> -<p>Toolbars may be placed on any side of the window, either horizontally or vertically.工具栏可被水平或垂直地放置在窗口的任一边。 Of course you wouldn't normally put a textbox in a vertical toolbar.当然，通常你不会把文本框放在一个垂直工具栏里。 Actually, because toolbars are just boxes they can actually go anywhere you want, even in the middle of a window.事实上，因为工具栏只是个界面框，它们能去你想要它们去的任何地方，即使是窗口的中间。 Typically however, a set of toolbars would appear along the top of a window.通常，一组工具栏会出现在窗口的顶部。 When more than one toolbar is placed next to each other, they are typically grouped together in something called a 'toolbox'.当多个工具栏一个接一个放置时，他们通常被一个叫做'工具箱'的东西集合在一起。 [ edit ] A simple toolbar inside a toolbox [编辑] 一个简单的工具栏里面一个工具箱</p> -<p>Source View 来源 查看 形象： toolbar1.jpg</p> -<pre class="eval"><toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="Back"/> <toolbarbutton label="Forward"/> </toolbar> </toolbox> <工具箱> <toolbar id="nav-toolbar"> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> < /工具栏> < /工具箱> -</pre> -<p>This has created a toolbar containing two buttons, a Back button and a Forward button.这就造成了一种工具列载有两个按钮，有一个备份(后退)按钮和前进按钮。 The one toolbar has been placed inside the toolbox.在一个工具栏已被置于内工具箱。 This has involved four new tags, which are described here.这涉及到4个新的标签，这是形容这里。</p> -<p>toolbox 工具箱</p> -<pre class="eval"> A box that contains toolbars.一个方框，其中包含工具栏。 -</pre> -<p>toolbar 工具栏</p> -<pre class="eval"> A single toolbar that contains toolbar items such as buttons.一个单一的工具栏包含了工具栏的项目，如按钮。 -</pre> -<p>toolbarbutton toolbarbutton</p> -<pre class="eval"> A button on a toolbar, which has all the same features of a regular button but is usually drawn differently.一个按钮，一个工具条，其中已全部一样的特点，定期按钮，但通常是取用不同。 -</pre> -<p>The toolbar is the main element that creates the actual toolbar. 该工具是主要因素，造成了实际的工具栏。 Inside it are placed the individual toolbar items, usually buttons, but they can be other elements.它里面放置了个人工具栏的项目，通常是按钮，但是它们可以被其他元素。</p> -<p>In the example above, only one toolbar was created.在上面的例子中，只有一个工具栏被创建。 Multiple toolbars can be created just as easily by adding more toolbar elements after the first one.更多工具栏的创建就想在第一个工具栏中添加元素一样容易。</p> -<p>The toolbox is a container for toolbars. 工具箱是一个容器工具栏。 In some applications, you will have several toolbars along the top of the window.在某些应用中，你将有几个工具栏沿顶部的窗口。 You can put them all inside a toolbox .你可以把它们都内一个工具箱。</p> -<p>You do not have to put toolbar elements inside a toolbox .你不须要把工具栏的内容里面一个工具箱。 [ edit ] Our find files example [编辑] 我们找到档案为例</p> -<p>Let's add a toolbar to the find files dialog.让我们添加一个工具栏，向找到的文件对话框。 We don't really need one but we'll add one anyway to demonstrate its use.我们并不真的需要一个，但我们将增加一个无论如何，以证明其使用。 Two buttons will be added, an Open button and a Save button.两个按钮将被增加，一个打开按钮和一个储存按钮。 Presumably, they would allow the user to save search results and re-open them later.据推测，它们将使用户能够保存搜寻结果，或重新打开。</p> -<pre class="eval"><vbox flex="1"> <toolbox> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="Open"/> <toolbarbutton id="savesearch" label="Save"/> </toolbar> </toolbox> <tabbox> < vbox挠性= " 1 " > <toolbox> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="open"/> <toolbarbutton id="savesearch" label="save"/> < /工具栏> < /工具箱> <tabbox> -</pre> -<p>形象： toolbar5.png</p> -<p>A toolbar with two buttons has been added here.工具栏上有两个按钮已被添加在这里。 In the image, you can see them appear horizontally along the top.在图像，你可以看到他们出现横向沿顶部。 Notice that the toolbar has been placed inside the vertical box just above the tabbox.公告说，该工具已被置于内垂直票房略高于tabbox 。 This is because we need the vertical orientation so that the toolbar will appear above everything else.这是因为，我们需要的垂直方向，使该工具栏将出现高于一切。</p> -<p>The find files example so far: Source View这一发现的档案为例，目前为止：源观</p> -<p>Next, we'll find out how to add a menu bar to a window .明年，我们将看看如何添加一个菜单栏，以一个窗口 。</p> -<p> </p> -<h3 id="Adding_a_Toolbar" name="Adding_a_Toolbar">Adding a Toolbar</h3> -<p>Like a number of elements, XUL toolbars are a type of box. Usually, a row of <a href="cn/XUL_Tutorial/Adding_Buttons">buttons</a> would appear in the toolbar, but any element can be placed in a toolbar. For example, the Mozilla browser window contains a <a href="cn/XUL_Tutorial/Input_Controls#Text_Entry_Fields">textbox</a> that displays the page URL.</p> -<p>Toolbars may be placed on any side of the window, either horizontally or vertically. Of course you wouldn't normally put a textbox in a vertical toolbar. Actually, because toolbars are just boxes they can actually go anywhere you want, even in the middle of a window. Typically however, a set of toolbars would appear along the top of a window. When more than one toolbar is placed next to each other, they are typically grouped together in something called a 'toolbox'.</p> -<h5 id="A_simple_toolbar_inside_a_toolbox" name="A_simple_toolbar_inside_a_toolbox">A simple <code>toolbar</code> inside a <code>toolbox</code></h5> -<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul">View</a></p> -<div class="float-right"> - <img alt="Image:toolbar1.jpg"></div> -<pre><toolbox> - <toolbar id="nav-toolbar"> - <toolbarbutton label="Back"/> - <toolbarbutton label="Forward"/> - </toolbar> -</toolbox> -</pre> -<p>This has created a toolbar containing two buttons, a Back button and a Forward button. The one toolbar has been placed inside the toolbox. This has involved four new tags, which are described here.</p> -<dl> - <dt> - <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dt> - <dd> - A box that contains toolbars.</dd> -</dl> -<dl> - <dt> - <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></dt> - <dd> - A single toolbar that contains toolbar items such as buttons.</dd> -</dl> -<dl> - <dt> - <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code></dt> - <dd> - A button on a toolbar, which has all the same features of a regular button but is usually drawn differently.</dd> -</dl> -<p>The <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> is the main element that creates the actual toolbar. Inside it are placed the individual <code>toolbar</code> items, usually buttons, but they can be other elements.</p> -<p>In the example above, only one toolbar was created. Multiple toolbars can be created just as easily by adding more <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> elements after the first one.</p> -<p>The <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> is a container for toolbars. In some applications, you will have several toolbars along the top of the window. You can put them all inside a <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>.</p> -<p>You do not have to put <code>toolbar</code> elements inside a <code>toolbox</code>.</p> -<div class="highlight"> - <h4 id="Our_find_files_example" name="Our_find_files_example">Our find files example</h4> - <p>Let's add a toolbar to the find files dialog. We don't really need one but we'll add one anyway to demonstrate its use. Two buttons will be added, an Open button and a Save button. Presumably, they would allow the user to save search results and re-open them later. <code> </code></p> - <pre class="eval"><vbox flex="1"> - <span class="highlightblue"><toolbox> - <toolbar id="findfiles-toolbar"> - <toolbarbutton id="opensearch" label="Open"/> - <toolbarbutton id="savesearch" label="Save"/> - </toolbar> - </toolbox></span> - <tabbox> -</pre> - <p> </p> - <div> - <img alt="Image:toolbar5.png"></div> - <p>A toolbar with two buttons has been added here. In the image, you can see them appear horizontally along the top. Notice that the toolbar has been placed inside the vertical box just above the tabbox. This is because we need the vertical orientation so that the toolbar will appear above everything else.</p> - <p>The find files example so far: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul">View</a></p> -</div> -<p>Next, we'll find out how to add a <a href="cn/XUL_Tutorial/Simple_Menu_Bars">menu bar to a window</a>.</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Splitters" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Simple_Menu_Bars">下一页 »</a></p> -</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/trees/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/trees/index.html deleted file mode 100644 index 6162b31e6a..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/trees/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: 树结构 -slug: Mozilla/Tech/XUL/Tutorial/Trees -translation_of: Archive/Mozilla/XUL/Tutorial/Trees ---- -<p>XUL提一种供用树的形式而创建表格或是分层结构的列表。</p> -<h2 id="树">树</h2> -<p>在XUL中树是个很复杂的元素。它用于有层次需求的结构来显示行列中的文本。树允许用户对某行进行排序、调整、隐藏等操作。比如火狐中的书签项和雷鸟邮箱结构都是用树做成的。</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/using_spacers/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/using_spacers/index.html deleted file mode 100644 index 7501f87216..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/using_spacers/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: XUL_教程/使用定位格 -slug: Mozilla/Tech/XUL/Tutorial/Using_Spacers -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:More_Button_Features">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E6.B7.BB.E5.8A.A0.E5.AE.9A.E4.BD.8D.E6.A0.BC" name=".E6.B7.BB.E5.8A.A0.E5.AE.9A.E4.BD.8D.E6.A0.BC">添加定位格</h3> -<p>开发用户界面的问题之一是每个用户都有不同的显示器。一些用户使用较高分辨率的较大显示器而另外一些用户使用的是较低分辨率的。另外，不同的平台对用户界面的也不同。如果加上多语言支持，每种语言之间用到的文字的需要的显示空间也不一样。</p> -<p>应用程序的窗口通常需要考虑支持多平台和多语言。某些平台和用户接口工具提供组件让用户可以轻易地去调整适合他们自己的大小和位置。(例如Java平台使用布局管理器。)</p> -<p>XUL为元素提供能力自动调整位置和大小。 就像我们看到的文件查找窗口的尺寸是刚好能将元素放在它里面。每次我们增中一些东西，窗口就会变得更大。</p> -<p>XUL使用一个叫做“箱状模型”(Box Model)的布局系统。我们将在<a href="/cn/XUL_教程/箱状模型" title="cn/XUL_教程/箱状模型">下一节</a>中讲到。它允许你将一个窗口划分成连续的盒子存放元素。盒子可以基于你定义的规格调整位置和大小。到现在，可以知道 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 元素是属于盒子的类型。</p> -<p>在了解什么是盒子之前，我们将引入其他用于布局的XUL元素，<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>。定位格很简单，它只需要一个属性，稍后将会说明。一个简单的定位格看起来就像下面:</p> -<pre class="eval"><spacer flex="1"/> -</pre> -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>用于在窗口中放置一片空白。它多数用于用户调整窗口大小时它可以拉伸或者收缩。 这将决定是将按钮放置在一个窗口的左边或底边还是放在右边或底边 。将要看到，你可以使用一连串的空格去创建许多布局效果。</p> -<p>上面这个语法中，定位格有一个属性，叫做<code><code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>。这用于定义定位格的弹性。在上面的例子中，定位格为1的弹性。这会创建一个有<em>弹力</em>的定位格。如果你直接将它放在窗口里，这个定位格会在窗口的大小被改变时自动伸缩。</p> -<p>马上我们将会把一个定位格添加到我们的文件查找例子中。首先，让我们看一下当调整当前对话框时会发生什么。</p> -<p><img alt="Image:springs1.jpg" class="internal" src="/@api/deki/files/2683/=Springs1.jpg"></p> -<p>如果你改变文件查找窗口的尺寸，你会看到所有的元素都保持着它们原来的位置。它们中没有一个移动或调整了大小虽然窗口里有更多的空间。让我们再看一下当增加了一个定位格后在文本输入框和查找按钮之间发生了什么。</p> -<p><img alt="Image:springs2.jpg" class="internal" src="/@api/deki/files/2684/=Springs2.jpg"></p> -<p>在添加了定位格后再调整窗口的大小时，你可以看到定位格填充了空白。按钮被推到了最后面。</p> -<div class="highlight"> - <h5 id=".E6.88.91.E4.BB.AC.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E7.9A.84.E4.BE.8B.E5.AD.90" name=".E6.88.91.E4.BB.AC.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E7.9A.84.E4.BE.8B.E5.AD.90">我们文件查找的例子</h5> - <p>下面的代码增加一个定位格。把它插入到查找按钮的前面。</p> - <pre class="eval"><span class="highlightred"><spacer flex="1"/></span> - -<button id="find-button" label="Find"/> -</pre> -</div> -<h3 id=".E5.85.B3.E4.BA.8E.E5.BC.B9.E6.80.A7.E7.9A.84.E6.9B.B4.E5.A4.9A.E4.BF.A1.E6.81.AF" name=".E5.85.B3.E4.BA.8E.E5.BC.B9.E6.80.A7.E7.9A.84.E6.9B.B4.E5.A4.9A.E4.BF.A1.E6.81.AF">关于弹性的更多信息</h3> -<p>XUL在窗口中放置有弹性元素是通过计算元素合适的宽度和高度然后再添加空间。除非你指定元素的宽度和高度信息，元素的内容就决定了它的默认大小。你需要注意在对话框中的取消按钮总是设置了宽度因此它能在它里面放文字。如果你创建一个具有非常长的标签的按钮，按钮的默认大小将会很大使得有足够的空间可以放下标签。其它的元素，像是文本输入框会选择一个合适的默认大小。</p> -<p><code>flex</code>属性用于指定元素可以改变自身的尺寸去填充它所在的盒子 (在这个例子中的窗口)。我们已经看到了应用于定位格的弹性属性，但它是可以应用于所有的元素的。例如，你可以改成能自动调整大小的查找按钮。</p> -<p><img alt="Image:springs3.jpg" class="internal" src="/@api/deki/files/2685/=Springs3.jpg"></p> -<p>如图所示，在查找按钮上增中了弹性属性，在窗口进行大小调整时它也会跟着调整。定位格实际上是没有指定任何东西。它实际上就是一个隐藏的按钮。它除了不会在屏幕上显示外大部分的使用方法就是和按钮一样的。</p> -<p>你可以从上面的图片得到更多的提示。不仅是在查找按钮的尺寸增大了，而且在主标签和按钮之间显示了更多的空间。当然，这是我们之前放进去的定位格。它也调整了自己的尺寸。如果你更深入地观察，你会注意到在定位格和按钮之间分到的尺寸改变值是相等的。定位格拿到了一半的空余空间，按钮拿到了另外一半。</p> -<p>我们看到这个效果是因为定位格和查找按钮都使用了 <code>flex</code> 属性。因为都是可伸缩的，按钮和定位格的尺寸调整是相等的。</p> -<p>如果你想设置一个元素是另一个的两倍大小要怎么做呢？你可以给<code>flex</code>属性设一个更高的值。弹性元素的值是一个概率。如果一个元素的弹性值为1而另一个的弹性值是2，第二个比第一个大多少倍。在效果上，一个弹性为2说的是这个元素有一个弹性是二次的元素弹性增长。</p> -<p><code>flex</code>属性不能用来指定一个真实的尺寸。作为替换，它说明在一个盒容器的子容器中填入多少的空白空间。我们将在下节看到盒子。一旦子盒的默认尺寸被指定，弹性值就被用于在对盒子中剩余的空白空间进行分割。例如，如果一个盒子有200像素宽并且包括2个可伸缩的按钮，第一个是50像素和另外一个是90像素，在它们的外面将还会有60像素的空白空间。如果两个按钮都有弹性的值为1，空白空间将会被分配给每个按钮伸缩长度为30像素。如果第二个按钮的弹性增加到2，第一个按钮将得到20像素的扩展空间，而第二个按钮将得到40像素的扩展空间。</p> -<p><code>flex</code>属性可以被放在任何元素，但是当它直接放在XUL元素里面时就只有一个意思。意思是说即使你可以把<code>flex</code>放在HTML元素中，如果元素不是一个非盒元素它就得不到效果。</p> -<h5 id=".E5.BC.B9.E6.80.A7.E4.BE.8B.E5.AD.90" name=".E5.BC.B9.E6.80.A7.E4.BE.8B.E5.AD.90">弹性例子</h5> -<pre class="eval">例1: - <button label="Find" flex="1"/> - <button label="Cancel" flex="1"/> - -例2: - <button label="Find" flex="1"/> - <button label="Cancel" flex="10"/> - -例3: - <button label="Find" flex="2"/> - <button label="Replace"/> - <button label="Cancel" flex="4"/> - -例4: - <button label="Find" flex="2"/> - <button label="Replace" flex="2"/> - <button label="Cancel" flex="3"/> - -例5: - <html:div> - <button label="Find" flex="2"/> - <button label="Replace" flex="2"/> - </html:div> - -例6: - <button label="Find" flex="145"/> - <button label="Replace" flex="145"/> -</pre> -<dl> - <dt> - 例1 </dt> - <dd> - 在这个例子中两个按钮平均分配弹性值。两个按钮的将会被平均地改变大小。</dd> - <dt> - 例2 </dt> - <dd> - 这，两个按钮都是可伸缩的，但查找按钮的伸展率是取消按钮的十分之一，因为取消按钮的弹性值为10，可用的空间被分割成查找按钮的一份和取消按钮的十分。</dd> - <dt> - 例3 </dt> - <dd> - 这里只有其中的两个按钮设置为可弹性。替换按钮将不会改变它的尺寸而另外两个会。 取消按钮将会比查找按钮大一倍因为它的弹性值是查找按钮的弹性值的二倍。</dd> - <dt> - 例4 </dt> - <dd> - 在这个例子，三个按钮都具有可弹性。查找和替换按钮的尺寸将是相同的，但取消按钮会更大一些(多50%的扩展)。</dd> - <dt> - 例5 </dt> - <dd> - 这里，两个按钮都放在<code>div</code>元素里面。按钮不是放在盒子里所以可申缩性在这里是无意义的。效果和没有使用<code>flex</code>属性是相同的。</dd> - <dt> - 例6 </dt> - <dd> - 因为两个按钮的弹性值是一样的，他们将得到相同的弹性。这样还不如用1来代替145。在这个例子中没有什么不同。建议你使用可读性更好的低数值。</dd> -</dl> -<p>注意像按钮的标签和按钮的最小尺寸等其他的因素会影响到按钮的尺寸。事实上，按钮不会收缩到比它的标签还小。</p> -<p>将弹性值设为0与没有设置<code>flex</code>属性的效果是一样的。它的意思是元素不使用弹性。你有时可以看到弹性值会指定为一个百分率。这没有特殊的意义，这已经是处理过的就算没有百分号在那里。</p> -<p>你也许注意到在你垂直改变查找对话框的尺寸时，按钮也会调整它自己的尺寸去适应窗口的高度。这是因为所有在窗口中的按钮都有隐含的垂直弹性。在下一节我们将会学习如何去改变这个值。</p> -<div class="highlight"> - <h5 id=".E5.88.B0.E7.9B.AE.E5.89.8D.E4.B8.BA.E6.AD.A2.E7.9A.84.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E4.BE.8B.E5.AD.90" name=".E5.88.B0.E7.9B.AE.E5.89.8D.E4.B8.BA.E6.AD.A2.E7.9A.84.E6.96.87.E4.BB.B6.E6.9F.A5.E6.89.BE.E4.BE.8B.E5.AD.90">到目前为止的文件查找例子</h5> - <p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">View</a></p> -</div> -<p>接下来，我们将要学习 <a href="/cn/XUL_教程/更多按钮特性" title="cn/XUL_教程/更多按钮特性">按钮的更多特性</a>。</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:More_Button_Features">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/using_xbl_from_stylesheets/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/using_xbl_from_stylesheets/index.html deleted file mode 100644 index 04c8ab7123..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/using_xbl_from_stylesheets/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: 通过CSS和XBL创建可复用的内容 -slug: Mozilla/Tech/XUL/Tutorial/Using_XBL_from_stylesheets -translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets ---- -<p></p><section id="Quick_Links"> -<ol><li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/What_is_CSS">What is CSS?</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">Why use CSS?</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/How_CSS_works">How CSS works</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">Selectors</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">Readable CSS</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles">Text styles</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color">Color</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content">Content</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists">Lists</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes">Boxes</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout">Layout</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media">Media</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript and CSS</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS">SVG and CSS</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/XBL_bindings">XBL binding</a></li> - <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> -</ol> -</section><p></p> - -<p>本页面介绍了如何在Mozilla中使用CSS来提升在复杂应用结构中的代码与资源的复用。</p> - -<div class="note"> -<p>提示：XBL不能通过HTTP来加载，所以XBL只能使用file:///scheme或者通过附加代码的方式进行本地访问。</p> -</div> - -<p>你可以应用这项技术于一个简单的示例。</p> - -<h3 id="Information:_XBL_bindings" name="Information:_XBL_bindings">Information: XBL bindings</h3> - -<p>由标记语言和CSS提供的这个结构并不适用于组件需要自包含和复用的复杂应用。你可以将样式表(stylesheet)和脚本(script)放置在独立的文件中。但是你必须将这些文件加载到文档（html）中，最后形成一个整体。</p> - -<p>另一个结构上的限制则与内容有关。你可以使用CSS为选中的元素提供内容，但是内容限定在文本和图片，并且内容的位置只能是选中的元素前或者后。</p> - -<p>Mozilla provides a mechanism that overcomes these limitations: <em>XBL</em> (XML Bindings Language). You can use XBL to link selected elements to their own:</p> - -<p>Mozilla提供了一个机制来克服上述限制：XBL(XML Bindings Language)。</p> - -<ul> - <li>Stylesheets</li> - <li>Content</li> - <li>Properties and methods</li> - <li>Event handlers</li> -</ul> - -<p>因此你可以避免在文档中链接每一个组件，你可以使用自包含的组件来方便维护和复用。</p> - -<table style="background-color: rgb(244, 244, 244); border: 1px solid rgb(51, 102, 187); margin-bottom: 1em; padding: 1em; width: 100%;"> - <caption>More details</caption> - <tbody> - <tr> - <td>For more information about XBL bindings, see the <a href="/en-US/docs/XBL" title="en/XBL">XBL</a> page in this wiki.</td> - </tr> - </tbody> -</table> - -<h3 id="Action:_An_XBL_demonstration" name="Action:_An_XBL_demonstration">Action: An XBL demonstration</h3> - -<p>创建一个新的html文档，doc6.html。将下面的内容拷贝到文件中：</p> - -<div style="width: 56em;"> -<pre class="brush: html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - -<HEAD> -<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE> -<LINK rel="stylesheet" type="text/css" href="style6.css"> -</HEAD> - -<BODY> -<H1>XBL demonstration</H1> -<DIV id="square">Click Me</DIV> -</BODY> - -</HTML> -</pre> -</div> - -<p>创建一个新的CSS文件，style6.css。这个样式表包含了文档的样式。将下面的内容拷贝到CSS文件中：</p> - -<div style="width: 56em;"> -<pre class="brush: css">/*** XBL demonstration ***/ -#square { - -moz-binding: url("square.xbl#square"); - } -</pre> -</div> - -<p>Make a new text file, <code>square.xbl</code>. This file contains the XBL binding. Copy and paste the content from here:</p> - -<p>创建一个新的文本文件，square.xbl。这个文件包含了XBL的绑定关系。将下面的内容拷贝到文件中。</p> - -<div style=""> -<pre class="brush: xml"><?xml version="1.0"?> -<!DOCTYPE bindings> -<bindings xmlns="http://www.mozilla.org/xbl" - xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" - xmlns:html="http://www.w3.org/1999/xhtml"> - -<binding id="square"> - - <resources> - <stylesheet src="bind6.css"/> - </resources> - - <content> - <html:div anonid="square"/> - <xul:button anonid="button" type="button"> - <children/> - </xul:button> - </content> - - <implementation> - - <field name="square"><![CDATA[ - document.getAnonymousElementByAttribute(this, "anonid", "square") - ]]></field> - - <field name="button"><![CDATA[ - document.getAnonymousElementByAttribute(this, "anonid", "button") - ]]></field> - - <method name="doDemo"> - <body><![CDATA[ - this.square.style.backgroundColor = "#cf4" - this.square.style.marginLeft = "20em" - this.button.setAttribute("disabled", "true") - setTimeout(this.clearDemo, 2000, this) - ]]></body> - </method> - - <method name="clearDemo"> - <parameter name="me"/> - <body><![CDATA[ - me.square.style.backgroundColor = "transparent" - me.square.style.marginLeft = "0" - me.button.removeAttribute("disabled") - ]]></body> - </method> - - </implementation> - - <handlers> - <handler event="click" button="0"><![CDATA[ - if (event.originalTarget == this.button) this.doDemo() - ]]></handler> - </handlers> - - </binding> - -</bindings> -</pre> -</div> - -<p>Make a new CSS file, <code>bind6.css</code>. This separate stylesheet contains style for the binding. Copy and paste the content from here:</p> - -<p>创建一个新的CSS文件，bind6.css。这个独立的样式表包含了</p> - -<div style="width: 56em;"> -<pre class="brush: css">/*** XBL demonstration ***/ -[anonid="square"] { - width: 20em; - height: 20em; - border: 2px inset gray; - } - -[anonid="button"] { - margin-top: 1em; - padding: .5em 2em; - } -</pre> -</div> - -<p>在你的浏览器中打开文档然后按下按钮。</p> - -<p>这个维基页面并不支持JavaScript，所以无法再这里展示示例。示例看上去就如下面所示，分别是按下按钮之前和之后的效果。</p> - -<table> - <tbody> - <tr> - <td><img alt="xbldemo0.png" class="default internal" src="/@api/deki/files/3377/=xbldemo0.png" style="height: 224px; width: 322px;"></td> - <td><img alt="xbldemo1.png" class="default internal" src="/@api/deki/files/3378/=xbldemo1.png" style="height: 224px; width: 322px;"></td> - </tr> - </tbody> -</table> - -<p>关于这个示例的提示：</p> - -<ul> - <li>这个html文档如通常一样链接文档样式表，但是并没有链接任何JavaScript代码。</li> - <li>这个文档中并没有包含任何按钮。它只包含了按钮标签的文本。这个按钮通过绑定来添加。</li> - <li>这个文档样式表链接了绑定文件。</li> - <li>这个绑定文件链接了它自己的样式表，并且提供了它自己的内容和JavaScript代码。所以绑定文件是自包含的。</li> -</ul> - -<p>挑战</p> - -<table style="background-color: rgb(255, 255, 244); border: 1px solid rgb(51, 102, 187); margin-bottom: 0.5em; padding: 1em;"> - <caption> </caption> - <tbody> - <tr> - <td>Change the XBL file so that the square doubles in width when it changes color, instead of jumping to the right. - <p>Use the DOM Inspector tool to inspect the document, revealing the added content.</p> - - <p> </p> - </td> - </tr> - </tbody> -</table> - -<h3 id="What_next">What next?</h3> - -<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="/Talk:en/CSS/Getting_Started/XBL_bindings" title="Talk:en/CSS/Getting_Started/XBL_bindings">Discussion</a> page.</p> - -<p>In this demonstration, the square and the button make a self-contained <em>widget</em> that functions within an HTML document. Mozilla has a specialized markup language for creating user interfaces. The next page demonstrates it: <strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong>.</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/xbl介绍/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/xbl介绍/index.html deleted file mode 100644 index 6b6ef8288e..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/xbl介绍/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: XUL 教程 -slug: Mozilla/Tech/XUL/Tutorial/XBL介绍 -tags: - - XBL -translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL ---- -<p> </p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Property_Files" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Anonymous_Content">下一页 »</a></p> -</div><p></p> - -<p> </p> - -<p><a href="/en/XUL" title="en/XUL">XUL</a>有一个姐妹语言，<a href="/en/XBL" title="en/XBL">XBL</a>（可扩展绑定语言）。这种语言被用于声明 XUL 窗口控件的行为。</p> - -<h3 id="Bindings" name="Bindings">Bindings</h3> - -<p>你可以用 XUL 来为应用程序定义用户界面的外观。你可以通过 <a href="/zh-CN/XUL_Tutorial/Adding_Style_Sheets" title="zh-CN/XUL_Tutorial/Adding_Style_Sheets"> 应用样式</a>自定义元素的外观。你也可以通过改变样式以 <a href="/zh-CN/XUL_Tutorial/Creating_a_Skin" title="zh-CN/XUL_Tutorial/Creating_a_Skin">创建新皮肤</a>。所有元素的基础外观，比如 <a href="/zh-CN/XUL_Tutorial/Scroll_Bars" title="zh-CN/XUL_Tutorial/Scroll_Bars">滚动条</a> 和 <a href="/zh-CN/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" title="zh-CN/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">复选框</a>，都可以通过调整样式或设置元素参数来进行修改。然而，XUL 没有提供改变元素的工作方式（或添加一个可重用的新元素）的方法。例如，您可能想改变滚动条的运行方式，就需要用到 <a href="/en/XBL" title="en/XBL">XBL</a>。</p> - -<p>一个 XBL 文件包含一组绑定（binding）。每个绑定描述一个 XUL 控件的行为。例如，一个绑定可以和一个滚动条相关联。这个行为除却描述滚动条的属性于方法之外，还描述了组成滚动条的 XUL 元素。</p> - -<p>类似 XUL，XBL 是一种 XML 语言，所以它有与之相似的语法规范。下述例子展示了 XBL 文件的基础结构：</p> - -<pre class="brush: xml"><?xml version="1.0"?> -<bindings xmlns="http://www.mozilla.org/xbl"> - <binding id="binding1"> - <!-- content, property, method and event descriptions go here --> - </binding> - <binding id="binding2"> - <!-- content, property, method and event descriptions go here --> - </binding> -</bindings> -</pre> - -<p><code><code><a href="/zh-CN/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 元素是 XBL 文件的根元素，包含了一个或多个 <code><code><a href="/zh-CN/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 元素。每个 <code><code><a href="/zh-CN/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 元素都声明一个单独的 binding，<code>id</code> 属性可以用来确定 binding，就像上述的例子一样。模板有两个 binding，分别叫做 <code>binding1</code> 和 <code>binding2</code>。一个可与滚动条关联，另一个则与菜单关联。一个 binding 可以和任意 XUL 元素相关联。如果你使用 CSS 类，就能按需使用各种不同的 binding。注意上面模板中的 <code><code><a href="/zh-CN/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 元素的命名空间。它声明了我们所使用的 XBL 语法。</p> - -<p>将绑定文件的链接正确设为 CSS 中 <code><a href="/en/CSS/-moz-binding" title="en/CSS/-moz-binding">-moz-binding</a></code> 的值，就可以把一个 binding 绑定到元素上。例如：</p> - -<pre class="brush: css">scrollbar { - -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); -} -</pre> - -<p>URL 指向了 “<a class="external" rel="freelink">chrome://findfile/content/findfile.xml</a>” 文件中的 ID“binding1”。“#binding1”语法用于指向特定的 binding，很像指向 HTML 文件中的 anchor 标签的语法。通常你会（借助此语法）把所有的 binding 放进一个单独的文件里。例中结果是“binding1”将会描述所有的滚动条元素。如果您没用-moz-binding URL中的标签，就会用到XBL文件中的第一个binding。</p> - -<p>binding 声明了五种类型：</p> - -<ol> - <li>内容：添加到 binding 绑定到的元素的子元素</li> - <li>属性：添加到 binding 绑定到的元素的属性。它们能通过脚本存取。</li> - <li>方法：添加到 binding 绑定到的元素的方法。它们能从脚本调用。</li> - <li>事件：元素将响应的例如鼠标单击和按键这类事件。 binding能添加脚本，来提供默认操作。另外，能够定义新事件。</li> - <li>样式：被 XBL 定义的 binding 绑定到的元素所拥有的自定义样式的属性</li> -</ol> - -<h3 id="Binding_Example" name="Binding_Example">Binding 示例</h3> - -<p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 很通用，您能用它来创建自定义的窗口控件（虽然您能用任何元素，甚至自己构造的）。给一个 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 标签分配一个 <code>class</code> 属性，您就可以将 binding 连接到只属于该类的 box。比如下面的例子：</p> - -<p><strong>XUL (example.xul):</strong></p> - -<pre class="brush: xml"><?xml version="1.0"?> -<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> -<?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> - -<window - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - <box class="okcancelbuttons"/> -</window></pre> - -<p><strong>CSS (example.css):</strong></p> - -<pre class="brush: css">box.okcancelbuttons { - -moz-binding: url('chrome://example/skin/example.xml#okcancel'); -}</pre> - -<p><strong>XBL (example.xml):</strong></p> - -<pre class="brush: xml"><?xml version="1.0"?> -<bindings xmlns="http://www.mozilla.org/xbl" - xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - <binding id="okcancel"> - <content> - <xul:button label="OK"/> - <xul:button label="Cancel"/> - </content> - </binding> -</bindings></pre> - -<p>这个例子创建了一个有单个 box 的窗口，这个 box 已经声明过含有一个 <code>okcancelbuttons</code> 类。与文件相关的样式表阐述了含类 <code>okcancelbuttons</code> 的box有在XBL文件中定义的特定的binding。除 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 之外，可用其它元素，甚至自定义的标签。</p> - -<p>部分 XBL 的细节将在下一章描述。不过呢，总结来说，它使得在box里自动增加了两个按钮。一个 OK 按钮，一个 Cancel 按钮。</p> - -<p>在下一节中，我们将看看该如何 <a href="/en/XUL_Tutorial/Anonymous_Content" title="en/XUL_Tutorial/Anonymous_Content">使用 XBL 创建内容</a>。</p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Property_Files" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:Anonymous_Content">下一页 »</a></p> -</div><p></p> - -<p>/*以下疑似是历史残余链接…*/ </p> - -<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/xpcom_接口/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/xpcom_接口/index.html deleted file mode 100644 index fb2dbb3699..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/xpcom_接口/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: XPCOM 接口 -slug: Mozilla/Tech/XUL/Tutorial/XPCOM_接口 -translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces ---- -<p> </p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:XPCOM_Examples">下一页 »</a></p> -</div><p></p> - -<p> 本章简单的看看 <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> (跨平台组件对象模型)——Mozilla 使用的对象系统。</p> - -<h3 id="Calling_Native_Objects" name="Calling_Native_Objects">调用本地对象</h3> - -<p> 通过XUL我们可以建立一个复杂的用户界面，我们可以通过脚本来修改界面及处理任务。然而有很多事件是不能有JavaScript直接完成的，比如，我们像创建一个邮件程序，我们需要写一个脚本来连接到服务器发送好接收邮件，而JavaScript没有这个能力。</p> - -<p> 处理这种事情的唯一手段就是用本地代码写一个获得邮件的模块，同时也需要一个用脚本调用本地对象的简单方法。 Mozilla 通过了这样的模型—— <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> (Cross-platform Component Object Model)。</p> - -<div class="note">Mozilla 提供了不少XPCOM 组件及接口，并且大多数情况下，你不需要自己完成他们。通过学习本章，你可以在 <a class="external" href="http://xulplanet.com/references/xpcomref/">XULPlanet XPCOM Reference</a> 寻找合适的。</div> - -<h3 id="About_XPCOM" name="About_XPCOM">关于XPCOM</h3> - -<p> Mozilla 是有一系列组件构成的。每一个组件都处理特定的任务。比如，有一个处理菜单，按钮及元素的组件。组件又建立在一系列定义（接口）上。</p> - -<p> Mozilla 中的接口定义了在一个组件中需要实现的功能，组件是它的代码实现，每一个组件都要实现接口描述的功能。一个组件可以时多个接口，多个组件也可以实现同一个接口。</p> - -<p> 让我们来以‘文件’组件为例，需要创建一个描述‘文件’属性及功能的接口文件。文件需要有文件名、数据、大小等属性；删除、移动、复制等方法。</p> - -<p> 文件接口用字符文件描述而无需实现。实现的工作留给组件来完成，组件需要返回文件名、数据、大小的代码，以及复制、删除等代码。</p> - -<p> 我们不关心组件如何实现，只要它实现了接口。当然我们有不同的实现方法，并且对于不同的平台也会不同。然而，他们必须实现同样的接口，这样我们就可以利用从接口中得到的信息使用组件。</p> - -<p> Mozilla中接口通常以'nsI'或 'mozI'开头，这样就很容易找出接口。比如 <code>nsIAddressBook</code> 用于地址表， <code>nsISound</code> 用于声音文件 ， <code>nsILocalFile</code> 用于本地文件，Mozilla中的接口参见 <a href="/en/Interfaces" title="en/Interfaces">Interfaces</a>.</p> - -<p> XPCOM 组件是一种本地实现，也就是说他们可以做 JavaScript 不能做的事情。我们可以调用接口定义的由组件属性的任意方法，比如，如果我们有一个组件，它实现了 <code>nsISound</code> 接口我们就可以用它来放声音。</p> - -<h3 id="Creating_XPCOM_Objects" name="Creating_XPCOM_Objects">创建XPCOM 对象</h3> - -<p>调用 XPCOM 组件分三步</p> - -<ol> - <li>获取组件</li> - <li>获取组件实现的接口</li> - <li>调用所需函数</li> -</ol> - -<p> 如果我们做了前两步，最后一步可以无限制的使用，例如，我们想要重命名文件，这个方法定义在nsILocalFile 接口中。第一步得到文件组件。第二步，我们获取它实现了的nsILocalFile 接口，最后，调用接口通过的方法。这个接口用于代表单个文件。</p> - -<p> 我们知道接口长椅 'nsI' 或 'mozI'开头。组件通常像使用URI一样来引用，Mozilla 储存了当前注册的组件列表。像插件一样，用户可以添加新的组件。</p> - -<p> Mozilla 通过了一个文件组件，它实现了 <code><a href="/en/nsILocalFile" title="en/nsILocalFile">nsILocalFile</a></code>。可以通过<code><a class="link-mailto" href="mailto:'@mozilla.org" rel="freelink">'@mozilla.org</a>/file/local;1'</code>引用，这个字符串称作协议ID，语法如下：</p> - -<pre class="eval">@<internetdomain>/module[/submodule[...]];<version>[?<name>=<value>[&<name>=<value>[...]]] -</pre> - -<p> 其他组件也按相似的方法引用。</p> - -<p> 组件的协议 ID 用于获取组件，可以用下面的脚本得到组件。</p> - -<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); -</pre> - -<p> 一个文件组件返回并储存在变量 <em>aFile</em> 中，上例中的 <code><a href="/en/Components_object" title="en/Components_object">Components</a></code> 引用一个提供相关功能的全局对象。 这里，使用 <code>classes</code> 方法获得组件组，<code>classes</code> 方法返回可用组件的数组。得到不同的组件只需把双引号中的需要ID换成你需要的<span style="font-family: monospace;">，最后用</span><code>createInstance()</code>方法创建实例。</p> - -<p> 你需要检查 <code>createInstance()</code> 的返回值以确保非空，如果为空则表示所需组件不存在。</p> - -<p> 当然，到此为止，我们只引用了文件组件本身，为了使用它的函数，我们需要得到它的接口，本例为 <code><a href="/en/nsILocalFile" title="en/nsILocalFile">nsILocalFile</a></code>。我们再加一行。</p> - -<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); -if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile); -</pre> - -<p> <code>QueryInterface()</code> 是一个所以组件都通过的函数来返回特定的接口。函数有一个参数，你想得到的接口<code>Components</code>的 <code>interfaces</code> 方法包含一个可用接口的数组，这里把 nsILocalFile 作为参数传给 <code>QueryInterface()。结果是</code>aFile会引用它所实现了 nsILocalFile 接口的那部分。</p> - -<p> 上面的两行脚本可以用于获取任何组件及接口，只需更换组件名及接口名。下例，获得一个 sound 接口。</p> - -<pre>var sound = Components.classes["@mozilla.org/sound;1"].createInstance(); -if (sound) sound.QueryInterface(Components.interfaces.nsISound); -</pre> - -<p> XPCOM 接口可以继承其它的接口。这种接口拥有它自己的功能及它所继承的接口的功能<span style="font-family: monospace;">所有的接口都继承自顶级接口</span><code>nsISupports，它有一个函数由于支持</code>JavaScript—— <code>QueryInterface()</code>。因为所以的组件都实现 nsISupports 接口所以<code>QueryInterface()</code>对每个组件都有效。</p> - -<p> 一些组件可能会实现相同的接口。他们可能是原件的子类但不是必须的。组件可能都会实现 nsILocalFile接口，另外一个组件可能会实现多个接口。因为这个原因我们在调用函数之前需要得到定义函数的接口。</p> - -<p> 这里有一个简写形式，不过一般的我们把它分成多行。</p> - -<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); -</pre> - -<p> 这一行代码完成了上面两行所做的事。</p> - -<p> 如果你使用 <code>QueryInterface()</code> 引用一个本组件没有实现的接口，会抛出一个异常。如果不确定组件支持哪个接口请使用 <code><a href="/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></code> 操作符检查。</p> - -<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); -if (aFile instanceof Components.interfaces.nsILocalFile){ - // do something -} -</pre> - -<p> 如果aFile实现nsILocalFile 接口 <code><a href="/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></code>返回真，在块中就可以调用 <code>QueryInterface()</code>。</p> - -<h3 id="Calling_the_Functions_of_an_Interface" name="Calling_the_Functions_of_an_Interface">调用接口函数</h3> - -<p> 现在你有了一个关联到 nsILocalFile 接口组件的一个引用，你就可以调用nsILocalFile通过的函数。下面列出了 nsILocalFile提供的属性及方法。</p> - -<dl> - <dt>initWithPath </dt> - <dd>此方法用于初始化文件名及路径，第一个参数是文件路径如 '/usr/local/mozilla'.</dd> - <dt>leafName </dt> - <dd>除去文件路径的文件名。</dd> - <dt>fileSize </dt> - <dd>文件尺寸。</dd> - <dt>isDirectory() </dt> - <dd> nsILocalFile 代表目录返回真。</dd> - <dt>remove(recursive) </dt> - <dd>删除一个文件。如果recursive 参数为true，一个目录及其中的所以文件包括子目录均被删除。</dd> - <dt>copyTo(directory,newname) </dt> - <dd>把文件复制到新目录，并随意更改文件名。目录应保存在 nsILocalFile对象中。</dd> - <dt>moveTo(directory,newname) </dt> - <dd>把文件移到新目录或重命名。 目录应保存在 nsILocalFile对象中。</dd> -</dl> - -<p> 为了删除文件，需要将其赋值给 nsILocalFile。我们可以使用<code>initWithPath()</code> 方法指明所需文件，然后调用 <code>remove()</code> 函数，它带一个参数；是否递归删除，如下例。</p> - -<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); -if (aFile instanceof Components.interfaces.nsILocalFile){ - aFile.initWithPath("/mozilla/testfile.txt"); - aFile.remove(false); -} -</pre> - -<p> 以上代码会定位 /mozilla/testfile.txt 并删除它。试着把它与事件处理相连。你可以把文件名改为一个需要删除的文件并把它删除。</p> - -<p> 上面的函数中 copyTo() 及moveTo()可以用于复制及移动文件。注意他们移动的目标目录不是保存在字符串中而是nsILocalFile，也就是说你需要两个文件字节，下面是一个复制文件的例子。</p> - -<pre>function copyFile(sourcefile,destdir) -{ - // get a component for the file to copy - var aFile = Components.classes["@mozilla.org/file/local;1"] - .createInstance(Components.interfaces.nsILocalFile); - if (!aFile) return false; - - // get a component for the directory to copy to - var aDir = Components.classes["@mozilla.org/file/local;1"] - .createInstance(Components.interfaces.nsILocalFile); - if (!aDir) return false; - - // next, assign URLs to the file components - aFile.initWithPath(sourcefile); - aDir.initWithPath(destdir); - - // finally, copy the file, without renaming it - aFile.copyTo(aDir,null); -} - -copyFile("/mozilla/testfile.txt","/etc"); -</pre> - -<h3 id="XPCOM_Services" name="XPCOM_Services">XPCOM 服务器</h3> - -<p> 一些 XPCOM 组件是被称为服务器的特殊组件，你无需创建他们因为他们只能存在一个副本。服务器提供了类似于读取，设置全局数据或操作其他对象的方法。我们使用<code>getService()代替</code> <code>createInstance()</code>方法来获取服务器组件，除此以外，服务器并没有与其他组件相异之处。</p> - -<p> 如Mozilla通过了一个书签服务器，它允许你向当前用户的书签列表中添加书签。如下例。</p> - -<pre>var bmarks = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService(); -bmarks.QueryInterface(Components.interfaces.nsIBookmarksService); -bmarks.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null); -</pre> - -<p> 首先组件 "@mozilla.org/browser/bookmarks-service;1"被返回，并保存在变量 <code>bmarks</code>中，我们使用 <code>QueryInterface()</code> 得到 nsIBookmarksService 接口。这个接口通过的<code>addBookmarkImmediately()</code> 函数用于添加书签。函数的前两个参数是书签的 URL 和标题。第三个参数是书签类型通常是 0 ，最后一个参数是书签页的字符集，可为空。</p> - -<p> 下一章看看Mozilla为我们通过的接口。 <a href="/en/XUL_Tutorial/XPCOM_Examples" title="en/XUL_Tutorial/XPCOM_Examples">interfaces provided with Mozilla that we can use</a>.</p> - -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:XPCOM_Examples">下一页 »</a></p> -</div><p></p> - -<p>。</p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/xul_structure/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/xul_structure/index.html deleted file mode 100644 index 5983802be3..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/xul_structure/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: XUL_教程/XUL的结构 -slug: Mozilla/Tech/XUL/Tutorial/XUL_Structure -tags: - - XUL_Tutorial -translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/1-3_关于Chrome_URL">下一页 »</a></p> -</div><p></p> -<p> </p> -<h2 id=".5BXUL.E5.AD.A6.E4.B9.A0.5DXUL_Tutorial.28.E4.BA.8C.29_--_XUL_Structure" name=".5BXUL.E5.AD.A6.E4.B9.A0.5DXUL_Tutorial.28.E4.BA.8C.29_--_XUL_Structure">XUL是怎么被处理的？</h2> -<p>XUL与HTML的处理方式一样，先读出内容，然后解析为一棵对象树，再对每个对象作处理，使其显示出来。因为XUL是用来定义用户界面的，因此它与HTML用来做显示的功能一样。实际上，在Mozilla中，HTML和XUL，甚至SVG都是使用同样的底层代码来处理的。这样意味着一些CSS属性(注意是属性，不是CSS的全部)可以用在HTML和XUL。XUL同HTML一样可以从本地文件系统或web页面读取(不过这样多少有些功能上的限制)。另外就是打成一个包，可以让别人下载和安装。安装后的包就可以有一些更强的权限，象读文本文件，读用户参数和bookmark，以及访问其它系统特性。</p> -<p>包注册就是Firefox扩展的安装方式。包是由XUL、Javascript、CSS、HTML和图片等构成。文件名后缀为.xpi，它其实是一个zip格式的压缩包。象Firefox的扩展一般是通过overlay的方式，对Firefox进行扩展的，如增加菜单、工具条等。但这些功能的代码其实是与浏览器分离的，而且卸载也很容易(就象NewEdit中的插件一样)。</p> -<p>注册的包不一定要使用overlay的扩展方式(overlay是对已经存在的应用的扩展)。但这样，你就不能直接通过浏览器来使用这些功能。但你仍然可以使用称为chrome(增色) URL的方式来调用注册包。这种chrome URL的形式为"<a class="external" rel="freelink">chrome://</a>"。它用来指示安装的包和扩展。</p> -<p>通过chrome方式来访问可以获得比http方式更多的权限，而通过这种方式，你就可以做访问本地文件等操作。这一点非常重要，权限的区分是通过URL的类型来实现的。通过http方式访问HTML和XUL，没有这些特别的权限，而通过chrome方式访问，HTML和XUL都具有这样的权力。</p> -<p>Mozilla浏览器本身就是由许多的包构成的。而这些文件就是通过chrome URL来访问的，以获得特别的权限。</p> -<p>Mozilla中有三种主要的文档类型：HTML, XUL和XML。它们之间有些是可能共享的特性，有些是不能共享的，使用时要注意。</p> -<p>小结：</p> -<p>Mozilla使用同样的引擎来渲染HTML和XUL，使用CSS来指明它们的外观。 XUL可以从web站点、本地文件系统，或作为包被安装并通过chrome URL来访问(这就是浏览器扩展所做的方式)。 Chrome URL可以用来访问安装的包，并且使用特别的权限来打开它们。 HTML、XUL、XML有不同的文档类型。一些特性是互通的，然而另一些特性是各自的。</p> -<h3 id=".E5.8C.85.E7.BB.84.E7.BB.87" name=".E5.8C.85.E7.BB.84.E7.BB.87">包的组织</h3> -<p>由Mozilla提供的包可以在Mozilla的安装目录下的chrome子目录中找到。但仅仅把文件拷贝到chrome目录下是不会赋给它任何的权限，也不可以通过chrome URL来访问的，还需要配置才可以。需要按照chrome包格式的要求来组织才可以。</p> -<p>一个包的文件通常被组织为一个JAR文件。注意，很象Java中的Jar包，都是Zip格式的。但里面可不是Java程序。这也造成了某些人认为开发扩展需要懂Java，其实不是的。只是后缀与Java一样。(不清楚为什么用这个后缀)同时，也可以不打成一个JAR包，就是展开的目录也可以(如果你看到另一个教程XUL App Tutorial，你会看到就没有打成一个JAR包)。</p> -<p>通常一个chrome包有三个目录，但它们都是可选的，分别为：content、skin和locale。</p> -<ul> - <li>content -- 窗口和脚本</li> -</ul> -<p>用户界面的定义都放在XUL文件中，这些文件都以.xul为后缀。一个content目录下可以有多个XUL文件，但主窗体文件名必须与包名相同。例如editor包必须有一个叫做editor.xul的文件。其它的脚本文件(一般是.js文件，Javascript)也放在这个目录下。</p> -<ul> - <li>skin -- 样式表、图片，和其它与theme相关的文件</li> -</ul> -<p>样式表用来描述窗口显示的外观。它们与XUL分离，可以灵活地修改程序的外观。</p> -<ul> - <li>locale -- 与语言相关的文件</li> -</ul> -<p>所有界面中用到的文本都放在这里。如果支持多国语言，它们将按语言种类进行组织。只要在这里进行翻译即可实现多语言。 同时在每个目录下还应该有一个名为：contents.rdf的文件，它用来描述相关目录的信息清单。Mozilla将读取它，并使用它的内容来注册包，并给这个包分配一个chrome URL，这样这些文件就可以通过这个chrome URL来访问了。如果没有contents.rdf文件，这个包就不能被分配一个chrome URL，因此也就不能通过chrome来访问了。同时要注意，只有你需要通过chrome URL来访问的目录才需要contents.rdf文件，不需要访问的目录可能不要。再有，如果一个目录下还有子目录，但子目录通过与父目录相同的chrome URL来访问，子目录也可以不要contents.rdf文件。</p> -<p>在locale目录中，语言化文件有两种形式：DTD和属性(properties)文件。DTD(Document Type Definition，文档类型定义)是XML中常用的文件，它一般是用来定义XML中的元素规则，还可以用来定义XML中出现的实体(entity)元素。XUL要使用DTD中的实体声明，用来显示文本信息。因此如果想实现多语言，就要按语种创建子目录，生成多个DTD文件。属性文件是给脚本使用的。</p> -<p>Mozilla中的包通常是放在chrome目录下，但是你也可以不放在这个目录下，而是放在磁盘任意的地方。在chrome目录下的chrome.rdf文件保存了安装了的包、skin、locale的列表及它们的位置。放在chrome下是最常见的。对于存在多种skin和locale的情况，chrome.rdf中保存了激活的配置。</p> -<p> </p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/1-3_关于Chrome_URL">下一页 »</a></p> -</div><p></p> -<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/更多的按钮特性/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/更多的按钮特性/index.html deleted file mode 100644 index 4a72667660..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/更多的按钮特性/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: XUL_教程/更多的按钮特性 -slug: Mozilla/Tech/XUL/Tutorial/更多的按钮特性 -tags: - - XUL_教程 -translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:The_Box_Model">下一页 »</a></p> -</div><p></p> -<p> </p> -<h3 id=".E6.B7.BB.E5.8A.A0.E5.9B.BE.E5.83.8F" name=".E6.B7.BB.E5.8A.A0.E5.9B.BE.E5.83.8F">添加图像</h3> -<p>你可以使用<code><code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code>属性通过指定URL为按钮添加一个图像。图像从URL进行加载，可以是一个相对或绝对的URL路径，然后在按钮上显示图像。 下面的按钮有<code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 和 <code><code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code> 'happy.png'。图像显示在标签的左边。你可以使用其它两个属性去改变这个位置。这将会在后面进行解释。</p> -<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">View</a></p> -<pre><button label="help" image="happy.png"/> -</pre> -<h4 id=".E4.BD.BF.E7.94.A8CSS.E5.9B.BE.E5.83.8F.E7.9A.84.E6.8C.89.E9.92.AE" name=".E4.BD.BF.E7.94.A8CSS.E5.9B.BE.E5.83.8F.E7.9A.84.E6.8C.89.E9.92.AE">使用CSS图像的按钮</h4> -<p>在按钮上指定图像的另一个方法是使用样式表(CSS <a href="/zh-CN/docs/Web/CSS/list-style-image" title="list-style-image 属性用来指定一个能用来作为列表元素标记的图片。"><code>list-style-image</code></a> )属性。这将计划允许不改变XUL文件去改变"外观"(在这个例子，外观指按钮的图片)。</p> -<p><span id="%E4%BE%8B2"><a id="%E4%BE%8B2"></a><strong>例2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">View</a></p> -<pre><button id="find-button" - label="Find" style="list-style-image: url('happy.png')"/> -</pre> -<p>在这个例子，在按钮上显示图像 'happy.png'。 <code><code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code>属性的功能类似于在HTML中一样。通常，它可以使用在所有的XUL元素。注意你确实应该在一个分离的样式表里定义样式。</p> -<h3 id=".E5.9B.BE.E5.83.8F.E5.AE.9A.E4.BD.8D" name=".E5.9B.BE.E5.83.8F.E5.AE.9A.E4.BD.8D">图像定位</h3> -<p>默认情况下，按钮上的图像会放置在文本标签的左边。有两个属性可以用来控制定位。</p> -<p><code><code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code>属性控制图像和文本的方向。设置这个属性的值为<code>reverse</code>，图像将会放在文本的右边。使用<code>normal</code>值，或者删除这个属性，图像将会放在文本的左边。</p> -<p><code><code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code>属性用于在将图片放在文本的上面或下面。默认值是<code>horizontal</code>用于将用于将图像放在文本的左或右。你也可以使用值<code>vertical</code>将图像放在上方或下方。在这个例子，dir属性控制放置在上方或下方。相同的值被使用时，如果用在<code>normal</code>的意思是将图像放在文本的上方，而用在<code>reverse</code>的意思是将图像放在文本的下方。</p> -<p><span id="%E4%BE%8B3"><a id="%E4%BE%8B3"></a><strong>例3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">View</a></p> -<div class="float-right"> - <img alt="Image:advbtns1.png" class="internal" src="/@api/deki/files/2642/=Advbtns1.png"></div> -<pre><button label="Left" image="happy.png"/> -<button label="Right" image="happy.png" dir="reverse"/> -<button label="Above" image="happy.png" orient="vertical"/> -<button label="Below" image="happy.png" orient="vertical" dir="reverse"/> -</pre> -<p><br> - 这个例子展示了四个连续的不同类型的按钮。注意两个属性都没有指定说明使用的是默认值。</p> -<h3 id=".E7.89.B9.E6.AE.8A.E5.86.85.E5.AE.B9.E6.8C.89.E9.92.AE" name=".E7.89.B9.E6.AE.8A.E5.86.85.E5.AE.B9.E6.8C.89.E9.92.AE">特殊内容按钮</h3> -<p>按钮可以在内部包含任意的标记元素，这些元素将会被渲染在按钮内部。你或许不会经常使用这个，但你可以在创建自定义元素时使用它。</p> -<p>例如，下面将创建一个有两个红字的按钮：</p> -<p><span id="%E4%BE%8B4"><a id="%E4%BE%8B4"></a><strong>例4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">View</a></p> -<pre><button> - <description value="This is a"/> - <description value="rather strange" style="color: red;"/> - <description value="button"/> -</button> -</pre> -<p>任何XUL元素都可以放在<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>里面。HTML元素将被忽略，因此你需要使用<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>元素来包装它来达到换行的目的。如果你在按钮上指定<code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>属性，它将会覆盖按钮内的所有内容。</p> -<h4 id=".E5.BC.B9.E5.87.BA.E8.8F.9C.E5.8D.95.E6.8C.89.E9.92.AE" name=".E5.BC.B9.E5.87.BA.E8.8F.9C.E5.8D.95.E6.8C.89.E9.92.AE">弹出菜单按钮</h4> -<p>你可以在按钮里面放置一个<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>去促使在按钮被按下时向下弹出一个菜单，就像使用 <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>。然而，在这个例子你必须设置<code><a href="/cn/XUL/Attribute/button.type" title="cn/XUL/Attribute/button.type">type</a></code> 属性的值为<code>menu</code>。</p> -<p><span id="%E4%BE%8B5"><a id="%E4%BE%8B5"></a><strong>例5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">View</a></p> -<div class="float-right"> - <img alt="Image:advbtns2.png" class="internal" src="/@api/deki/files/2643/=Advbtns2.png"></div> -<pre><button type="menu" label="Device"> - <menupopup> - <menuitem label="Printer"/> - <menuitem label="Mouse"/> - <menuitem label="Keyboard"/> - </menupopup> -</button> -</pre> -<p>在这个例子中，用户可以点击按钮去弹出一个包括三个项目的菜单。注意在选择这些菜单项之中的一个时不会改变按钮的标签，不像<code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>那样。这种按钮类型是有意做成类似于菜单的，在每个项目上附上脚本去执行任务。我们将会在后面看到更多的菜单。</p> -<p>你也可以设置 <code><a href="/cn/XUL/Attribute/button.type" title="cn/XUL/Attribute/button.type">type</a></code> 属性的值为<code>menu-button</code>。这也可以创建一个像菜单的按钮，但显示会有所不同，右边的图像显示它们的区别。左边是一个'menu'而第二个是'menu-button'。 它有一个箭头标记菜单的存在。 在'menu'上，用户可以点击按钮的任何地方去显示菜单。在 'menu-button'上，用户点击箭头去显示菜单。</p> -<p>接下来，我们将要学习更多关于 <a href="/cn/XUL_教程/盒状模型" title="cn/XUL_教程/盒状模型">在窗口中放置元素</a>.</p> -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/zh-CN/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 上一页</a><a href="/zh-CN/docs/XUL_Tutorial:The_Box_Model">下一页 »</a></p> -</div><p></p> -<p></p> |