diff options
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul')
176 files changed, 18106 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/attribute/acceltext/index.html b/files/zh-cn/mozilla/tech/xul/attribute/acceltext/index.html new file mode 100644 index 0000000000..77bc1dccbe --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/acceltext/index.html @@ -0,0 +1,23 @@ +--- +title: acceltext +slug: Mozilla/Tech/XUL/Attribute/acceltext +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/acceltext +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<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> + Type: + <i> + string</i> + </dd> + <dd> + Text that appears beside beside the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> label to indicate the shortcut key (accelerator key) to use to invoke the command. If this value is set, it overrides an assigned key set in the key attribute. This attribute does not apply to menus directly on the menubar.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/accesskey/index.html b/files/zh-cn/mozilla/tech/xul/attribute/accesskey/index.html new file mode 100644 index 0000000000..e6697bda0d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/accesskey/index.html @@ -0,0 +1,43 @@ +--- +title: accesskey +slug: Mozilla/Tech/XUL/Attribute/accesskey +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/accesskey +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<div class="noinclude"> +<dl> + <dd>Attribute of: <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code>, <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><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/textbox (Firefox autocomplete)" title="textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a></code></dd> +</dl> +</div> + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/activetitlebarcolor/index.html b/files/zh-cn/mozilla/tech/xul/attribute/activetitlebarcolor/index.html new file mode 100644 index 0000000000..5352f49114 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/activetitlebarcolor/index.html @@ -0,0 +1,19 @@ +--- +title: activetitlebarcolor +slug: Mozilla/Tech/XUL/Attribute/activetitlebarcolor +translation_of: Archive/Mozilla/XUL/Attribute/activetitlebarcolor +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt> + <dd> + Type: <em>color string</em></dd> + <dd> + Specify background color of the window's titlebar when it is active (foreground). Moreover this hides separator between titlebar and window contents. <em>This only affects Mac OS X.</em></dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/align/index.html b/files/zh-cn/mozilla/tech/xul/attribute/align/index.html new file mode 100644 index 0000000000..f940cbdbb3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/align/index.html @@ -0,0 +1,54 @@ +--- +title: align +slug: Mozilla/Tech/XUL/Attribute/align +tags: + - Reference + - XUL +translation_of: Archive/Mozilla/XUL/Attribute/align +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.<br> + 当box的尺寸大于全部子元素的尺寸时，align属性指定box元素的对齐方式。 + <ul> + <li>For boxes that have horizontal orientation, it specifies how its children will be aligned vertically.</li> + <li>当box设置水平排列，它指定子元素如何垂直对齐。</li> + <li>For boxes that have vertical orientation, it specifies how its children will be aligned horizontally.</li> + <li>当box设置垂直排列，它指定子元素如何水平对齐</li> + </ul> + </dd> + <dd> + <dl> + <dt><code>start</code></dt> + <dd>Child elements are aligned starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.<br> + 子元素从box的左边或顶部开始排列。如果box大于全部子元素的总和，多出的空间在右边或底部。</dd> + <dt><code>center</code></dt> + <dd>Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.<br> + 多出的空间在子元素的周围，使子元素放置在box的中间。</dd> + <dt><code>end</code></dt> + <dd>Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.<br> + 子元素从box的右边或底部开始排列。如果box大于全部子元素的总和，多出的空间在左边或顶部部。</dd> + <dt><code>baseline</code></dt> + <dd>This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.<br> + 这个值只适用于水平方向的box元素。它让子元素的文本标签成一条直线。</dd> + <dt><code>stretch</code></dt> + <dd><em>This is the default value.</em> The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.<br> + 这是默认值。拉伸子元素来填充box。在水平的box元素中，子元素在高度上被拉伸。在垂直的box元素中，子元素在宽度上被拉伸。如果box元素尺寸改变，子元素也随之改变。使用flex属性创建的元素在相反方向被拉伸。</dd> + <dt><code>left</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt> + <dd>The elements are aligned on their left edges.<br> + 元素左边缘对齐。</dd> + <dt><code>center</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt> + <dd>The elements are centered horizontally.<br> + 元素水平居中。</dd> + <dt><code>right</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt> + <dd>The elements are aligned on their right edges.<br> + 元素右边缘对齐。</dd> + </dl> + </dd> + <dd>The <a href="/en-US/docs/XUL/Attribute/pack" title="XUL/Attribute/pack">pack</a> attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property <a href="/zh-CN/docs/Web/CSS/-moz-box-align" title="此页面仍未被本地化, 期待您的翻译!"><code>-moz-box-align</code></a>.<br> + <a href="/en-US/docs/XUL/Attribute/pack" title="XUL/Attribute/pack">pack</a>也是有关对齐的属性，但是指定相反方向的位置。你也可以在style中使用对齐的方式<a href="/zh-CN/docs/Web/CSS/-moz-box-align" title="此页面仍未被本地化, 期待您的翻译!"><code>-moz-box-align</code></a>。</dd> + <dt></dt> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/allowevents/index.html b/files/zh-cn/mozilla/tech/xul/attribute/allowevents/index.html new file mode 100644 index 0000000000..5d17570f74 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/allowevents/index.html @@ -0,0 +1,30 @@ +--- +title: allowevents +slug: Mozilla/Tech/XUL/Attribute/allowevents +tags: + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute/allowevents +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> + <dd>Type: + <i>boolean<br> + </i> + 类型：boolean</dd> + <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.<br> + 如果为真，事件向子元素传递。否则，事件只传递到当前元素。</dd> +</dl> + +<div class="noinclude"> +<p>On <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> and <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/titlebar" title="titlebar">titlebar</a></code> elements, mouse events normally do not get sent to their children; instead they are retargeted to the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> and <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/titlebar" title="titlebar">titlebar</a></code> element itself. This means that elements placed inside a listitem do not respond to events, and instead clicking the mouse simply selects that item within the list. By setting the allowevents attribute to <code>true</code>, this special behavior is disabled, and the events are targeted the same as other elements.<br> + 在 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 和 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/titlebar" title="titlebar">titlebar</a></code> 元素中，鼠标事件通常不发送给子元素；相反它们重定向到 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 和 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/titlebar" title="titlebar">titlebar</a></code> 元素本身。这意味着，放置在listitem内部的元素并不响应事件，而点击鼠标仅仅是选择在列表中的元素。当设置allowevents属性为真时，这种特殊的响应被禁止，事件则被定向到其他相同的元素。</p> + +<p>For <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> and <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> elements, as well as menu buttons, and the popup <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code>, mouse events are also retargeted to the element itself. However, the allowevents attribute is handled in a different way. Instead, the allowevents may be set to <code>true</code> on a descendant instead. This does the same thing in that it allows events to be targeted normally, but allows this to be different for each descendant.</p> + +<p>This behavior is used for menus, for instance, to allow a menu button to behave as a menu when clicking on it, yet have part of the menu behave as a button. For the latter, the allowevents attribute is set to <code>true</code> to have a click on the child button receive events instead of targeting all events at the menu.</p> +</div> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/allownegativeassertions/index.html b/files/zh-cn/mozilla/tech/xul/attribute/allownegativeassertions/index.html new file mode 100644 index 0000000000..51c8c4e222 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/allownegativeassertions/index.html @@ -0,0 +1,18 @@ +--- +title: allownegativeassertions +slug: Mozilla/Tech/XUL/Attribute/allownegativeassertions +translation_of: Archive/Mozilla/XUL/Attribute/allownegativeassertions +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code></dt> + <dd>Type: <em>boolean</em><br> + 类型：布尔类型</dd> + <dd>Valid on any element that has a <code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if <code>true</code>, which is the default, allows a datasource to negate an earlier assertion.<br> + 适用于任何有 <code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> 属性的元素。当使用多个数据源，一个数据源可以指定覆盖另一个。这个属性，如果为真，这是默认值，允许一个数据源覆盖之前的数据源。</dd> +</dl> + +<div class="noinclude"> +<p></p> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/autocheck/index.html b/files/zh-cn/mozilla/tech/xul/attribute/autocheck/index.html new file mode 100644 index 0000000000..edd3c5e9ed --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/autocheck/index.html @@ -0,0 +1,24 @@ +--- +title: autocheck +slug: Mozilla/Tech/XUL/Attribute/autocheck +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/autoCheck +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-autocheck"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code></dt> + <dd>类型: + <i>boolean</i> + </dd> + <dd>如果此属性为 <code>true</code>,或空白, 每次点击按钮时，此按钮的状态检查都会被执行一次。如果此属性为<code>false</code>, 检查会手动的被拒绝。当autocheck值为true的时候，按钮将会变为多选框或者单选框。</dd> +</dl> + +<div class="noinclude"> +<h3 id="See_also" name="See_also">See also</h3> + +<p><code><a href="cn/XUL/Attribute/autoCheck">autoCheck</a></code></p> +</div> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/autoscroll/index.html b/files/zh-cn/mozilla/tech/xul/attribute/autoscroll/index.html new file mode 100644 index 0000000000..9bc1366f88 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/autoscroll/index.html @@ -0,0 +1,12 @@ +--- +title: autoscroll +slug: Mozilla/Tech/XUL/Attribute/autoscroll +translation_of: Archive/Mozilla/XUL/Attribute/autoscroll +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/en-US/docs/XUL/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-autoscroll"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoscroll">autoscroll</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set to <code>false</code> to disable autoscroll for this browser. If this attribute is set to <code>true</code> or omitted, autoscroll will be enabled or depending on the user preference <code>general.autoScroll</code>.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/buttonaccesskeyaccept/index.html b/files/zh-cn/mozilla/tech/xul/attribute/buttonaccesskeyaccept/index.html new file mode 100644 index 0000000000..4e42f14bad --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/buttonaccesskeyaccept/index.html @@ -0,0 +1,20 @@ +--- +title: buttonaccesskeyaccept +slug: Mozilla/Tech/XUL/Attribute/buttonaccesskeyaccept +translation_of: Archive/Mozilla/XUL/Attribute/buttonaccesskeyaccept +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-buttonaccesskeyaccept"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "accept" button.</dd> +</dl> +<p> </p> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/buttonlabelextra1/index.html b/files/zh-cn/mozilla/tech/xul/attribute/buttonlabelextra1/index.html new file mode 100644 index 0000000000..1de5913a9b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/buttonlabelextra1/index.html @@ -0,0 +1,19 @@ +--- +title: buttonlabelextra1 +slug: Mozilla/Tech/XUL/Attribute/buttonlabelextra1 +translation_of: Archive/Mozilla/XUL/Attribute/buttonlabelextra1 +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The label to appear on the first extra button.</dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/buttonlabelextra2/index.html b/files/zh-cn/mozilla/tech/xul/attribute/buttonlabelextra2/index.html new file mode 100644 index 0000000000..1a7f700eac --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/buttonlabelextra2/index.html @@ -0,0 +1,19 @@ +--- +title: buttonlabelextra2 +slug: Mozilla/Tech/XUL/Attribute/buttonlabelextra2 +translation_of: Archive/Mozilla/XUL/Attribute/buttonlabelextra2 +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The label to appear on the second extra button.</dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/buttons/index.html b/files/zh-cn/mozilla/tech/xul/attribute/buttons/index.html new file mode 100644 index 0000000000..5759eabd90 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/buttons/index.html @@ -0,0 +1,28 @@ +--- +title: buttons +slug: Mozilla/Tech/XUL/Attribute/buttons +translation_of: Archive/Mozilla/XUL/Attribute/buttons +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/buttons">buttons</a></span></code></dt> + <dd> + 类型: 列表，下面的值用逗号分隔</dd> + <dd> + 需要显示在对话框上的按钮的一个列表，使用逗号分隔。将按钮放置在合适的位置，将根据用户平台自动执行基本的事件处理。在列表中可以使用以下值： + <ul> + <li><code>accept</code>：“确定”按钮，按下按钮时将接受更改。此按钮为默认按钮。</li> + <li><code>cancel</code>：“取消”按钮，将取消操作。</li> + <li><code>help</code>：“帮助”按钮，在对话框显示一个“帮助”按钮。</li> + <li><code>disclosure</code>：“更多信息”按钮，显示一个“more info”按钮。该按钮可能是一个按钮或一个三角形。</li> + <li><code>extra1</code>：一个可选的额外的按钮。你可以通过<code><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code> 属性设置它的label。</li> + <li><code>extra2</code>：第二个可选的额外的按钮。你可以通过 <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code> 属性设置它的label。</li> + </ul> + </dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/checked/index.html b/files/zh-cn/mozilla/tech/xul/attribute/checked/index.html new file mode 100644 index 0000000000..249a1f1ee1 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/checked/index.html @@ -0,0 +1,24 @@ +--- +title: checked +slug: Mozilla/Tech/XUL/Attribute/checked +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/checked +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is checked or not.</dd> + <dd> + Use <code>hasAttribute()</code> to determine whether this attribute is set instead of <code>getAttribute()</code>.</dd> + <dd> + For buttons, the <code>type</code> attribute must be set to <code>checkbox</code> or <code>radio</code> for this attribute to have any effect.<magic name="\"PAGENAME\"/"></magic></dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/class/index.html b/files/zh-cn/mozilla/tech/xul/attribute/class/index.html new file mode 100644 index 0000000000..45eb8dbc87 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/class/index.html @@ -0,0 +1,23 @@ +--- +title: class +slug: Mozilla/Tech/XUL/Attribute/class +tags: + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute/class +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code></dt> + <dd>Type: + <i>string<br> + </i> + 类型：字符串(string)</dd> + <dd>The style class of the element. Multiple classes may be specified by separating them with spaces.<br> + 元素样式类型。多个类可以使用空格分开。</dd> +</dl> + +<div class="noinclude"> </div> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/coalesceduplicatearcs/index.html b/files/zh-cn/mozilla/tech/xul/attribute/coalesceduplicatearcs/index.html new file mode 100644 index 0000000000..01e6ddd51f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/coalesceduplicatearcs/index.html @@ -0,0 +1,17 @@ +--- +title: coalesceduplicatearcs +slug: Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs +tags: + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute/coalesceduplicatearcs +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code></dt> + <dd>Type: <em>boolean</em><br> + 类型：布尔类型(boolean)</dd> + <dd>Valid on any element that has a <code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if <code>true</code>, which is the default, allows a datasource to negate an earlier assertion.<br> + 任何有 <code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> 属性的元素有效。当有多个数据源时使用，可以覆盖另一个声明。这个属性，如果是真，这是默认属性，允许一个数据源取消更早的声明。 </dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/collapsed/index.html b/files/zh-cn/mozilla/tech/xul/attribute/collapsed/index.html new file mode 100644 index 0000000000..50d54b771f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/collapsed/index.html @@ -0,0 +1,27 @@ +--- +title: collapsed +slug: Mozilla/Tech/XUL/Attribute/collapsed +translation_of: Archive/Mozilla/XUL/Attribute/collapsed +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code></dt> + <dd>Type: <em>boolean</em><br> + 类型：布尔类型(boolean)</dd> + <dd>If <code>true</code>, then the element is collapsed and does not appear. It is equivalent to setting the CSS <a href="/en-US/docs/CSS/visibility" title="/en-US/docs/CSS/visibility">visibility</a> property to <code>collapse</code>.<br> + 如果是真，那么这个元素可以折叠并且隐藏。相当于设置CSS的 <a href="/en-US/docs/CSS/visibility" title="/en-US/docs/CSS/visibility">visibility</a> 属性为 collapse。</dd> +</dl> + +<div class="noinclude"> +<h2 id="See_also_相关参考">See also<br> + 相关参考</h2> + +<ul> + <li><code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></li> +</ul> + +<p></p> +</div> + +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/command/index.html b/files/zh-cn/mozilla/tech/xul/attribute/command/index.html new file mode 100644 index 0000000000..75c4957f0e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/command/index.html @@ -0,0 +1,30 @@ +--- +title: command +slug: Mozilla/Tech/XUL/Attribute/command +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/command +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> +<div class="noinclude"> + <h3 id="Example" name="Example">Example</h3> + <pre><command id="cmd_openhelp" oncommand="alert('Help');"/> +<button label="Help" command="cmd_openhelp"/> +<button label="More Help" command="cmd_openhelp"/> +</pre> + <h3 id="See_also" name="See_also">See also</h3> + <p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> element, <code><code id="a-oncommand"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> and <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/commandset" title="commandset">commandset</a></code></code></p> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/container/index.html b/files/zh-cn/mozilla/tech/xul/attribute/container/index.html new file mode 100644 index 0000000000..4b1429ae43 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/container/index.html @@ -0,0 +1,18 @@ +--- +title: container +slug: Mozilla/Tech/XUL/Attribute/container +translation_of: Archive/Mozilla/XUL/Attribute/container +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code></dt> + <dd>Type: <em>boolean</em><br> + 类型：布尔类型(boolean)</dd> + <dd>Set to true if the element is to act as a container which can have child elements. This would be used for folders. This will be set by the template builder as needed.<br> + 如果该元素是作为一个容器可以有子元素，设置为真。</dd> +</dl> + +<div class="noinclude"> +<p></p> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/control/index.html b/files/zh-cn/mozilla/tech/xul/attribute/control/index.html new file mode 100644 index 0000000000..74a0edec5a --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/control/index.html @@ -0,0 +1,23 @@ +--- +title: control +slug: Mozilla/Tech/XUL/Attribute/control +tags: + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute/control +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></dt> + <dd> + Type: <em>element id</em></dd> + <dd> + This attribute specifies the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the element with which the label is associated. When the user clicks on the label, the associated element is given focus.<br> + 这个属性定义了元素的<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>，它与<code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code>相关联。当用户点击 <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 的时候，相关联的元素将获得焦点。</dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/crop/index.html b/files/zh-cn/mozilla/tech/xul/attribute/crop/index.html new file mode 100644 index 0000000000..1ab3f59210 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/crop/index.html @@ -0,0 +1,37 @@ +--- +title: crop +slug: Mozilla/Tech/XUL/Attribute/crop +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/crop +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> +<div class="noinclude"> + <dl> + <dd> + Depending on the platform and theme being used, some elements will have a set maximum width so they will be always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd> + </dl> + <pre class="eval">menupopup > menuitem, menupopup > menu { max-width: none; } +</pre> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/description/index.html b/files/zh-cn/mozilla/tech/xul/attribute/description/index.html new file mode 100644 index 0000000000..008aa1281c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/description/index.html @@ -0,0 +1,23 @@ +--- +title: description +slug: Mozilla/Tech/XUL/Attribute/description +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/description +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-description"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/description">description</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Descriptive text to appear in addition to the dialog title.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/dir/index.html b/files/zh-cn/mozilla/tech/xul/attribute/dir/index.html new file mode 100644 index 0000000000..0b4c5c36a4 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/dir/index.html @@ -0,0 +1,39 @@ +--- +title: dir +slug: Mozilla/Tech/XUL/Attribute/dir +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/dir +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + The direction in which the child elements of the element are placed.</dd> +</dl> +<dl> + <dt> + <code>normal</code></dt> + <dd> + For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code</dd> + <dt> + <code>reverse</code></dt> + <dd> + For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.</dd> +</dl> +<ul> +</ul> +<div class="noinclude"> + <h3 id="See_also" name="See_also">See also</h3> + <ul> + <li><a href="cn/XUL/Attribute/resizer.dir">resizer.dir</a></li> + </ul> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/disabled/index.html b/files/zh-cn/mozilla/tech/xul/attribute/disabled/index.html new file mode 100644 index 0000000000..057bca261d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/disabled/index.html @@ -0,0 +1,38 @@ +--- +title: disabled +slug: Mozilla/Tech/XUL/Attribute/disabled +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/disabled +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/flex/index.html b/files/zh-cn/mozilla/tech/xul/attribute/flex/index.html new file mode 100644 index 0000000000..7d9954d30a --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/flex/index.html @@ -0,0 +1,23 @@ +--- +title: flex +slug: Mozilla/Tech/XUL/Attribute/flex +tags: + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute/flex +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)<br> + 类型：字符串 (string) 表示一个整数</dd> + <dd>Indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. Flexible elements grow and shrink to fit their given space. Elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. The actual value is not relevant unless there are other flexible elements within the same container. Once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely.<br> + 指示一个元素的伸缩性，</dd> +</dl> + +<div class="noinclude"> +<p></p> +</div> + +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/href/index.html b/files/zh-cn/mozilla/tech/xul/attribute/href/index.html new file mode 100644 index 0000000000..50013e44b3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/href/index.html @@ -0,0 +1,24 @@ +--- +title: href +slug: Mozilla/Tech/XUL/Attribute/href +tags: + - XUL 参考 + - XUL 属性 +translation_of: Archive/Mozilla/XUL/Attribute/href +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-href"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/href">href</a></code></dt> + <dd>类型: <em>文本</em></dd> + <dd>定义一个当元素被点击时将会打开的 URL 。需要引用类 <a href="/en/XUL/Style/text-link" title="en/XUL/Style/text-link">text-link </a>。</dd> +</dl> + +<div class="noinclude"> +<pre class="eval"><label href="<span class="nowiki">http://example.com</span>" class="text-link" value="点击这里前往 example.com"/> +</pre> +</div> + +<div class="noinclude"> +<p></p> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/id/index.html b/files/zh-cn/mozilla/tech/xul/attribute/id/index.html new file mode 100644 index 0000000000..50e8e7b188 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/id/index.html @@ -0,0 +1,41 @@ +--- +title: id +slug: Mozilla/Tech/XUL/Attribute/id +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/id +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<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> + 类型: <em>元素的ID，在主窗口中必须唯一</em></dd> + <dd> + 一个唯一的标识一边开发者能够定义. 你可以使用方法 <code><a href="/cn/DOM/document.getElementById" title="cn/DOM/document.getElementById">getElementById()</a></code> 或者其他 DOM 的函数并在样式表中添加对元素的引用。</dd> +</dl> +<div class="noinclude"> + <h4 id="Example" name="Example">示例</h4> + <pre><button id="foo" label="Click Me" oncommand="doSomething()"/> + +<script> +function doSomething(){ + var myButton = document.getElementById('foo'); + myButton.setAttribute('label','The button was pressed'); +} +</script> +</pre> + <p>一个更加抽象的版本</p> + <pre><button id="foo" label="Click Me" oncommand="setWidgetLabel(this, 'I was pressed')"/> +<script> +function setWidgetLabel(idName, newCaption){ + document.getElementById( idName.id ).setAttribute('label',newCaption) +} + +</script> +</pre> + <h4 id="See_also" name="See_also">同样，这里还有一些资料</h4> + <p><code id="a-name"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/name">name</a></code></p> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/image.onload/index.html b/files/zh-cn/mozilla/tech/xul/attribute/image.onload/index.html new file mode 100644 index 0000000000..846d404d89 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/image.onload/index.html @@ -0,0 +1,12 @@ +--- +title: image.onload +slug: Mozilla/Tech/XUL/Attribute/image.onload +translation_of: Archive/Mozilla/XUL/Attribute/image.onload +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/en-US/docs/XUL/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-image.onload"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></dt> + <dd>类型: <em>脚本代码</em></dd> + <dd>该事件的处理函数将会在 <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> 元素指示的图片加载完毕之后触发。此事件触发适用于用 <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> 元素属性或用 <code>list-style-image</code> css属性声明元素样式。如果图片的加载源发生变化，该事件会在图片加载完毕之后再次触发。该事件不会在文档树上向上冒泡。</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/image/index.html b/files/zh-cn/mozilla/tech/xul/attribute/image/index.html new file mode 100644 index 0000000000..dd82594964 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/image/index.html @@ -0,0 +1,25 @@ +--- +title: image +slug: Mozilla/Tech/XUL/Attribute/image +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/image +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + The URL of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> +<div class="noinclude"> + <h4 id="See_also" name="See_also">See also</h4> + <p><code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/image" title="image">image</a></code></code> element</p> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/increment/index.html b/files/zh-cn/mozilla/tech/xul/attribute/increment/index.html new file mode 100644 index 0000000000..782156bb47 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/increment/index.html @@ -0,0 +1,15 @@ +--- +title: increment +slug: Mozilla/Tech/XUL/Attribute/increment +translation_of: Archive/Mozilla/XUL/Attribute/increment +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code></dt> + <dd> + 类型:整数</dd> + <dd> + 拖动刻度条控件(<code>scale</code>元素)中的拉杆,点击滚动条控件(<code>scrollbar</code>元素)中的箭头(拖动拉杆也可以),点击数字输入框(<code>type</code>属性为<code>number</code>的<code>textbox</code>元素)中的箭头时,其<code id="a-curpos"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code>属性或者value属性每次改变的数字值,默认值为1.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/index.html b/files/zh-cn/mozilla/tech/xul/attribute/index.html new file mode 100644 index 0000000000..097a3d6678 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/index.html @@ -0,0 +1,304 @@ +--- +title: Attributes +slug: Mozilla/Tech/XUL/Attribute +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute +--- +<p><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span> +</p> +<ul><li> <a href="cn/XUL/Attribute/acceltext">acceltext</a> +</li><li> <a href="cn/XUL/Attribute/accessible">accessible</a> +</li><li> <a href="cn/XUL/Attribute/accesskey">accesskey</a> +</li><li> <a href="cn/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a> +</li><li> <a href="cn/XUL/Attribute/afterselected">afterselected</a> +</li><li> <a href="cn/XUL/Attribute/align">align</a> +</li><li> <a href="cn/XUL/Attribute/allowevents">allowevents</a> +</li><li> <a href="cn/XUL/Attribute/allownegativeassertions">allownegativeassertions</a> +</li><li> <a href="cn/XUL/Attribute/alternatingbackground">alternatingbackground</a> +</li><li> <a href="cn/XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a> +</li><li> <a href="cn/XUL/Attribute/attribute">attribute</a> +</li><li> <a href="cn/XUL/Attribute/autocheck">autocheck</a> +</li><li> <a href="cn/XUL/Attribute/autoCheck">autoCheck</a> +</li><li> <a href="cn/XUL/Attribute/autocompleteenabled">autocompleteenabled</a> +</li><li> <a href="cn/XUL/Attribute/autocompletepopup">autocompletepopup</a> +</li><li> <a href="cn/XUL/Attribute/autocompletesearch">autocompletesearch</a> +</li><li> <a href="cn/XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a> +</li><li> <a href="cn/XUL/Attribute/autoFill">autoFill</a> +</li><li> <a href="cn/XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a> +</li><li> <a href="cn/XUL/Attribute/autoscroll">autoscroll</a> +</li><li> <a href="cn/XUL/Attribute/beforeselected">beforeselected</a> +</li><li> <a href="cn/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a> +</li><li> <a href="cn/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a> +</li><li> <a href="cn/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a> +</li><li> <a href="cn/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a> +</li><li> <a href="cn/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a> +</li><li> <a href="cn/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a> +</li><li> <a href="cn/XUL/Attribute/buttonalign">buttonalign</a> +</li><li> <a href="cn/XUL/Attribute/buttondir">buttondir</a> +</li><li> <a href="cn/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a> +</li><li> <a href="cn/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a> +</li><li> <a href="cn/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a> +</li><li> <a href="cn/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a> +</li><li> <a href="cn/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a> +</li><li> <a href="cn/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a> +</li><li> <a href="cn/XUL/Attribute/buttonorient">buttonorient</a> +</li><li> <a href="cn/XUL/Attribute/buttonpack">buttonpack</a> +</li><li> <a href="cn/XUL/Attribute/buttons">buttons</a> +</li><li> <a href="cn/XUL/Attribute/checked">checked</a> +</li><li> <a href="cn/XUL/Attribute/checkState">checkState</a> +</li><li> <a href="cn/XUL/Attribute/class">class</a> +</li><li> <a href="cn/XUL/Attribute/closebutton">closebutton</a> +</li><li> <a href="cn/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a> +</li><li> <a href="cn/XUL/Attribute/collapse">collapse</a> +</li><li> <a href="cn/XUL/Attribute/collapsed">collapsed</a> +</li><li> <a href="cn/XUL/Attribute/color">color</a> +</li><li> <a href="cn/XUL/Attribute/cols">cols</a> +</li><li> <a href="cn/XUL/Attribute/command">command</a> +</li><li> <a href="cn/XUL/Attribute/commandupdater">commandupdater</a> +</li><li> <a href="cn/XUL/Attribute/completedefaultindex">completedefaultindex</a> +</li><li> <a href="cn/XUL/Attribute/container">container</a> +</li><li> <a href="cn/XUL/Attribute/containment">containment</a> +</li><li> <a href="cn/XUL/Attribute/contentcontextmenu">contentcontextmenu</a> +</li><li> <a href="cn/XUL/Attribute/contenttooltip">contenttooltip</a> +</li><li> <a href="cn/XUL/Attribute/context">context</a> +</li><li> <a href="cn/XUL/Attribute/contextmenu">contextmenu</a> +</li><li> <a href="cn/XUL/Attribute/control">control</a> +</li><li> <a href="cn/XUL/Attribute/crop">crop</a> +</li><li> <a href="cn/XUL/Attribute/curpos">curpos</a> +</li><li> <a href="cn/XUL/Attribute/current">current</a> +</li><li> <a href="cn/XUL/Attribute/currentset">currentset</a> +</li><li> <a href="cn/XUL/Attribute/customindex">customindex</a> +</li><li> <a href="cn/XUL/Attribute/customizable">customizable</a> +</li><li> <a href="cn/XUL/Attribute/cycler">cycler</a> +</li><li> <a href="cn/XUL/Attribute/datasources">datasources</a> +</li><li> <a href="cn/XUL/Attribute/decimalplaces">decimalplaces</a> +</li><li> <a href="cn/XUL/Attribute/default">default</a> +</li><li> <a href="cn/XUL/Attribute/defaultButton">defaultButton</a> +</li><li> <a href="cn/XUL/Attribute/defaultset">defaultset</a> +</li><li> <a href="cn/XUL/Attribute/description">description</a> +</li><li> <a href="cn/XUL/Attribute/dir">dir</a> +</li><li> <a href="cn/XUL/Attribute/disableAutocomplete">disableAutocomplete</a> +</li><li> <a href="cn/XUL/Attribute/disableautocomplete">disableautocomplete</a> +</li><li> <a href="cn/XUL/Attribute/disableautoselect">disableautoselect</a> +</li><li> <a href="cn/XUL/Attribute/disableclose">disableclose</a> +</li><li> <a href="cn/XUL/Attribute/disabled">disabled</a> +</li><li> <a href="cn/XUL/Attribute/disablehistory">disablehistory</a> +</li><li> <a href="cn/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a> +</li><li> <a href="cn/XUL/Attribute/disablekeynavigation">disablekeynavigation</a> +</li><li> <a href="cn/XUL/Attribute/disablesecurity">disablesecurity</a> +</li><li> <a href="cn/XUL/Attribute/dlgtype">dlgtype</a> +</li><li> <a href="cn/XUL/Attribute/dragging">dragging</a> +</li><li> <a href="cn/XUL/Attribute/editable">editable</a> +</li><li> <a href="cn/XUL/Attribute/editortype">editortype</a> +</li><li> <a href="cn/XUL/Attribute/element">element</a> +</li><li> <a href="cn/XUL/Attribute/empty">empty</a> +</li><li> <a href="cn/XUL/Attribute/emptytext">emptytext</a> +</li><li> <a href="cn/XUL/Attribute/enableColumnDrag">enableColumnDrag</a> +</li><li> <a href="cn/XUL/Attribute/enablehistory">enablehistory</a> +</li><li> <a href="cn/XUL/Attribute/equalsize">equalsize</a> +</li><li> <a href="cn/XUL/Attribute/eventnode">eventnode</a> +</li><li> <a href="cn/XUL/Attribute/events">events</a> +</li><li> <a href="cn/XUL/Attribute/expr">expr</a> +</li><li> <a href="cn/XUL/Attribute/firstdayofweek">firstdayofweek</a> +</li><li> <a href="cn/XUL/Attribute/firstpage">firstpage</a> +</li><li> <a href="cn/XUL/Attribute/first-tab">first-tab</a> +</li><li> <a href="cn/XUL/Attribute/fixed">fixed</a> +</li><li> <a href="cn/XUL/Attribute/flags">flags</a> +</li><li> <a href="cn/XUL/Attribute/flex">flex</a> +</li><li> <a href="cn/XUL/Attribute/focused">focused</a> +</li><li> <a href="cn/XUL/Attribute/forceComplete">forceComplete</a> +</li><li> <a href="cn/XUL/Attribute/forcecomplete">forcecomplete</a> +</li><li> <a href="cn/XUL/Attribute/grippyhidden">grippyhidden</a> +</li><li> <a href="cn/XUL/Attribute/grippytooltiptext">grippytooltiptext</a> +</li><li> <a href="cn/XUL/Attribute/group">group</a> +</li><li> <a href="cn/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a> +</li><li> <a href="cn/XUL/Attribute/handleCtrlTab">handleCtrlTab</a> +</li><li> <a href="cn/XUL/Attribute/height">height</a> +</li><li> <a href="cn/XUL/Attribute/helpURI">helpURI</a> +</li><li> <a href="cn/XUL/Attribute/hidden">hidden</a> +</li><li> <a href="cn/XUL/Attribute/hidechrome">hidechrome</a> +</li><li> <a href="cn/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a> +</li><li> <a href="cn/XUL/Attribute/hideheader">hideheader</a> +</li><li> <a href="cn/XUL/Attribute/hideseconds">hideseconds</a> +</li><li> <a href="cn/XUL/Attribute/hidespinbuttons">hidespinbuttons</a> +</li><li> <a href="cn/XUL/Attribute/homepage">homepage</a> +</li><li> <a href="cn/XUL/Attribute/href">href</a> +</li><li> <a href="cn/XUL/Attribute/icon">icon</a> +</li><li> <a href="cn/XUL/Attribute/id">id</a> +</li><li> <a href="cn/XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a> +</li><li> <a href="cn/XUL/Attribute/ignoreblurwhilesearching">ignorebluewhilesearching</a> +</li><li> <a href="cn/XUL/Attribute/ignorecase">ignorecase</a> +</li><li> <a href="cn/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a> +</li><li> <a href="cn/XUL/Attribute/ignorekeys">ignorekeys</a> +</li><li> <a href="cn/XUL/Attribute/image">image</a> +</li><li> <a href="cn/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a> +</li><li> <a href="cn/XUL/Attribute/increment">increment</a> +</li><li> <a href="cn/XUL/Attribute/inputtooltiptext">inputtooltiptext</a> +</li><li> <a href="cn/XUL/Attribute/insertafter">insertafter</a> +</li><li> <a href="cn/XUL/Attribute/insertbefore">insertbefore</a> +</li><li> <a href="cn/XUL/Attribute/instantApply">instantApply</a> +</li><li> <a href="cn/XUL/Attribute/inverted">inverted</a> +</li><li> <a href="cn/XUL/Attribute/iscontainer">iscontainer</a> +</li><li> <a href="cn/XUL/Attribute/isempty">isempty</a> +</li><li> <a href="cn/XUL/Attribute/key">key</a> +</li><li> <a href="cn/XUL/Attribute/keycode">keycode</a> +</li><li> <a href="cn/XUL/Attribute/keytext">keytext</a> +</li><li> <a href="cn/XUL/Attribute/label">label</a> +</li><li> <a href="cn/XUL/Attribute/lastpage">lastpage</a> +</li><li> <a href="cn/XUL/Attribute/lastSelected">lastSelected</a> +</li><li> <a href="cn/XUL/Attribute/last-tab">last-tab</a> +</li><li> <a href="cn/XUL/Attribute/left">left</a> +</li><li> <a href="cn/XUL/Attribute/linkedpanel">linkedpanel</a> +</li><li> <a href="cn/XUL/Attribute/max">max</a> +</li><li> <a href="cn/XUL/Attribute/maxheight">maxheight</a> +</li><li> <a href="cn/XUL/Attribute/maxlength">maxlength</a> +</li><li> <a href="cn/XUL/Attribute/maxpos">maxpos</a> +</li><li> <a href="cn/XUL/Attribute/maxrows">maxrows</a> +</li><li> <a href="cn/XUL/Attribute/maxwidth">maxwidth</a> +</li><li> <a href="cn/XUL/Attribute/member">member</a> +</li><li> <a href="cn/XUL/Attribute/menu">menu</a> +</li><li> <a href="cn/XUL/Attribute/menuactive">menuactive</a> +</li><li> <a href="cn/XUL/Attribute/min">min</a> +</li><li> <a href="cn/XUL/Attribute/minheight">minheight</a> +</li><li> <a href="cn/XUL/Attribute/minResultsForPopup">minResultsForPopup</a> +</li><li> <a href="cn/XUL/Attribute/minresultsforpopup">minresultsforpopup</a> +</li><li> <a href="cn/XUL/Attribute/minwidth">minwidth</a> +</li><li> <a href="cn/XUL/Attribute/mode">mode</a> +</li><li> <a href="cn/XUL/Attribute/modifiers">modifiers</a> +</li><li> <a href="cn/XUL/Attribute/mousethrough">mousethrough</a> +</li><li> <a href="cn/XUL/Attribute/multiline">multiline</a> +</li><li> <a href="cn/XUL/Attribute/multiple">multiple</a> +</li><li> <a href="cn/XUL/Attribute/name">name</a> +</li><li> <a href="cn/XUL/Attribute/negate">negate</a> +</li><li> <a href="cn/XUL/Attribute/newlines">newlines</a> +</li><li> <a href="cn/XUL/Attribute/next">next</a> +</li><li> <a href="cn/XUL/Attribute/noautofocus">noautofocus</a> +</li><li> <a href="cn/XUL/Attribute/noautohide">noautohide</a> +</li><li> <a href="cn/XUL/Attribute/nomatch">nomatch</a> +</li><li> <a href="cn/XUL/Attribute/object">object</a> +</li><li> <a href="cn/XUL/Attribute/observes">observes</a> +</li><li> <a href="cn/XUL/Attribute/onbeforeaccept">onbeforeaccept</a> +</li><li> <a href="cn/XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a> +</li><li> <a href="cn/XUL/Attribute/onchange">onchange</a> +</li><li> <a href="cn/XUL/Attribute/onclosetab">onclosetab</a> +</li><li> <a href="cn/XUL/Attribute/oncommand">oncommand</a> +</li><li> <a href="cn/XUL/Attribute/oncommandupdate">oncommandupdate</a> +</li><li> <a href="cn/XUL/Attribute/ondialogaccept">ondialogaccept</a> +</li><li> <a href="cn/XUL/Attribute/ondialogcancel">ondialogcancel</a> +</li><li> <a href="cn/XUL/Attribute/ondialogdisclosure">ondialogclosure</a> +</li><li> <a href="cn/XUL/Attribute/ondialogextra1">ondialogextra1</a> +</li><li> <a href="cn/XUL/Attribute/ondialogextra2">ondialogextra2</a> +</li><li> <a href="cn/XUL/Attribute/ondialoghelp">ondialoghelp</a> +</li><li> <a href="cn/XUL/Attribute/onerror">onerror</a> +</li><li> <a href="cn/XUL/Attribute/onerrorcommand">onerrorcommand</a> +</li><li> <a href="cn/XUL/Attribute/onextra1">onextra1</a> +</li><li> <a href="cn/XUL/Attribute/onextra2">onextra2</a> +</li><li> <a href="cn/XUL/Attribute/oninput">oninput</a> +</li><li> <a href="cn/XUL/Attribute/onload">onload</a> +</li><li> <a href="cn/XUL/Attribute/onnewtab">onnewtab</a> +</li><li> <a href="cn/XUL/Attribute/onpageadvanced">onpageadvanced</a> +</li><li> <a href="cn/XUL/Attribute/onpagehide">onpagehide</a> +</li><li> <a href="cn/XUL/Attribute/onpagerewound">onpagerewound</a> +</li><li> <a href="cn/XUL/Attribute/onpageshow">onpageshow</a> +</li><li> <a href="cn/XUL/Attribute/onpaneload">onpaneload</a> +</li><li> <a href="cn/XUL/Attribute/onpopuphidden">onpopuphidden</a> +</li><li> <a href="cn/XUL/Attribute/onpopuphiding">onpopuphiding</a> +</li><li> <a href="cn/XUL/Attribute/onpopupshowing">onpopupshowing</a> +</li><li> <a href="cn/XUL/Attribute/onpopupshown">onpopupshown</a> +</li><li> <a href="cn/XUL/Attribute/onsearchcomplete">onsearchcomplete</a> +</li><li> <a href="cn/XUL/Attribute/onselect">onselect</a> +</li><li> <a href="cn/XUL/Attribute/ontextcommand">ontextcommand</a> +</li><li> <a href="cn/XUL/Attribute/ontextentered">ontextentered</a> +</li><li> <a href="cn/XUL/Attribute/ontextrevert">ontextrevert</a> +</li><li> <a href="cn/XUL/Attribute/ontextreverted">ontextreverted</a> +</li><li> <a href="cn/XUL/Attribute/onwizardback">onwizardback</a> +</li><li> <a href="cn/XUL/Attribute/onwizardcancel">onwizardcancel</a> +</li><li> <a href="cn/XUL/Attribute/onwizardfinish">onwizardfinish</a> +</li><li> <a href="cn/XUL/Attribute/onwizardnext">onwizardnext</a> +</li><li> <a href="cn/XUL/Attribute/open">open</a> +</li><li> <a href="cn/XUL/Attribute/ordinal">ordinal</a> +</li><li> <a href="cn/XUL/Attribute/orient">orient</a> +</li><li> <a href="cn/XUL/Attribute/pack">pack</a> +</li><li> <a href="cn/XUL/Attribute/pageid">pageid</a> +</li><li> <a href="cn/XUL/Attribute/pageincrement">pageincrement</a> +</li><li> <a href="cn/XUL/Attribute/pagestep">pagestep</a> +</li><li> <a href="cn/XUL/Attribute/parent">parent</a> +</li><li> <a href="cn/XUL/Attribute/parsetype">parsetype</a> +</li><li> <a href="cn/XUL/Attribute/persist">persist</a> +</li><li> <a href="cn/XUL/Attribute/persistence">persistence</a> +</li><li> <a href="cn/XUL/Attribute/phase">phase</a> +</li><li> <a href="cn/XUL/Attribute/pickertooltiptext">pickertooltiptext</a> +</li><li> <a href="cn/XUL/Attribute/popup">popup</a> +</li><li> <a href="cn/XUL/Attribute/position">position</a> +</li><li> <a href="cn/XUL/Attribute/predicate">predicate</a> +</li><li> <a href="cn/XUL/Attribute/preference">preference</a> +</li><li> <a href="cn/XUL/Attribute/preference-editable">preference-editable</a> +</li><li> <a href="cn/XUL/Attribute/primary">primary</a> +</li><li> <a href="cn/XUL/Attribute/priority">priority</a> +</li><li> <a href="cn/XUL/Attribute/properties">properties</a> +</li><li> <a href="cn/XUL/Attribute/querytype">querytype</a> +</li><li> <a href="cn/XUL/Attribute/readonly">readonly</a> +</li><li> <a href="cn/XUL/Attribute/ref">ref</a> +</li><li> <a href="cn/XUL/Attribute/rel">rel</a> +</li><li> <a href="cn/XUL/Attribute/removeelement">removeelement</a> +</li><li> <a href="cn/XUL/Attribute/resizeafter">resizeafter</a> +</li><li> <a href="cn/XUL/Attribute/resizebefore">resizebefore</a> +</li><li> <a href="cn/XUL/Attribute/rows">rows</a> +</li><li> <a href="cn/XUL/Attribute/screenX">screenX</a> +</li><li> <a href="cn/XUL/Attribute/screenY">screenY</a> +</li><li> <a href="cn/XUL/Attribute/searchSessions">searchSessions</a> +</li><li> <a href="cn/XUL/Attribute/searchlabel">searchlabel</a> +</li><li> <a href="cn/XUL/Attribute/selected">selected</a> +</li><li> <a href="cn/XUL/Attribute/selectedIndex">selectedIndex</a> +</li><li> <a href="cn/XUL/Attribute/seltype">seltype</a> +</li><li> <a href="cn/XUL/Attribute/setfocus">setfocus</a> +</li><li> <a href="cn/XUL/Attribute/showcaret">showcaret</a> +</li><li> <a href="cn/XUL/Attribute/showCommentColumn">showCommentColumn</a> +</li><li> <a href="cn/XUL/Attribute/showcommentcolumn">showcommentcolumn</a> +</li><li> <a href="cn/XUL/Attribute/showpopup">showpopup</a> +</li><li> <a href="cn/XUL/Attribute/size">size</a> +</li><li> <a href="cn/XUL/Attribute/sizemode">sizemode</a> +</li><li> <a href="cn/XUL/Attribute/sizetopopup">sizetopopup</a> +</li><li> <a href="cn/XUL/Attribute/smoothscroll">smoothscroll</a> +</li><li> <a href="cn/XUL/Attribute/sort">sort</a> +</li><li> <a href="cn/XUL/Attribute/sortActive">sortActive</a> +</li><li> <a href="cn/XUL/Attribute/sortDirection">sortDirection</a> +</li><li> <a href="cn/XUL/Attribute/sortResource">sortResource</a> +</li><li> <a href="cn/XUL/Attribute/sortResource2">sortResource2</a> +</li><li> <a href="cn/XUL/Attribute/spellcheck">spellcheck</a> +</li><li> <a href="cn/XUL/Attribute/src">src</a> +</li><li> <a href="cn/XUL/Attribute/state">state</a> +</li><li> <a href="cn/XUL/Attribute/statedatasource">statedatasource</a> +</li><li> <a href="cn/XUL/Attribute/statusbar">statusbar</a> +</li><li> <a href="cn/XUL/Attribute/statustext">statustext</a> +</li><li> <a href="cn/XUL/Attribute/style">style</a> +</li><li> <a href="cn/XUL/Attribute/subject">subject</a> +</li><li> <a href="cn/XUL/Attribute/substate">substate</a> +</li><li> <a href="cn/XUL/Attribute/suppressonselect">suppressonselect</a> +</li><li> <a href="cn/XUL/Attribute/tabindex">tabindex</a> +</li><li> <a href="cn/XUL/Attribute/tabScrolling">tabScrolling</a> +</li><li> <a href="cn/XUL/Attribute/tabscrolling">tabscrolling</a> +</li><li> <a href="cn/XUL/Attribute/targets">targets</a> +</li><li> <a href="cn/XUL/Attribute/template">template</a> +</li><li> <a href="cn/XUL/Attribute/timeout">timeout</a> +</li><li> <a href="cn/XUL/Attribute/title">title</a> +</li><li> <a href="cn/XUL/Attribute/toolbarname">toolbarname</a> +</li><li> <a href="cn/XUL/Attribute/tooltip">tooltip</a> +</li><li> <a href="cn/XUL/Attribute/tooltiptext">tooltiptext</a> +</li><li> <a href="cn/XUL/Attribute/tooltiptextnew">tooltiptextnew</a> +</li><li> <a href="cn/XUL/Attribute/top">top</a> +</li><li> <a href="cn/XUL/Attribute/type">type</a> +</li><li> <a href="cn/XUL/Attribute/uri">uri</a> +</li><li> <a href="cn/XUL/Attribute/userAction">userAction</a> +</li><li> <a href="cn/XUL/Attribute/validate">validate</a> +</li><li> <a href="cn/XUL/Attribute/value">value</a> +</li><li> <a href="cn/XUL/Attribute/var">var</a> +</li><li> <a href="cn/XUL/Attribute/wait-cursor">wait-cursor</a> +</li><li> <a href="cn/XUL/Attribute/width">width</a> +</li><li> <a href="cn/XUL/Attribute/windowtype">windowtype</a> +</li><li> <a href="cn/XUL/Attribute/wrap">wrap</a> +</li><li> <a href="cn/XUL/Attribute/wraparound">wraparound</a> +</li></ul> +<div class="noinclude"> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/label/index.html b/files/zh-cn/mozilla/tech/xul/attribute/label/index.html new file mode 100644 index 0000000000..1846c63a8e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/label/index.html @@ -0,0 +1,41 @@ +--- +title: label +slug: Mozilla/Tech/XUL/Attribute/label +tags: + - XUL Attributes + - XUL Reference +translation_of: Archive/Mozilla/XUL/Attribute/label +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> +<div class="noinclude"> + <h3 id="See_also" name="See_also">See also</h3> + <ul> + <li><a href="/cn/XUL/Attribute/treeitem.label" title="cn/XUL/Attribute/treeitem.label">treeitem.label</a>, <code><a href="/cn/XUL/label" title="cn/XUL/label"><label></a></code> element</li> + </ul> + <h4 id="Examples_in_JavaScript" name="Examples_in_JavaScript">Examples in JavaScript</h4> + <pre><label value="Whaw" id="the-big-label" command="the-big-button"/> +<button id="the-big-button" label="Click me" + oncommand="alert(document.getElementById('the-big-label').value)"/> + +<label id="myLabel" value="My label"/> +<button label="Click me" + oncommand="document.getElementById('myLabel').setAttribute('value','Value changed');" /> + +<checkbox label="my Checkbox" id="myCheckboX"/> +<button label="Another click" + oncommand="document.getElementById('myCheckboX').setAttribute('label','Still not checked');"/> +<button label="Show label of checkbox" + oncommand="alert( document.getElementById('myCheckboX').getAttribute('label') )"/> +</pre> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/max/index.html b/files/zh-cn/mozilla/tech/xul/attribute/max/index.html new file mode 100644 index 0000000000..93eb88d4f7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/max/index.html @@ -0,0 +1,20 @@ +--- +title: max +slug: Mozilla/Tech/XUL/Attribute/max +translation_of: Archive/Mozilla/XUL/Attribute/max +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dd> + 类型:整数</dd> + <dd> + 设置刻度条控件(scale元素)或者数字输入框控件(type属性为number的textbox元素)中能输入的最大数字.刻度条控件中,该属性的默认值为100,数字输入框中,该属性的默认值为无穷大.</dd> +</dl> +<div class="noinclude"> + <h3 id="See_also" name="See_also">相关链接</h3> + <ul> + <li><a href="/en/XUL/Attribute/progressmeter.max" title="en/XUL/Attribute/progressmeter.max">progressmeter.ma</a></li> + </ul> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/menuitem.key/index.html b/files/zh-cn/mozilla/tech/xul/attribute/menuitem.key/index.html new file mode 100644 index 0000000000..b4239b866d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/menuitem.key/index.html @@ -0,0 +1,23 @@ +--- +title: menuitem.key +slug: Mozilla/Tech/XUL/Attribute/menuitem.key +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/menuitem.key +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-menuitem.key"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menuitem.key">key</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/key" title="key">key</a></code> element whose key shortcut is displayed in the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/menuitem.name/index.html b/files/zh-cn/mozilla/tech/xul/attribute/menuitem.name/index.html new file mode 100644 index 0000000000..a485138846 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/menuitem.name/index.html @@ -0,0 +1,38 @@ +--- +title: menuitem.name +slug: Mozilla/Tech/XUL/Attribute/menuitem.name +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/menuitem.name +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-menuitem.name"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menuitem.name">name</a></code></dt> + <dd> + Type: + <i> + string name</i> + </dd> + <dd> + Radio <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>s with the same name as put into a group. Only one <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> in each radio group can be checked at a time.</dd> +</dl> +<div class="noinclude"> + <h3 id="Example" name="Example">Example</h3> + <pre><toolbox> + <menubar id="planets-menubar"> + <menu id="planet-menu" label="Planet"> + <menupopup> + <menuitem id="jupiter" label="Jupiter" type="radio" name="planet"/> + <menuitem id="saturn" label="Saturn" type="radio" name="planet" checked="true"/> + <menuitem id="uranus" label="Uranus" type="radio" name="planet"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + <h3 id="See_also" name="See_also">See also</h3> + <p><a href="cn/XUL/Attribute/name">name</a> and <a href="cn/XUL_Tutorial/More_Menu_Features#Adding_Checkmarks_to_Menus">menus in the XUL Tutorial</a></p> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/menuitem.type/index.html b/files/zh-cn/mozilla/tech/xul/attribute/menuitem.type/index.html new file mode 100644 index 0000000000..872c50331b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/menuitem.type/index.html @@ -0,0 +1,28 @@ +--- +title: menuitem.type +slug: Mozilla/Tech/XUL/Attribute/menuitem.type +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/menuitem.type +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-menuitem.type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menuitem.type">type</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + Can be used to create checkable menuitems or for radio button menuitems.</dd> +</dl> +<ul> + <li><code>checkbox</code>: The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> is checked. The <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute determines whether the menuitem is checked or not.</li> + <li><code>radio</code>: The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> becomes part of a radio group. Other menuitems that have the same value for their <code id="a-name"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/name">name</a></code> attributes are part of the same <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code> group. Only one menuitem in the same radio group can be checked at once.</li> +</ul> +<p>More information on adding checkmarks to menus in the <a href="cn/XUL_Tutorial/More_Menu_Features#Adding_Checkmarks_to_Menus">XUL tutorial</a></p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/min/index.html b/files/zh-cn/mozilla/tech/xul/attribute/min/index.html new file mode 100644 index 0000000000..9646b1da96 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/min/index.html @@ -0,0 +1,16 @@ +--- +title: min +slug: Mozilla/Tech/XUL/Attribute/min +translation_of: Archive/Mozilla/XUL/Attribute/min +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code></dt> + <dd> + 类型:整数</dd> + <dd> + 该控件可以有的最小的整数值,默认值为0.</dd> +</dl> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/name/index.html b/files/zh-cn/mozilla/tech/xul/attribute/name/index.html new file mode 100644 index 0000000000..cd1695a84c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/name/index.html @@ -0,0 +1,16 @@ +--- +title: name +slug: Mozilla/Tech/XUL/Attribute/name +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/name +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span> + <h3 id="See_also" name="See_also">See also</h3> + <ul> + <li><a href="cn/XUL/Attribute/menuitem.name">menuitem.name</a></li> + <li><a href="cn/XUL/Attribute/preference.name">preference.name</a></li> + </ul> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/onpopupshowing/index.html b/files/zh-cn/mozilla/tech/xul/attribute/onpopupshowing/index.html new file mode 100644 index 0000000000..ec821daefe --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/onpopupshowing/index.html @@ -0,0 +1,21 @@ +--- +title: onpopupshowing +slug: Mozilla/Tech/XUL/Attribute/onpopupshowing +translation_of: Archive/Mozilla/XUL/Attribute/onpopupshowing +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-onpopupshowing"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/onpopupshowing">onpopupshowing</a></code></dt> + <dd> + Type: <em>script code</em></dd> + <dd> + This event is sent to a popup just before it is opened. This handler is usually used to dynamically set the contents when the user requests to display it. Returning <code>false</code> from this event handler prevents the popup from appearing.</dd> + <dd> + 该事件在 popup 打开之前传给它。它用于动态生成菜单项。如果返回 false 值，则 popup 将不会显示菜单项。</dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/onpopupshown/index.html b/files/zh-cn/mozilla/tech/xul/attribute/onpopupshown/index.html new file mode 100644 index 0000000000..a94af052a2 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/onpopupshown/index.html @@ -0,0 +1,21 @@ +--- +title: onpopupshown +slug: Mozilla/Tech/XUL/Attribute/onpopupshown +translation_of: Archive/Mozilla/XUL/Attribute/onpopupshown +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-onpopupshown"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/onpopupshown">onpopupshown</a></code></dt> + <dd> + Type: <em>script code</em></dd> + <dd> + This event is sent to a popup after it has been opened, much like the <code>onload</code> event is sent to a window when it is opened.</dd> + <dd> + 该事件在 popup 打开之后触发，与 window 的 onload 事件比较类似。</dd> +</dl> +<div class="noinclude"> + <p></p> +</div> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/orient/index.html b/files/zh-cn/mozilla/tech/xul/attribute/orient/index.html new file mode 100644 index 0000000000..aa1c735a6c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/orient/index.html @@ -0,0 +1,16 @@ +--- +title: orient +slug: Mozilla/Tech/XUL/Attribute/orient +translation_of: Archive/Mozilla/XUL/Attribute/orient +--- +<p><strong>布局(orient)</strong></p> +<dl> + <dd> + 值类型：可以是下面值中的一种。<br> + 指定了子控件的布局(orient)为水平分布的(horizontally)或者是垂直分布的(vertically)。默认值依赖于控件本身。你也可以使用<a href="cn/-moz-box-orient">-moz-box-orient</a>中的样式属性。 + <ul> + <li><strong>horizontally</strong>: 子控件会被按照在xul源文件中出现的位置依次布置在一行中。</li> + <li><strong>vertically</strong>: 子控件会被按照在xul源文件中出现的位置依次布置在一列中。</li> + </ul> + </dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/pending/index.html b/files/zh-cn/mozilla/tech/xul/attribute/pending/index.html new file mode 100644 index 0000000000..0ab9643c8f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/pending/index.html @@ -0,0 +1,15 @@ +--- +title: pending +slug: Mozilla/Tech/XUL/Attribute/pending +translation_of: Archive/Mozilla/XUL/Attribute/pending +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-pending"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pending">pending</a></code> </dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + This attribute is set to <code>true</code> if the tab is currently in the process of being restored by the session store service. Once the tab is restored, this attribute is removed. You can determine if a tab is being restored by checking to see if <code>hasAttribute("pending")</code> is <code>true</code>. If the user has turned on the "Don't load tabs until selected" preference, the <code id="a-pending"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pending">pending</a></code> attribute is set on tabs until they get loaded.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/persist/index.html b/files/zh-cn/mozilla/tech/xul/attribute/persist/index.html new file mode 100644 index 0000000000..b1d30d5a59 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/persist/index.html @@ -0,0 +1,24 @@ +--- +title: persist +slug: Mozilla/Tech/XUL/Attribute/persist +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/persist +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></dt> + <dd> + Type: + <i> + space-separated list of attribute names</i> + </dd> + <dd> + A space-separated list of attributes that are maintained when the window is closed. When the window is re-opened, the values of persistent attributes are restored. In Mozilla, persistent attributes are stored in the per-profile file <code>localstore.rdf</code>. Persistence can also be stored using the <code>document.persist</code> function. In order for persistence to work, the element must also have an <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>.</dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/selected/index.html b/files/zh-cn/mozilla/tech/xul/attribute/selected/index.html new file mode 100644 index 0000000000..47971cd8c8 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/selected/index.html @@ -0,0 +1,28 @@ +--- +title: selected +slug: Mozilla/Tech/XUL/Attribute/selected +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/selected +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is selected or not. This value is read-only. To change the selection, set either the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> or <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code> property of the containing element.</dd> +</dl> +<div class="noinclude"> + <h3 id="See_also" name="See_also">See also</h3> + <ul> + <li><a href="cn/XUL/Attribute/prefpane.selected">prefpane.selected</a></li> + <li><a href="cn/XUL/Attribute/tab.selected">tab.selected</a></li> + </ul> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/selectedindex/index.html b/files/zh-cn/mozilla/tech/xul/attribute/selectedindex/index.html new file mode 100644 index 0000000000..72dd679801 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/selectedindex/index.html @@ -0,0 +1,15 @@ +--- +title: selectedIndex +slug: Mozilla/Tech/XUL/Attribute/selectedIndex +translation_of: Archive/Mozilla/XUL/Attribute/selectedIndex +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-selectedIndex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></dt> + <dd> + 类型: 整数</dd> + <dd> + 获取或设置当前所选面板的索引号,索引号从0开始.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/tabindex/index.html b/files/zh-cn/mozilla/tech/xul/attribute/tabindex/index.html new file mode 100644 index 0000000000..c5e54fdd1c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/tabindex/index.html @@ -0,0 +1,18 @@ +--- +title: tabindex +slug: Mozilla/Tech/XUL/Attribute/tabindex +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/tabindex +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + +<div class="noinclude"> </div> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/validate/index.html b/files/zh-cn/mozilla/tech/xul/attribute/validate/index.html new file mode 100644 index 0000000000..a56181d8b7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/validate/index.html @@ -0,0 +1,27 @@ +--- +title: validate +slug: Mozilla/Tech/XUL/Attribute/validate +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/validate +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-validate"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd> +</dl> +<ul> + <li><code>always</code>: The image is always checked to see whether it should be reloaded.</li> + <li><code>never</code>: The image will be loaded from the cache if possible.</li> +</ul> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/attribute/value/index.html b/files/zh-cn/mozilla/tech/xul/attribute/value/index.html new file mode 100644 index 0000000000..f436308d89 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/attribute/value/index.html @@ -0,0 +1,30 @@ +--- +title: value +slug: Mozilla/Tech/XUL/Attribute/value +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/value +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> +<div class="noinclude"> + <h3 id="See_also" name="See_also">See also</h3> + <ul> + <li><a href="cn/XUL/Attribute/label.value">label.value</a></li> + <li><a href="cn/XUL/Attribute/progressmeter.value">progressmeter.value</a></li> + <li><a href="cn/XUL/Attribute/textbox.value">textbox.value</a></li> + <li><a href="cn/XUL/Attribute/textnode.value">textnode.value</a></li> + </ul> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/broadcaster/index.html b/files/zh-cn/mozilla/tech/xul/broadcaster/index.html new file mode 100644 index 0000000000..be97efef42 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/broadcaster/index.html @@ -0,0 +1,91 @@ +--- +title: broadcaster +slug: Mozilla/Tech/XUL/broadcaster +translation_of: Archive/Mozilla/XUL/broadcaster +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<div class="noinclude"> + <br> + 当您希望若干个元素共享一个或多个属性值时，或者当您想要多个元素对某一个状态改变做出响应是，可以使用 broadcaster。任何监视 broadcaster 的元素都会共享到 broadcaster 中的属性。比如说，假设我们有一个 broadcaster，它拥有一个 <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性，而它的观察者们正在监视这个 label。这时如果 label 发生了改变，label 的观察者们将立刻被唤醒（update）。改变发生时，每个观察者都会收到一个 <code>onbroadcast 事件。</code><br> + <br> + 对于 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> 或者 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> 来说，如果只是为了根据功能是否可用，即时更新菜单项目的 <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> 状态，那么您应该优先考虑 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code>。</div> +<p>更多内容请参考 <a href="/en/XUL_Tutorial/Broadcasters_and_Observers" title="en/XUL_Tutorial/Broadcasters_and_Observers">Broadcasters and Observers</a> XUL Tutorial.</p> +<h3 id="Examples" name="Examples">Examples</h3> +<p>(example needed)</p> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<p>TBD</p> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/browser/index.html b/files/zh-cn/mozilla/tech/xul/browser/index.html new file mode 100644 index 0000000000..4f9a039f3a --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/browser/index.html @@ -0,0 +1,409 @@ +--- +title: browser +slug: Mozilla/Tech/XUL/browser +translation_of: Archive/Mozilla/XUL/browser +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>A frame which is expected to contain a view of a Web document. It is similar to an <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> except that it holds a page history and contains additional methods to manipulate the currently displayed page.</p> +<p>Most of the properties and methods of the browser will rarely be used and can only be called from chrome URLs. Other URLs will need to use the document and history objects to change the displayed document.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-autocompleteenabled">autocompleteenabled</a>, <a href="#a-autocompletepopup">autocompletepopup</a>, <a href="#a-autoscroll">autoscroll</a>, <a href="#a-disablehistory">disablehistory</a>, <a href="#a-disablesecurity">disablesecurity</a>, <a href="#a-homepage">homepage</a>, <a href="#a-showcaret">showcaret</a>, <a href="#a-src">src</a>, <a href="#a-browser.type">type</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-canGoBack">canGoBack</a>, <a href="#p-canGoForward">canGoForward</a>, <a href="#p-contentDocument">contentDocument</a>, <a href="#p-contentPrincipal">contentPrincipal</a>, <a href="#p-contentTitle">contentTitle</a>, <a href="#p-contentViewerEdit">contentViewerEdit</a>, <a href="#p-contentViewerFile">contentViewerFile</a>, <a href="#p-contentWindow">contentWindow</a>, <a href="#p-currentURI">currentURI</a>, <a href="#p-docShell">docShell</a>, <a href="#p-documentCharsetInfo">documentCharsetInfo</a>, <a href="#p-homePage">homePage</a>, <a href="#p-markupDocumentViewer">markupDocumentViewer</a>, <a href="#p-messageManager">messageManager</a>, <a href="#p-browser.preferences">preferences</a>, <a href="#p-securityUI">securityUI</a>, <a href="#p-sessionHistory">sessionHistory</a>, <a href="#p-webBrowserFind">webBrowserFind</a>, <a href="#p-webNavigation">webNavigation</a>, <a href="#p-webProgress">webProgress</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-addProgressListener">addProgressListener</a>, <a href="#m-goBack">goBack</a>, <a href="#m-goForward">goForward</a>, <a href="#m-goHome">goHome</a>, <a href="#m-gotoIndex">gotoIndex</a>, <a href="#m-loadURI">loadURI</a>, <a href="#m-loadURIWithFlags">loadURIWithFlags</a>, <a href="#m-reload">reload</a>, <a href="#m-reloadWithFlags">reloadWithFlags</a>, <a href="#m-removeProgressListener">removeProgressListener</a>, <a href="#m-stop">stop</a>, <a href="#m-swapDocShells">swapDocShells</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_browser.png" class="internal" src="/@api/deki/files/447/=XUL_ref_browser.png"></div> +<pre><!-- shows Mozilla homepage inside a groupbox --> +<groupbox flex="1"> + <caption label="Mozilla homepage"/> + <browser type="content" src="http://www.mozilla.org" flex="1"/> +</groupbox> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p></p> +<p></p><div id="a-autocompleteenabled"> + + +<dl> + <dt><code id="a-autocompleteenabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autocompleteenabled">autocompleteenabled</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set to <code>true</code> to enable autocomplete of fields.</dd> +</dl> +</div> <div id="a-autocompletepopup"> + +<dl> + <dt> + <code id="a-autocompletepopup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autocompletepopup">autocompletepopup</a></code></dt> + <dd> + Type: <em>id</em></dd> + <dd> + The <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/en-US/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code> element used to hold autocomplete results for the element.</dd> +</dl> + +</div> <div id="a-autoscroll"> + + +<dl> + <dt><code id="a-autoscroll"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoscroll">autoscroll</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set to <code>false</code> to disable autoscroll for this browser. If this attribute is set to <code>true</code> or omitted, autoscroll will be enabled or depending on the user preference <code>general.autoScroll</code>.</dd> +</dl> +</div> <div id="a-disablehistory"> + +<dl> <dt><code id="a-disablehistory"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disablehistory">disablehistory</a></code></dt> <dd>Type: <em>boolean</em></dd> <dd>Disables both session and global history for the docshell attached to the browser.</dd> +</dl> +</div> <div id="a-disablesecurity"> + + +<dl> + <dt><code id="a-disablesecurity"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disablesecurity">disablesecurity</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set this attribute to <code>true</code> to disable the security UI for this browser. Omit this attribute off to enable it.</dd> +</dl> +</div> <div id="a-homepage"> + + +<dl> + <dt><code id="a-homepage"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/homepage">homepage</a></code></dt> + <dd>Type: <em>URL</em></dd> + <dd>This attribute allows you to set a homepage for the browser element. It does not have any correlation with the user's browser homepage; instead it is a convenient property to hold a home page. You can switch to this home page using the <span id="m-goHome"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/goHome">goHome</a></code></span> method.</dd> +</dl> +</div> <div id="a-showcaret"> + + +<dl> + <dt><code id="a-showcaret"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/showcaret">showcaret</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Whether or not to cause a typing caret to be visible in the content area. Default is <code>false</code>.</dd> +</dl> + + +</div> <div id="a-src"> + +<dl> + <dt> + <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></dt> + <dd> + Type: <em>URI</em></dd> + <dd> + The URI of the content to appear in the element.</dd> +</dl> + + +</div> <div id="a-browser.type"> + + +<dl> + <dt><code id="a-browser.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/browser.type">type</a></code></dt> + <dd><span class="seoSummary">Type: <em>one of the values below</em>.</span></dd> + <dd><span class="seoSummary">The type of browser, which can be used to set access of the document loaded inside the browser.</span> If this is not set, the loaded document has the same access as the window containing the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>. More precisely: The document loaded into a chrome window is always of chrome type. Subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. This boundary has a number of special effects, such as making window.top == window (unless the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> is added to a chrome document), and preventing documents from inheriting the principal of the parent document. The type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents.</dd> + <dt> + <div class="warning"><strong>Warning: </strong>The type attribute must be set before the element is inserted into the document.</div> + </dt> + <dd> + <dl> + <dt><code>content</code></dt> + <dd>A browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it.</dd> + <dt><code>content-primary</code></dt> + <dd>The primary browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it. For instance, in a web browser, this would be the element that displays the web page. The window for the primary content can be retrieved more conveniently using <a href="/en/DOM/window.content" title="en/DOM/window.content">window.content</a>.</dd> + <dt><code>content-targetable</code></dt> + <dd>One browser among many for content. The content that is loaded inside the browser is not allowed to access the chrome above it. This is the preferred value for any <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.</dd> + <dt><code>chrome</code></dt> + <dd>(default behaviour): A browser, intended to be used for loading privileged content using a chrome:// URI. Don't use for content from web, as this may cause serious security problems!</dd> + </dl> + </dd> +</dl> + + +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-canGoBack"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/canGoBack">canGoBack</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + This read-only property is <code>true</code> if there is a page to go back to in the session history and the Back button should be enabled.</dd> +</dl></div> <div id="p-canGoForward"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/canGoForward">canGoForward</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>This read-only property is <code>true</code> if there is a page to go forward to in the session history and the Forward button should be enabled.</dd> +</dl></div> <div id="p-contentDocument"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentDocument">contentDocument</a></span></code></dt> + <dd> + Type: <em>document</em></dd> + <dd> + This read-only property contains the document object in the element.</dd> +</dl></div> <div id="p-contentPrincipal"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentPrincipal">contentPrincipal</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrincipal" title="">nsIPrincipal</a></code></em></dd> + <dd>This read-only property contains the principal for the content loaded in the browser, which provides security context information.</dd> +</dl></div> <div id="p-contentTitle"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentTitle">contentTitle</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + This read-only property contains the title of the document object in the browser.</dd> +</dl></div> <div id="p-contentViewerEdit"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentViewerEdit">contentViewerEdit</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentViewerEdit" title="">nsIContentViewerEdit</a></code></em></dd> + <dd> + This read-only property contains the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentViewerEdit" title="">nsIContentViewerEdit</a></code> which handles clipboard operations on the document.</dd> +</dl></div> <div id="p-contentViewerFile"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentViewerFile">contentViewerFile</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentViewerFile" title="">nsIContentViewerFile</a></code></em></dd> + <dd> + Reference to the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentViewerFile" title="">nsIContentViewerFile</a></code> interface for the document.</dd> +</dl></div> <div id="p-contentWindow"> +<dl> <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentWindow">contentWindow</a></span></code></dt> <dd>Type: <em>TODO</em></dd> <dd>Use the contentWindow.wrappedJSObject to obtain a DOM(html) window object</dd> +</dl></div> <div id="p-currentURI"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/currentURI">currentURI</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURI" title="">nsIURI</a></code></em></dd> + <dd> + This read-only property contains the currently loaded URL. To change the URL, use the <span id="m-loadURI"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/loadURI">loadURI</a></code></span> method.</dd> +</dl></div> <div id="p-docShell"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/docShell">docShell</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDocShell" title="">nsIDocShell</a></code></em></dd> + <dd> + This read-only property contains the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDocShell" title="">nsIDocShell</a></code> object for the document.</dd> +</dl></div> <div id="p-documentCharsetInfo"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/documentCharsetInfo">documentCharsetInfo</a></span></code> <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)">Obsolete since Gecko 12.0</span></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDocumentCharsetInfo" title="">nsIDocumentCharsetInfo</a></code></em></dd> + <dd> + This read-only property contains the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDocumentCharsetInfo" title="">nsIDocumentCharsetInfo</a></code> object for the document which is used to handle which character set should be used to display the document. The properties of the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDocumentCharsetInfo" title="">nsIDocumentCharsetInfo</a></code> object were merged into the docshell in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9).</dd> +</dl></div> <div id="p-homePage"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/homePage">homePage</a></span></code></dt> + <dd> + Type: <em>string home page URL</em></dd> + <dd> + This property holds the value of the user's home page setting.</dd> +</dl></div> <div id="p-markupDocumentViewer"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/markupDocumentViewer">markupDocumentViewer</a></span></code></dt> + <dd> + 类型: <em><code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMarkupDocumentViewer" title="">nsIMarkupDocumentViewer</a></code></em></dd> + <dd> + 这个只读的属性包含 <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMarkupDocumentViewer" title="">nsIMarkupDocumentViewer</a></code> 接口，负责document文档的绘制。</dd> +</dl></div> <div id="p-messageManager"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/messageManager">messageManager</a></span></code> </dt> + <dd> + Type: <em>message manager object</em></dd> + <dd> + This read-only property returns the <a href="/en/The_message_manager" title="en/The message manager">message manager</a> object for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> element.</dd> +</dl></div> <div id="p-browser.preferences"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/browser.preferences">preferences</a></span></code></dt> + <dd> + 类型: <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService" title="">nsIPrefService</a></code></dd> + <dd> + 这是一个只读属性,其值为一个<code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPref" title="">nsIPref</a></code>对象,可以用来读取或设置用户的首选项.</dd> +</dl></div> <div id="p-securityUI"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/securityUI">securityUI</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISecureBrowserUI" title="">nsISecureBrowserUI</a></code></em></dd> + <dd> + The read-only property holds an object which may be used to determine the security level of the loaded document.</dd> +</dl></div> <div id="p-sessionHistory"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/sessionHistory">sessionHistory</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISHistory" title="">nsISHistory</a></code></em></dd> + <dd> + This read-only property contains the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISHistory" title="">nsISHistory</a></code> object which holds the session history.</dd> +</dl></div> <div id="p-webBrowserFind"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/webBrowserFind">webBrowserFind</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebBrowserFind" title="">nsIWebBrowserFind</a></code></em></dd> + <dd> + This read-only property contains an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebBrowserFind" title="">nsIWebBrowserFind</a></code> object which can be used to search for text in the document.</dd> +</dl></div> <div id="p-webNavigation"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/webNavigation">webNavigation</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebNavigation" title="">nsIWebNavigation</a></code></em></dd> + <dd> + This read-only property contains the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebNavigation" title="">nsIWebNavigation</a></code> object for the document. Most of its methods are callable directly on the element itself, such as <span id="m-goBack"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/goBack">goBack</a></code></span> and <span id="m-goForward"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/goForward">goForward</a></code></span>. It also contains the load constants used by <span id="m-reloadWithFlags"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/reloadWithFlags">reloadWithFlags</a></code></span> and <span id="m-loadURIWithFlags"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/loadURIWithFlags">loadURIWithFlags</a></code></span>.</dd> +</dl></div> <div id="p-webProgress"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/webProgress">webProgress</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgress" title="">nsIWebProgress</a></code></em></dd> + <dd> + This read-only property contains an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgress" title="">nsIWebProgress</a></code> object which is used to monitor the progress of a document loading.</dd> +</dl></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table><p></p> +<p></p><dl> + <dt> + <span id="m-addProgressListener"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/addProgressListener">addProgressListener( listener )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Add a progress listener to the browser which will monitor loaded documents. The progress listener should implement the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgressListener" title="">nsIWebProgressListener</a></code> interface.</dd> +</dl> <dl> + <dt><span id="m-goBack"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/goBack">goBack()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Go back one page in the history.</dd> +</dl> <dl> + <dt><span id="m-goForward"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/goForward">goForward()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Go forward one page in the history.</dd> +</dl> <dl> + <dt><span id="m-goHome"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/goHome">goHome()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Load the user's home page into the browser.</dd> +</dl> <dl> + <dt><span id="m-gotoIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/gotoIndex">gotoIndex( index )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Navigate to the page in the history with the given index. Use a positive number to go forward and a negative number to go back.</dd> +</dl> <p><span class="comment">NOTE: This is the XUL method on <browser> / <tabbrowser>, not the global function in <a class="external" rel="freelink">chrome://browser/content/browser.js</a>. Please check which one you're documenting! (This one has no post data parameter, see loadURIWithFlags for a version that does)</span></p> +<dl> + <dt> + <span id="m-loadURI"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/loadURI">loadURI( uri, referrer, charset )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Load a URL into the document, with the given referrer and character set.</dd> + <dd> + The first argument should be a string, not a <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURI" title="">nsIURI</a></code> object. To get a string from an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURI" title="">nsIURI</a></code>, use <code>nsIURI.spec</code> or <code>nsIURI.asciiSpec</code></dd> +</dl> <dl> + <dt><span id="m-loadURIWithFlags"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/loadURIWithFlags">loadURIWithFlags( uri, flags, referrer, charset, postData )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Load a URL into the document, with the specified load flags, the given referrer, character set, and POST data. In addition to the flags allowed for the <span id="m-reloadWithFlags"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/reloadWithFlags">reloadWithFlags</a></code></span> method, the following flags are also valid: + <ul> + <li><code>LOAD_FLAGS_IS_REFRESH</code>: This flag is used when the URL is loaded because of a meta tag refresh or redirect.</li> + <li><code>LOAD_FLAGS_IS_LINK</code>: This flag is used when the URL is loaded because a user clicked on a link. The HTTP Referer header is set accordingly.</li> + <li><code>LOAD_FLAGS_BYPASS_HISTORY</code>: Do not add the URL to the session history.</li> + <li><code>LOAD_FLAGS_REPLACE_HISTORY</code>: Replace the current URL in the session history with a new one. This flag might be used for a redirect.</li> + </ul> + </dd> +</dl> + +<p>(See <code><a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIWebNavigation#loadURI()">nsIWebNavigation.loadURI()</a></code> for details on the <code>referrer</code> and <code>postData</code> parameters.)</p> <dl> + <dt><span id="m-reload"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/reload">reload()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Reloads the document in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> element on which you call this method.</dd> +</dl> <dl> + <dt><span id="m-reloadWithFlags"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/reloadWithFlags">reloadWithFlags( flags )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Reloads the document in the browser with the given load flags. The flags listed below may be used, which are all constants of the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/webNavigation">webNavigation</a></span></code> property (or the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebNavigation" title="">nsIWebNavigation</a></code> interface). You may combine flags using a or symbol ( <code>|</code> ). + <ul> + <li><code>LOAD_FLAGS_NONE</code>: No special flags. The document is loaded normally.</li> + <li><code>LOAD_FLAGS_BYPASS_CACHE</code>: Reload the page, ignoring if it is already in the cache. This is the flag used when the reload button is pressed while the Shift key is held down.</li> + <li><code>LOAD_FLAGS_BYPASS_PROXY</code>: Reload the page, ignoring the proxy server.</li> + <li><code>LOAD_FLAGS_CHARSET_CHANGE</code>: This flag is used if the document needs to be reloaded because the character set changed.</li> + </ul> + </dd> +</dl> <dl> + <dt><span id="m-removeProgressListener"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeProgressListener">removeProgressListener( listener )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Remove a <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgressListener" title="">nsIWebProgressListener</a></code> from the browser.</dd> +</dl> <dl> + <dt> + <span id="m-stop"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/stop">stop()</a></code></span></dt> + <dd> + 返回值: 无返回值</dd> + <dd> + 效果等同于按下了停止按钮,停止当前页面中文档的加载.</dd> +</dl> <dl> + <dt> + <span id="m-swapDocShells"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/swapDocShells">swapDocShells( otherBrowser )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Swaps the content, history and current state of this <code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> with another browser. During the swap, pagehide and pageshow events are fired on both browsers. This method can be used to move browser between windows or tear off a browser into a new window.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Both browsers must be either standalone browsers or embedded in a <a href="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a>. You can't mix them.</p></div><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="/en/XPCOM_Interface_Reference/nsIAccessibleProvider" title="en/nsIAccessibleProvider">nsIAccessibleProvider</a></dd> +</dl> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/button/index.html b/files/zh-cn/mozilla/tech/xul/button/index.html new file mode 100644 index 0000000000..a3bcf45284 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/button/index.html @@ -0,0 +1,528 @@ +--- +title: button +slug: Mozilla/Tech/XUL/button +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/button +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> + +<p>按钮就是可以点击的东西。事件处理程序可以用来捕获鼠标、键盘和其他事件。它通常呈现为一个灰色开始长方形。您可以指定按钮的<code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性来将按钮的文字设置好，或者直接写在标签中间也行。</p> + +<p>更多信息请参阅 <a href="cn/XUL_Tutorial/Adding_Buttons">XUL tutorial</a>.</p> + +<dl> + <dt>Attributes</dt> + <dd><a href="#a-accesskey">accesskey</a>, <a href="#a-autocheck">autocheck</a>, <a href="#a-checkState">checkState</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-dir">dir</a>, <a href="#a-disabled">disabled</a>, <a href="#a-dlgtype">dlgtype</a>, <a href="#a-group">group</a>, <a href="#a-icon">icon</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-open">open</a>, <a href="#a-orient">orient</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-button.type">type</a></dd> +</dl> + +<dl> + <dt>Properties</dt> + <dd><a href="#p-accessKey">accessKey</a>, <a href="#p-accessibleType">accessibleType</a>, <a href="#p-autoCheck">autoCheck</a>, <a href="#p-checkState">checkState</a>, <a href="#p-checked">checked</a>, <a href="#p-command">command</a>, <a href="#p-crop">crop</a>, <a href="#p-dir">dir</a>, <a href="#p-disabled">disabled</a>, <a href="#p-dlgType">dlgType</a>, <a href="#p-group">group</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-open">open</a>, <a href="#p-orient">orient</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-type">type</a></dd> +</dl> + +<h3 id="Examples" name="Examples">Examples</h3> + +<div class="float-right"><img alt="Image:XUL_ref_button.png"></div> + +<pre class="eval"><button label="Press Me" + oncommand="alert('You pressed me!');"/> +</pre> + +<h3 id="Attributes" name="Attributes">Attributes</h3> + +<p> </p><div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-autoCheck"> + + +<dl> + <dt><code id="a-autocheck"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code></dt> + <dd>类型: + <i>boolean</i> + </dd> + <dd>如果此属性为 <code>true</code>,或空白, 每次点击按钮时，此按钮的状态检查都会被执行一次。如果此属性为<code>false</code>, 检查会手动的被拒绝。当autocheck值为true的时候，按钮将会变为多选框或者单选框。</dd> +</dl> + + + +<p></p> +</div> <div id="a-checkState"> + + +<dl> + <dt><code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checkState</a></code></dt> + <dd>Type: <em>integer</em>, values <code>0</code>, <code>1</code>, or <code>2</code></dd> + <dd>This attribute may be used to create three state buttons, numbered 0, 1 and 2. When in state 0 or 1, pressing the button will switch to the opposite state. When in state 2, pressing the button will switch to state 0. This means that the button acts like a checkbox except that there is a third state which must be set manually by adjusting the check state. If you wish to have different behavior for how the states are adjusted, set the <code id="a-autoCheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoCheck">autoCheck</a></code> attribute to <code>false</code> and adjust the state with a script. The <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute must be set to <code>checkbox</code> for buttons with a check state. Constants for the possible values for this attribute are in the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULButtonElement" title="">nsIDOMXULButtonElement</a></code> interface.</dd> +</dl> +</div> <div id="a-checked"> + +<dl> + <dt> + <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is checked or not.</dd> + <dd> + Use <code>hasAttribute()</code> to determine whether this attribute is set instead of <code>getAttribute()</code>.</dd> + <dd> + For buttons, the <code>type</code> attribute must be set to <code>checkbox</code> or <code>radio</code> for this attribute to have any effect.<magic name="\"PAGENAME\"/"></magic></dd> +</dl> +</div> <div id="a-command"> + +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-dir"> + +<dl> + <dt> + <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + The direction in which the child elements of the element are placed.</dd> +</dl> +<dl> + <dt> + <code>normal</code></dt> + <dd> + For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code</dd> + <dt> + <code>reverse</code></dt> + <dd> + For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.</dd> +</dl> +<ul> +</ul> + +<p> </p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-dlgtype"> + + +<dl> + <dt><code id="a-dlgtype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dlgtype">dlgtype</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The dialog type of the button, used only when the button is in a dialog box. You can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function. For example, if the <code>dlgType</code> is set to <code>accept</code>, the button will replace the dialog box's accept button, which is usually labeled <code>OK</code>. Using this attribute on a button that is not in a dialog box has no effect. The following values can be used as the dialog type:</dd> + <dd> + <dl> + <dt><code>accept</code></dt> + <dd>The OK button, which will accept the changes when pressed.</dd> + <dt><code>cancel</code></dt> + <dd>The cancel button which will cancel the operation.</dd> + <dt><code>help</code></dt> + <dd>A help button for displaying help about the dialog.</dd> + <dt><code>disclosure</code></dt> + <dd>A button to show more information. This might be a button or a disclosure triangle.</dd> + <dt><code>extra1</code></dt> + <dd>An optional additional button.</dd> + <dt><code>extra2</code></dt> + <dd>A second optional additional button.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-group"> + + +<dl> + <dt><code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code></dt> + <dd>Type: <em>string group name</em> </dd> + <dd>Buttons with type="radio" and the same value for their group attribute are put into the same group. Only one button from each group can be checked at a time. If the user selects one the buttons, the others in the group are unchecked.</dd> +</dl> +</div> <div id="a-icon"> + + +<dl> + <dt><code id="a-icon"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/icon">icon</a></code></dt> + <dd><strong><span class="highlightgreen">Mozilla 1.8</span></strong></dd> + <dd>Type: <em>string</em></dd> + <dd>This attribute should be used to set the usage for common buttons. Some platforms display these buttons with a small icon indicating their usage. This should be used in place of the <code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute. Possible values include: <code>accept</code>, <code>cancel</code>, <code>help</code>, <code>open</code>, <code>save</code>, <code>find</code>, <code>clear</code>, <code>yes</code>, <code>no</code>, <code>apply</code>, <code>close</code>, <code>print</code>, <code>add</code>, <code>remove</code>, <code>refresh</code>, <code>go-forward</code>, <code>go-back</code>, <code>properties</code>, <code>select-font</code>, <code>select-color</code>, <code>network</code>. If you are using a button that matches one of these common usages, use the <code>icon</code> attribute to indicate this. See <a href="/en/XUL/button#pageFiles" title="https://developer.mozilla.org/en/XUL/button#pageFiles">the appearance of the different icons on some available platforms</a>.</dd> +</dl> +</div> <div id="a-image"> + +<dl> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + The URL of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> + +<p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-open"> + + +<dl> + <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd> +</dl> +</div> <div id="a-orient"> +<p><strong>布局(orient)</strong></p> +<dl> + <dd> + 值类型：可以是下面值中的一种。<br> + 指定了子控件的布局(orient)为水平分布的(horizontally)或者是垂直分布的(vertically)。默认值依赖于控件本身。你也可以使用<a href="cn/-moz-box-orient">-moz-box-orient</a>中的样式属性。 + <ul> + <li><strong>horizontally</strong>: 子控件会被按照在xul源文件中出现的位置依次布置在一行中。</li> + <li><strong>vertically</strong>: 子控件会被按照在xul源文件中出现的位置依次布置在一列中。</li> + </ul> + </dd> +</dl> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-button.type"> + + +<dl> + <dt><code id="a-button.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/button.type">type</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The type of button. If this attribute is not present, a normal button is created. Leave the attribute out for a normal button.</dd> + <dd> + <dl> + <dt><code>checkbox</code></dt> + <dd>This type of button can be in two states. The user can click the button to switch between the states. This is not the same as a checkbox because it looks like a button.</dd> + <dt><code>menu</code></dt> + <dd>Set the <code>type</code> attribute to the value <code>menu</code> to create a button with a menu popup. Place a <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> element inside the button in this case. The user may click anywhere on the button to open and close the menu.</dd> + <dt><code>menu-button</code></dt> + <dd>You can also use the value <code>menu-button</code> to create a button with a menu. Unlike the <code>menu</code> type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed.</dd> + <dt><code>panel</code></dt> + <dd>Similar to the <code>menu</code> type, this opens a popup. Place a <code><a href="/en-US/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> element inside the button. <code><a href="/en-US/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> elements are popups that support any type of content.</dd> + <dt><code>radio</code></dt> + <dd>The button acts like a radio button. Only one button in the group can be on a once.</dd> + <dt><code>repeat</code></dt> + <dd>This button will fire its command event repeatedly while the mouse button is held down. </dd> + </dl> + </dd> +</dl> +</div><p></p> + +<h3 id="Properties" name="Properties">Properties</h3> + +<p> </p><div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-autoCheck"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/autoCheck">autoCheck</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-autoCheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoCheck">autoCheck</a></code> attribute.</dd> +</dl></div> <div id="p-checkState"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checkState">checkState</a></span></code></dt> + <dd> + Type: <em>integer</em>, values <code>0</code>, <code>1</code>, or <code>2</code></dd> + <dd> + Gets and sets the value of the <code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checkState</a></code> attribute.</dd> +</dl></div> <div id="p-checked"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checked">checked</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute.</dd> +</dl></div> <div id="p-command"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/command">command</a></span></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-dir"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/dir">dir</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attribute.</dd> +</dl></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-dlgType"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/dlgType">dlgType</a></span></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Gets and sets the value of the <code id="a-dlgType"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dlgType">dlgType</a></code> attribute.</dd> +</dl></div> <div id="p-group"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/group">group</a></span></code></dt> + <dd>Type: <em>string group name</em></dd> + <dd>Gets and sets the value of the <code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code> attribute.</dd> +</dl></div> <div id="p-image"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/image">image</a></span></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-open"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/open">open</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> attribute.</dd> +</dl> +</div> <div id="p-orient"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/orient">orient</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attribute.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-type"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/type">type</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute.</dd> +</dl> +</div><p></p> + +<h3 id="Methods" name="Methods">Methods</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> + +<h3 id="Related" name="Related">Related</h3> + +<dl> + <dt>Interfaces</dt> + <dd><a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULButtonElement">nsIDOMXULButtonElement</a></dd> +</dl> + +<div class="noinclude"> </div> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/checkbox/index.html b/files/zh-cn/mozilla/tech/xul/checkbox/index.html new file mode 100644 index 0000000000..ea2eef19ba --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/checkbox/index.html @@ -0,0 +1,329 @@ +--- +title: checkbox +slug: Mozilla/Tech/XUL/checkbox +tags: + - 中文 +translation_of: Archive/Mozilla/XUL/checkbox +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> + +<p>An element that can be turned on and off. This is most commonly rendered as a box when the element is off and a box with a check when the element is on. The user can switch the state of the check box by selecting it with the mouse. A label, specified with the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, may be added beside the check box.</p> + +<p>More information is available in the <a href="/en/XUL_Tutorial/Input_Controls" title="en/XUL_Tutorial/Input_Controls">XUL tutorial</a>.</p> + +<dl> + <dt>Attributes</dt> + <dd><a href="#a-accesskey">accesskey</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-checkbox.src">src</a>, <a href="#a-label">label</a>, <a href="#a-preference">preference</a>, <a href="#a-tabindex">tabindex</a></dd> +</dl> + +<dl> + <dt>Properties</dt> + <dd><a href="#p-accessKey">accessKey</a>, <a href="#p-accessibleType">accessibleType</a>, <a href="#p-checked">checked</a>, <a href="#p-command">command</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-src">src</a>, <a href="#p-label">label</a>, <a href="#p-tabIndex">tabIndex</a></dd> +</dl> + +<h3 id="Examples" name="Examples">Examples</h3> + +<div class="float-right"><img alt="Image:XUL_ref_checkbox.png" class="internal" src="/@api/deki/files/451/=XUL_ref_checkbox.png"></div> + +<pre class="eval"><checkbox label="Enable JavaScript" checked="true"/> +<checkbox label="Enable Java" checked="false"/> +</pre> + +<h3 id="Attributes" name="Attributes">Attributes</h3> + +<p></p> + +<p></p><div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-checked"> + +<dl> + <dt> + <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is checked or not.</dd> + <dd> + Use <code>hasAttribute()</code> to determine whether this attribute is set instead of <code>getAttribute()</code>.</dd> + <dd> + For buttons, the <code>type</code> attribute must be set to <code>checkbox</code> or <code>radio</code> for this attribute to have any effect.<magic name="\"PAGENAME\"/"></magic></dd> +</dl> +</div> <div id="a-command"> + +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-checkbox.src"> + + +<dl> + <dt><code id="a-checkbox.src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkbox.src">src</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>Set this to an URI pointing to an image to appear in the checkbox. If this attribute is left out, no image appears. You can have both an image and a label.</dd> +</dl> + + +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-preference"> + + +<dl> + <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd> +</dl> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div><p></p> + +<h3 id="Properties" name="Properties">Properties</h3> + +<p></p> + +<p></p><div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-checked"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checked">checked</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute.</dd> +</dl></div> <div id="p-command"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/command">command</a></span></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-src"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/src">src</a></span></code></dt> + <dd>Type: <em>URL</em></dd> + <dd>Gets and sets the value of the <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute.</dd> +</dl></div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> + +<h3 id="Methods" name="Methods">Methods</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> + +<h3 id="Related" name="Related">Related</h3> + +<dl> + <dt>Interfaces</dt> + <dd><code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULCheckboxElement" title="">nsIDOMXULCheckboxElement</a></code></dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/command/index.html b/files/zh-cn/mozilla/tech/xul/command/index.html new file mode 100644 index 0000000000..7a9a8916f9 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/command/index.html @@ -0,0 +1,105 @@ +--- +title: command +slug: Mozilla/Tech/XUL/command +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/command +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span><br> + <code>command </code>元素响应不同来源的、对于同一操作的操作请求。比如，剪贴板的粘贴操作，可以来自 “编辑”菜单，可以来自鼠标右键的上下文菜单，也可以来自键盘快捷键。你可以通过 command 的 <code id="a-oncommand"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code> 属性调用代码。对于用户来说，从什么地方触发了这个操作并不重要。另外，关闭 command 将自动关闭菜单中的项目和对键盘快捷键的响应。</div> +<p>Commands are identified by their <code><code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code>. If you include the script <code><a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a></code> in your window, you can use the function <code>goDoCommand</code> function to invoke the command. Using this function has the advantage that the command will be sent to the part of the UI which will respond to it. Typically, this will be the currently focused element.</p> +<p>Like a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code>, commands forward attributes to other elements.</p> +<p>More information is available in the <a href="/cn/XUL_Tutorial/Commands" title="cn/XUL_Tutorial/Commands">XUL tutorial</a>. See also: <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/commandset" title="commandset">commandset</a></code> element</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-disabled">disabled</a>, <a href="#a-label">label</a>, <a href="#a-oncommand">oncommand</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<p>The following code will send a paste command (<code>cmd_paste</code>) to the currently focused element:</p> +<pre class="eval"> // First include <a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a> + goDoCommand("cmd_paste"); +</pre> +<p>Example with two buttons</p> +<pre><command id="cmd_openhelp" oncommand="alert('Help');"/> +<button label="Help" command="cmd_openhelp"/> +<button label="More Help" command="cmd_openhelp"/> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-oncommand"> + + +<dl> + <dt><code id="a-oncommand"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event handler is called when the command is activated. This occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.</dd> +</dl> + + +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<ul> + <li><a href="/cn/XUL/List_of_commands" title="cn/XUL/List_of_commands">XUL:List of commands</a></li> +</ul> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/deprecated_defunct_markup/index.html b/files/zh-cn/mozilla/tech/xul/deprecated_defunct_markup/index.html new file mode 100644 index 0000000000..6ae3102b4f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/deprecated_defunct_markup/index.html @@ -0,0 +1,50 @@ +--- +title: Deprecated/Defunct Markup +slug: Mozilla/Tech/XUL/Deprecated_Defunct_Markup +translation_of: Archive/Mozilla/XUL/Deprecated_and_defunct_markup +--- +<p>The following XUL tags and attribute should be considered deprecated, if not defunct.</p> +<p>The list below may include a few elements which are actually in use, but at a deeper level in the code. Even some of the information on the tags below may be out of date, but is provided here for historical reference and to help anyone who comes across them in old code or documentation.</p> +<h3 id="Elements" name="Elements">Elements</h3> +<ul> + <li><actions> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (listed <a class="external" href="http://www.ar-ent.net/dar/arlib32/out/html/man/xul/elemref/mxdref.html">here</a> (by mistake or was it a container tag?)</li> + <li><autorepeatbutton> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (action occurs repeatedly on mouse hover--used to construct other elements; used in <arrowscrollbox> and large drop-down menus)</li> + <li><bulletinboard> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (made to support left/top styles, but <stack> can now do as well)</li> + <li><gripper> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (inside of <scrollbar><thumb>; not to be used by itself)</li> + <li><listboxbody> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (internal use only; part of XBL for <listbox>)</li> + <li><menubutton> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (experiment in combining buttons and menus; use <button type> instead)</li> + <li><nativescrollbar> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (displayed a native scrollbar; had been for Mac only with native themes on)</li> + <li><outliner> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (former name for <tree>; <listbox> had been "<tree>")</li> + <li><package> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (no longer present but in older documentation)</li> + <li><scrollbarbutton> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (button at end of scrollbar; had been only within larger <scrollbar>)</li> + <li><sidebarheader> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></li> + <li><slider> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (clickable tray in <scrollbar> which holds <thumb>; do not use alone)</li> + <li><spinner> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable)</li> + <li><spring> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (use @flex instead)</li> + <li><strut> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (replaced by @debug?)</li> + <li><tabcontrol> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (contained tabbox and tabpanel)</li> + <li><text> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars)</li> + <li><textfield> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (like <textbox>)</li> + <li><thumb> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar)</li> + <li><title> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (to add a caption on a <titledbox></li> + <li><titledbox> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (box with a frame)</li> + <li><titledbutton> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (attempt to combine text and images before <button>)</li> + <li><toolbarpaletteitem> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></li> + <li><treebody> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (old/experimental and unsupported XUL tags)</li> + <li><treecaption> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (old/experimental and unsupported XUL tags)</li> + <li><treecolgroup> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (former name for <treecols></li> + <li><treecolpicker> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (internal use only; part of XBL for <tree>)</li> + <li><treefoot> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (old/experimental and unsupported XUL tags)</li> + <li><treeindentation> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (old/experimental and unsupported XUL tags)</li> + <li><treeicon> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (old/experimental and unsupported XUL tags)</li> + <li><treerows> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> (internal use only; part of XBL for <tree>)</li> +</ul> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<ul> + <li>@debug="true" <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> provided struts and springs around boxes to facilitate identification of flex issues but does not seem to work now</li> +</ul> +<h3 id="References" name="References">References</h3> +<ul> + <li><a class="external" href="http://www.ar-ent.net/dar/arlib32/out/html/man/xul/elemref/mxdref.html">XUL Element Reference</a> by Neal Deakin</li> + <li>Rapid Application Development With Mozilla, by Nigel McFarlane</li> +</ul> diff --git a/files/zh-cn/mozilla/tech/xul/dialog/index.html b/files/zh-cn/mozilla/tech/xul/dialog/index.html new file mode 100644 index 0000000000..b4e3680bf3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/dialog/index.html @@ -0,0 +1,364 @@ +--- +title: dialog +slug: Mozilla/Tech/XUL/dialog +translation_of: Archive/Mozilla/XUL/dialog +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>在 <a href="/zh-cn/XUL/window" title="zh-cn/XUL/window">window</a> 元素调用对话框时应使用此元素。<code id="a-buttons"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> 属性可以用于设置哪些按钮应该出现在对话框中。这些按钮将被放置在用户平台指定的位置。</p> +<p>更多有用信息可以查看 <a href="/en/XUL_Tutorial/Creating_Dialogs" title="en/XUL_Tutorial/Creating_Dialogs">XUL tutorial</a> 和 <a href="/en/Code_snippets/Dialogs_and_Prompts" title="en/Code_snippets/Dialogs_and_Prompts">Dialogs and prompts</a> (代码片段)。</p> +<dl> <dt>属性</dt> <dd><a href="#a-buttonaccesskeyaccept">buttonaccesskeyaccept</a>, <a href="#a-buttonaccesskeycancel">buttonaccesskeycancel</a>, <a href="#a-buttonaccesskeydisclosure">buttonaccesskeydisclosure</a>, <a href="#a-buttonaccesskeyextra1">buttonaccesskeyextra1</a>, <a href="#a-buttonaccesskeyextra2">buttonaccesskeyextra2</a>, <a href="#a-buttonaccesskeyhelp">buttonaccesskeyhelp</a>, <a href="#a-buttonalign">buttonalign</a>, <a href="#a-buttondir">buttondir</a>, <a href="#a-buttondisabledaccept">buttondisabledaccept</a>, <a href="#a-buttonlabelaccept">buttonlabelaccept</a>, <a href="#a-buttonlabelcancel">buttonlabelcancel</a>, <a href="#a-buttonlabeldisclosure">buttonlabeldisclosure</a>, <a href="#a-buttonlabelextra1">buttonlabelextra1</a>, <a href="#a-buttonlabelextra2">buttonlabelextra2</a>, <a href="#a-buttonlabelhelp">buttonlabelhelp</a>, <a href="#a-buttonorient">buttonorient</a>, <a href="#a-buttonpack">buttonpack</a>, <a href="#a-buttons">buttons</a>, <a href="#a-defaultButton">defaultButton</a>, <a href="#a-ondialogaccept">ondialogaccept</a>, <a href="#a-ondialogcancel">ondialogcancel</a>, <a href="#a-ondialogdisclosure">ondialogdisclosure</a>, <a href="#a-ondialogextra1">ondialogextra1</a>, <a href="#a-ondialogextra2">ondialogextra2</a>, <a href="#a-ondialoghelp">ondialoghelp</a>, <a href="#a-title">title</a></dd> +</dl> +<dl> <dt>特性</dt> <dd><a href="#p-buttons">buttons</a>, <a href="#p-defaultButton">defaultButton</a></dd> +</dl> +<dl> <dt>方法</dt> <dd><a href="#m-acceptDialog">acceptDialog</a>, <a href="#m-cancelDialog">cancelDialog</a>, <a href="#m-centerWindowOnScreen">centerWindowOnScreen</a>, <a href="#m-getButton">getButton</a>, <a href="#m-moveToAlertPosition">moveToAlertPosition</a></dd> +</dl> +<h3 id="Examples" name="Examples">示例</h3> +<div class="float-right"><img alt="Image:XUL_ref_dialog.png" class="internal" src="/@api/deki/files/453/=XUL_ref_dialog.png"></div> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<dialog id="donothing" title="Dialog example" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + buttons="accept,cancel" + buttonlabelcancel="Cancel" + buttonlabelaccept="Save" + ondialogaccept="return doOK();" + ondialogcancel="return doCancel();"> + + <dialogheader title="Options" description="My preferences"/> + <groupbox> + <caption label="Colour"/> + <radiogroup> + <radio label="Red"/> + <radio label="Green" selected="true"/> + <radio label="Blue"/> + </radiogroup> + <label value="Nickname"/> + <textbox /> + </groupbox> +</dialog> +</pre> +<h3 id="Attributes" name="Attributes">属性</h3> +<p> </p><div id="a-activetitlebarcolor"> + +<dl> + <dt> + <code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt> + <dd> + Type: <em>color string</em></dd> + <dd> + Specify background color of the window's titlebar when it is active (foreground). Moreover this hides separator between titlebar and window contents. <em>This only affects Mac OS X.</em></dd> +</dl> + +<p> </p> +</div> <div id="a-buttonaccesskeyaccept"> + +<dl> + <dt> + <code id="a-buttonaccesskeyaccept"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "accept" button.</dd> +</dl> +<p> </p> + +<p> </p> +</div> <div id="a-buttonaccesskeycancel"> + +<dl> + <dt> + <code id="a-buttonaccesskeycancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "cancel" button.</dd> +</dl> +</div> <div id="a-buttonaccesskeydisclosure"> + +<dl> + <dt> + <code id="a-buttonaccesskeydisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "disclosure" button.</dd> +</dl> +</div> <div id="a-buttonaccesskeyextra1"> + +<dl> + <dt> + <code id="a-buttonaccesskeyextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the first extra button.</dd> +</dl> +</div> <div id="a-buttonaccesskeyextra2"> + + +<dl> + <dt><code id="a-buttonaccesskeyextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The access key to use for the second extra button.</dd> +</dl> +</div> <div id="a-buttonaccesskeyhelp"> + +<dl> + <dt> + <code id="a-buttonaccesskeyhelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "help" button.</dd> +</dl> +</div> <div id="a-buttonalign"> + +<dl> + <dt> + <code id="a-buttonalign"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonalign">buttonalign</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The value of the <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttondir"> + + +<dl> + <dt><code id="a-buttondir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttondir">buttondir</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The value of the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttondisabledaccept"> + + +<dl> + <dt><code id="a-buttondisabledaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the accept button is disabled.</dd> +</dl> +</div> <div id="a-buttonlabelaccept"> + + +<dl> + <dt><code id="a-buttonlabelaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "accept" button.</dd> +</dl> +</div> <div id="a-buttonlabelcancel"> + + +<dl> + <dt><code id="a-buttonlabelcancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "cancel" button.</dd> +</dl> +</div> <div id="a-buttonlabeldisclosure"> + + +<dl> + <dt><code id="a-buttonlabeldisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "disclosure" button.</dd> +</dl> +</div> <div id="a-buttonlabelextra1"> + +<dl> + <dt> + <code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The label to appear on the first extra button.</dd> +</dl> + +<p> </p> +</div> <div id="a-buttonlabelextra2"> + +<dl> + <dt> + <code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The label to appear on the second extra button.</dd> +</dl> + +<p> </p> +</div> <div id="a-buttonlabelhelp"> + + +<dl> + <dt><code id="a-buttonlabelhelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "help" button.</dd> +</dl> +</div> <div id="a-buttonorient"> + + +<dl> + <dt><code id="a-buttonorient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonorient">buttonorient</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The value of the <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttonpack"> + + +<dl> + <dt><code id="a-buttonpack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonpack">buttonpack</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The value of the <code id="a-pack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttons"> + +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/buttons">buttons</a></span></code></dt> + <dd> + 类型: 列表，下面的值用逗号分隔</dd> + <dd> + 需要显示在对话框上的按钮的一个列表，使用逗号分隔。将按钮放置在合适的位置，将根据用户平台自动执行基本的事件处理。在列表中可以使用以下值： + <ul> + <li><code>accept</code>：“确定”按钮，按下按钮时将接受更改。此按钮为默认按钮。</li> + <li><code>cancel</code>：“取消”按钮，将取消操作。</li> + <li><code>help</code>：“帮助”按钮，在对话框显示一个“帮助”按钮。</li> + <li><code>disclosure</code>：“更多信息”按钮，显示一个“more info”按钮。该按钮可能是一个按钮或一个三角形。</li> + <li><code>extra1</code>：一个可选的额外的按钮。你可以通过<code><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code> 属性设置它的label。</li> + <li><code>extra2</code>：第二个可选的额外的按钮。你可以通过 <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code> 属性设置它的label。</li> + </ul> + </dd> +</dl> + +<p> </p> +</div> <div id="a-defaultButton"> + + +<dl> + <dt><code id="a-defaultButton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defaultButton">defaultButton</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> attribute.</dd> +</dl> +</div> <div id="a-inactivetitlebarcolor"> + + +<dl> + <dt><code id="a-inactivetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a></code> </dt> + <dd>Type: <em>color string</em></dd> + <dd>Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. <em>This affects only on Mac OS X.</em></dd> +</dl> +</div> <div id="a-ondialogaccept"> + + +<dl> + <dt><code id="a-ondialogaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogaccept">ondialogaccept</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the accept button is pressed, or when the <span id="m-acceptDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/acceptDialog">acceptDialog</a></code></span> method is called. If the handler returns <code>true</code>, the dialog will indeed go away, but if it returns <code>false</code> it will not.</dd> +</dl> +</div> <div id="a-ondialogcancel"> + + +<dl> + <dt><code id="a-ondialogcancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogcancel">ondialogcancel</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the "cancel" button is pressed or when the <span id="m-cancelDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/cancelDialog">cancelDialog</a></code></span> method is called. If the routine returns true, the dialog will indeed go away, but if it returns false it will not.</dd> +</dl> +</div> <div id="a-ondialogdisclosure"> + + +<dl> + <dt><code id="a-ondialogdisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogdisclosure">ondialogdisclosure</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the "disclosure" button is pressed.</dd> +</dl> +</div> <div id="a-ondialogextra1"> + + +<dl> + <dt><code id="a-ondialogextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra1">ondialogextra1</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the first extra button is pressed.</dd> +</dl> +</div> <div id="a-ondialogextra2"> + + +<dl> + <dt><code id="a-ondialogextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra2">ondialogextra2</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the second extra button is pressed.</dd> +</dl> +</div> <div id="a-ondialoghelp"> + + +<dl> + <dt><code id="a-ondialoghelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialoghelp">ondialoghelp</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the "help" button is pressed.</dd> +</dl> +</div> <div id="a-title"> + + +<dl> + <dt><code id="a-title"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The text to appear in the title bar of the window.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">特性</h3> +<p> </p><div id="p-buttons"> +<dl> <dt><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/buttons">buttons</a></span></code></dt> <dd>类型: 列表，下面的值用逗号分隔</dd> <dd>需要显示在对话框上的按钮的一个列表，使用逗号分隔。将按钮放置在合适的位置，将根据用户平台自动执行基本的事件处理。在列表中可以使用以下值： <ul> <li><code>accept</code>：“确定”按钮，按下按钮时将接受更改。此按钮为默认按钮。</li> <li><code>cancel</code>：“取消”按钮，将取消操作。</li> <li><code>help</code>：“帮助”按钮，在对话框显示一个“帮助”按钮。</li> <li><code>disclosure</code>：“更多信息”按钮，显示一个“more info”按钮。该按钮可能是一个按钮或一个三角形。</li> <li><code>extra1</code>：一个可选的额外的按钮。你可以通过<code><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code> 属性设置它的label。</li> <li><code>extra2</code>：第二个可选的额外的按钮。你可以通过 <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code> 属性设置它的label。</li> </ul> </dd> +</dl> +</div> <div id="p-defaultButton"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/defaultButton">defaultButton</a></span></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> attribute.</dd> +</dl></div><p></p><h3 id="Methods" name="Methods">方法</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt> + <span id="m-acceptDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/acceptDialog">acceptDialog()</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Accepts the dialog and closes it, similar to pressing the OK button.</dd> +</dl> <dl> + <dt><span id="m-cancelDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/cancelDialog">cancelDialog()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Cancels the dialog and closes it, similar to pressing the Cancel button.</dd> +</dl> <dl> + <dt><span id="m-centerWindowOnScreen"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/centerWindowOnScreen">centerWindowOnScreen()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Centers the dialog on the screen.</dd> +</dl> <dl> + <dt> + <span id="m-getButton"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getButton">getButton( type )</a></code></span></dt> + <dd> + 返回值类型: <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>元素</dd> + <dd> + 返回当前对话框中指定类型的<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>元素.</dd> +</dl> <dl> + <dt><span id="m-moveToAlertPosition"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/moveToAlertPosition">moveToAlertPosition()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Moves and resizes the dialog to a position and size suitable for an alert box.</dd> +</dl><p></p> +<h3 id="Related" name="Related">相关</h3> +<dl> <dt>Elements</dt> <dd><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/dialogheader" title="dialogheader">dialogheader</a></code></dd> +</dl> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/events/index.html b/files/zh-cn/mozilla/tech/xul/events/index.html new file mode 100644 index 0000000000..02cf21976d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/events/index.html @@ -0,0 +1,497 @@ +--- +title: Events +slug: Mozilla/Tech/XUL/Events +translation_of: Archive/Mozilla/XUL/Events +--- +<div class="boxed translate-display"> +<p> </p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/XUL_Reference" title="« XUL Reference">« XUL Reference</a></p> + +<p> </p> + +<p>下列表格描述了对大部分 XUL 元素有效的事件句柄（Event Handler）。您可以使用 <a href="https://developer.mozilla.org/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a> 添加事件的监听器（Listener），并使用 <a href="https://developer.mozilla.org/en/DOM/element.removeEventListener" title="en/DOM/element.removeEventListener">removeEventListener</a> 以移除这些监听器。</p> + +<p>其中一些事件同样可以使用属性值绑定。当使用属性值绑定事件时，您要注意这样做始终只能绑定一个监听器——后一次绑定会覆盖掉前面一次的绑定。对应的属性名是事件名前加上“on”前缀。</p> + +<h3 id="继承的文档树事件">继承的文档树事件</h3> + +<p>继承的文档树事件（Inherited DOM Events）</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>事件</th> + <th>描述</th> + </tr> + <tr> + <td> + <p>blur</p> + </td> + <td> + <p>与 focus 事件相对，当一个元素失去焦点时会触发 blur 事件。<br> + <strong>属性：</strong>onblur</p> + </td> + </tr> + <tr> + <td> + <p>change</p> + </td> + <td> + <p>当文本框的值被修改且失去焦点后，会触发 change 事件。<br> + <strong>属性：</strong> onchange</p> + </td> + </tr> + <tr> + <td> + <p>click</p> + </td> + <td> + <p>当鼠标键被按下并松开后会触发 click 事件。您可以通过事件对象的 <code>button</code> 属性判断按下的是哪个按键。用户双击时同样会触发这个事件，您可以通过 <code>detail</code> 属性检查有多少次点击发生，用它来检查双击或者三击。在 XUL 中，您应当使用 command 事件响应用户操作，而不应使用 click 事件。</p> + + <p><strong>属性：</strong> onclick</p> + </td> + </tr> + <tr> + <td> + <p>dblclick</p> + </td> + <td> + <p>这个事件和 click 事件类似，但是仅当用户双击鼠标的时候触发。这是另一种检查 click 事件中 detail 属性的方法。<br> + <strong>属性：</strong> ondblclick</p> + </td> + </tr> + <tr> + <td> + <p>DOMMouseScroll</p> + </td> + <td> + <p>当用户滑动鼠标滚轮时会触发这个事件。不论鼠标滚轮的滑动是否造成了页面内容的滚动。事件的 target 属性是滑动滚轮时在鼠标指针下的对象，这与 click 事件相似。</p> + </td> + </tr> + <tr> + <td> + <p>focus</p> + </td> + <td> + <p>当一个元素收到焦点的时候，会触发 focus 属性。一旦某个元素获得了焦点，那么键盘事件将会被发送到这个元素上。焦点可以通过鼠标点击、按 Tab 键、按 back Tab 键切换到其他的元素上。<br> + <strong>属性：</strong> onfocus</p> + </td> + </tr> + <tr> + <td> + <p>keydown</p> + </td> + <td> + <p>当键盘按键被按下但是并未抬起时，会触发当前具有焦点的元素的 keydown 事件。<br> + <strong>属性：</strong> onkeydown</p> + </td> + </tr> + <tr> + <td> + <p>keypress</p> + </td> + <td> + <p>当键盘按键被按下并松开后，会触发当前具有焦点的元素的 keypress 事件。当用户按下并松开一个键时，会依次触发 keydown 事件、 keypress 事件和 keyup 事件。在一个文本框里，用户可以按住一个键来发送多个对应的字符，这时会像用户重复按了对应键多次一样触发多组按键事件。<br> + <strong>属性：</strong> onkeypress</p> + </td> + </tr> + <tr> + <td> + <p>keyup</p> + </td> + <td> + <p>当键盘按键被松开后，会触发当前具有焦点的元素的 keyup 事件。<br> + <strong>属性：</strong> onkeyup</p> + </td> + </tr> + <tr> + <td> + <p>load</p> + </td> + <td> + <p>当一个窗口（window）被完整加载后，会触发他的 load 事件。这个事件被用在窗口元素上和图片（image）元素或其他支持图片属性的上。用在图片元素上时，当图片元素被加载时会触发这个事件。图片元素的 load 事件不会起泡（bubble up），换句话说，不会因此触发窗口的 load 事件。<br> + <strong>属性：</strong> onload</p> + </td> + </tr> + <tr> + <td> + <p>mousedown</p> + </td> + <td> + <p>当鼠标点击了某个元素但尚未松开时，会触发 mousedown 事件。<br> + <strong>属性：</strong> onmousedown</p> + </td> + </tr> + <tr> + <td> + <p>mousemove</p> + </td> + <td> + <p>当鼠标在一个元素上移动时，会反复地发送 mousemove 事件。<br> + <strong>属性：</strong> onmousemove</p> + </td> + </tr> + <tr> + <td> + <p>mouseout</p> + </td> + <td> + <p>与 mouseover 事件相对，当用户将鼠标移出某个元素时，会触发这个元素的 mouseout 事件。<br> + <strong>属性：</strong> onmouseout</p> + </td> + </tr> + <tr> + <td> + <p>mouseover</p> + </td> + <td> + <p>当鼠标首次移动到某个元素上时，会触发这个元素的 mouseover 事件。<span class="short_text" id="result_box" lang="zh-CN"><span class="alt-edited">您可以使用此事件来提供给用户反馈。</span></span><br> + <strong>属性：</strong> onmouseover</p> + </td> + </tr> + <tr> + <td> + <p>mouseup</p> + </td> + <td> + <p>当鼠标在某个元素上松开时，会触发 mouseup 事件。<br> + <strong>属性：</strong> onmouseup</p> + </td> + </tr> + <tr> + <td> + <p>select</p> + </td> + <td> + <p>This event is sent to a listbox or tree when an item is selected.<br> + <strong>属性：</strong> onselect</p> + </td> + </tr> + <tr> + <td> + <p>unload</p> + </td> + <td> + <p>This event is sent to a window when the window has closed. This is done after the close event. You should place this event handler on the window element.<br> + <strong>属性：</strong>onunload</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Mutation_DOM_events" name="Mutation_DOM_events">Mutation 文档树事件</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>事件</th> + <th>描述</th> + </tr> + <tr> + <td> + <p>DOMAttrModified</p> + </td> + <td> + <p>当一个元素的属性被修改时，会触发 DOMAttrModified 事件。您可以通过 <code>attrName</code> 属性查看哪个属性被修改了，并通过 <code>prevValue</code> 和 <code>newValue</code> 属性查看对应属性的旧值和新值。</p> + </td> + </tr> + <tr> + <td> + <p>DOMNodeInserted</p> + </td> + <td> + <p>当一个节点作为一个元素的子节点被添加时，会触发 DOMNodeInsterted 事件。如果您在 document 层捕获这个事件，您可以收到所有对文档修改的动作。</p> + </td> + </tr> + <tr> + <td> + <p>DOMNodeRemoved</p> + </td> + <td> + <p>当一个节点被移除时，会触发 DOMNodeRemoved 事件。如果您在 document 层捕获这个事件，您可以收到所有对文档修改的动作。</p> + </td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>请注意，向文档中添加任何 mutation 事件监听器会降低后续文档树操作的性能。而且在后续操作中移除这些监听器并不会使之好转。要了解详细信息，请参考 <a href="https://developer.mozilla.org/en-US/docs/DOM/Mutation_events" title="en-US/docs/DOM/Mutation_events">Mutation events</a> ，并且参考 <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Mutation_Observers" title="en-US/docs/DOM/DOM_Mutation_Observers">Mutation observers</a> 考虑使用其他效率更好的方式。</p> +</div> + +<h3 id="Common_XUL_events" name="Common_XUL_events">通用 XUL 事件</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>事件</th> + <th>描述</th> + </tr> + <tr> + <td> + <p>broadcast</p> + </td> + <td> + <p>您应当将这个事件句柄置于观察者上。当对应元素（如广播者）的属性被改变时，会触发 boardcast 事件。<br> + <strong>属性：</strong> onbroadcast</p> + </td> + </tr> + <tr> + <td> + <p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Events/close_event">close</a></p> + </td> + <td> + <p>当用户按下关闭按钮以要求关闭窗口时，会触发 close 事件。如果您在一个窗口元素上放置该事件的句柄，您可以陷入（trap）窗口的关闭。如果您在监听器中调用 event.preventDefault() ，可以阻止窗口的关闭。注意， close 事件仅针对用户按了标题栏上的关闭按钮，而不针对诸如点击了菜单中的文件—退出的操作。您可以考虑使用窗口的 unload 事件来处理所有关闭窗口的事件。<br> + <strong>属性：</strong> onclose</p> + </td> + </tr> + <tr> + <td> + <p>command</p> + </td> + <td> + <p>当一个元素被激活时，会触发 command 事件。对于不同的元素，这个事件触发的方式也不尽相同。例如，点击按钮可以触发这个事件，在按钮获得焦点时按回车键也可以触发这个事件，用鼠标选择菜单项时可以触发这个事件，用键盘快捷键选择某个菜单项时同样会触发这个事件。您应当考虑使用 command 事件，而非使用 click 事件，因为 command 事件可以在所有上面说的情况下被调用。<br> + <strong>属性：</strong> oncommand</p> + </td> + </tr> + <tr> + <td> + <p>commandupdate</p> + </td> + <td> + <p>This event occurs when a command update occurs on a <commandset> element. You would use this to update the disabled status of its commands.<br> + <strong>属性：</strong> oncommandupdate</p> + </td> + </tr> + <tr> + <td> + <p>contextmenu</p> + </td> + <td> + <p>当用户试图显示某个元素的菜单时，会触发 contextmenu 事件。因平台不同，这个事件的触发方式也有所不同，通常来说是通过右键单击来触发的。这个事件可以用来在用户点击时动态地设置菜单的内容。您还可以使用 popupshowing 事件。在事件句柄中返回 false 可以阻止菜单弹出。<br> + <strong>属性：</strong> oncontextmenu</p> + </td> + </tr> + <tr> + <td> + <p>drag </p> + </td> + <td> + <p>当拖拽一个节点时，会每秒数次地触发被拖拽节点的 drag 事件。<br> + <strong>属性：</strong> ondrag</p> + </td> + </tr> + <tr> + <td> + <p>dragdrop</p> + </td> + <td> + <p>当用户松开鼠标以释放一个被拖拽的对象时，会触发 dragdrop 事件。The element, if it accepts the drop, should respond in some manner such inserting the dragged object into itself.<br> + <strong>属性：</strong> ondragdrop</p> + </td> + </tr> + <tr> + <td> + <p>dragend </p> + </td> + <td> + <p>当拖拽事件结束时，会触发被拖拽的节点的 dragend 事件。<br> + <strong>属性：</strong> ondragend</p> + </td> + </tr> + <tr> + <td> + <p>dragenter</p> + </td> + <td> + <p>在拖拽过程中，当鼠标节点第一次进入某个对象的范围内时，会触发 dragenter 事件。这个事件与 mouseover 事件相似，不同点在于在拖拽的过程中触发。<br> + <strong>属性：</strong> ondragenter</p> + </td> + </tr> + <tr> + <td> + <p>dragexit</p> + </td> + <td> + <p>在拖拽的过程中，当鼠标指针从一个元素上移出的时候，会触发 dragexit 事件。这个事件同样会在释放元素后触发。这个事件与 mouseout 事件相似，不同点在于在拖拽的过程中触发。<br> + <strong>属性：</strong> ondragexit</p> + </td> + </tr> + <tr> + <td> + <p>draggesture</p> + </td> + <td> + <p>当用户开始拖拽一个元素时，会触发 draggesture 事件。一般来说，拖拽是由按住鼠标移动产生的。<br> + <strong>属性：</strong> ondraggesture</p> + </td> + </tr> + <tr> + <td> + <p>dragover</p> + </td> + <td> + <p>类似于 mouseover 事件，当有东西被拖拽到某个元素之上时，会触发 dragover 事件。这个事件应当判断被拖拽的对象是否可以释放。<br> + <strong>属性：</strong> ondragover</p> + </td> + </tr> + <tr> + <td> + <p>input</p> + </td> + <td> + <p>当用户在文本框输入的时候，会触发 input 事件。仅当显示的文本被修改时会触发这个事件，因此如果用户按了不会显示出来的按键时，这个事件是不会被触发的。<br> + <strong>属性：</strong> oninput</p> + </td> + </tr> + <tr> + <td> + <p>overflow</p> + </td> + <td> + <p>仅当 CSS 的 overflow 属性被设置为 visible 以外的值时才会触发 overflow 。当没有足够的空间显示某个元素当内容时，会触发 overflow 事件。例如，一个最大尺寸为 100 像素的盒，但是可用的空间只有 80 像素，那么就会触发 overflow 事件。如果因为用户修改窗口大小等因素导致大小被改变了，因此有了足够的空间时，会触发相应的 underflow 事件。<br> + <strong>属性：</strong> onoverflow</p> + </td> + </tr> + <tr> + <td> + <p>popuphidden</p> + </td> + <td> + <p>当一个弹出的元素被隐藏了时，会触发 popuphidden 事件。<br> + <strong>属性：</strong> onpopuphidden</p> + </td> + </tr> + <tr> + <td> + <p>popuphiding</p> + </td> + <td> + <p>当一个弹出的元素将被隐藏时，会触发 popuphiding 事件。<br> + <strong>属性：</strong> onpopuphiding</p> + </td> + </tr> + <tr> + <td> + <p>popupshowing</p> + </td> + <td> + <p>当一个弹出元素将被显示时，会触发 popupshowing 事件。这个事件经常被用来在用户需要显示弹出元素时动态地设置它的内容。在句柄中返回 false 可以阻止元素弹出。<br> + <strong>属性：</strong> onpopupshowing</p> + </td> + </tr> + <tr> + <td> + <p>popupshown</p> + </td> + <td> + <p>当一个弹出元素被显示了时，会触发 popupshown 事件。这类似于窗口上的 load 事件。<br> + <strong>属性：</strong> onpopupshown</p> + </td> + </tr> + <tr> + <td> + <p>syncfrompreference</p> + </td> + <td> + <p>因为选项的修改而导致元素改变时，会调用 syncfrompreference 事件。这个事件只会对 <a href="https://developer.mozilla.org/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a> 中的元素生效。这不是实际意义上的事件而仅仅是一个函数调用，所以这个事件必须使用属性形式的语法定义。函数可以返回不同于选项的特定的值。这个事件通常被用于为了让选项值更适合显式在用户界面中而调整选项值。<br> + <strong>属性：</strong> onsyncfrompreference</p> + </td> + </tr> + <tr> + <td> + <p>synctopreference</p> + </td> + <td> + <p>当与对象连接的属性值被修改时，会调用 synctopreference 事件。这不是实际意义上的事件而仅仅是一个函数调用，所以这个事件必须使用属性形式的语法定义。函数可以返回不同于选项的特定的值，以设置属性的值，而非使用元素的 value 。<br> + <strong>属性：</strong> onsynctopreference</p> + </td> + </tr> + <tr> + <td> + <p>underflow</p> + </td> + <td> + <p>当有了足够的空间完整地显示某个元素时，会触发这个元素的 underflow 事件。这个事件对所有 CSS 的 overflow 属性不为 visible 的盒或其他布局元素生效。这个事件说明滚动条已经没必要了。<br> + <strong>属性：</strong> onunderflow</p> + </td> + </tr> + <tr> + <td> + <p>DOMMenuItemActive</p> + </td> + <td> + <p>当鼠标在菜单或菜单项上时或某个菜单项没高亮时，会触发 DOMMenuItemActive 事件。这个事件是起泡的（bubbles）。</p> + </td> + </tr> + <tr> + <td> + <p>DOMMenuItemInactive</p> + </td> + <td> + <p>当鼠标移出菜单或菜单项或某个菜单项不再被高亮时，会触发 DOMMenuItemInactive 事件。这个事件是起泡的。</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="窗口事件">窗口事件</h3> + +<p>下列事件被绑定在顶级文档树窗口上，可以使用 window.addEventListener 监听。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event</th> + <th>Description</th> + </tr> + <tr> + <td>activate </td> + <td>当窗口变为活动窗口时触发。</td> + </tr> + <tr> + <td>deactivate </td> + <td>当窗口变为非活动窗口时触发。</td> + </tr> + <tr> + <td>sizemodechange </td> + <td> + <p>当某个窗口被最小化，取消最小化，切换到全屏模式，或切换到窗口模式时触发。注意，这个事件可能被调用多次，或者因为修改窗口大小而被调用，（见 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=715867" title="FIXED: sizemodechange event fires during resizing on mac, even when sizemode/windowState doesn't change">bug 715867</a> ）。所以应当在事件中查看 <a href="/zh-CN/docs/Web/API/Window/windowState" title="此页面仍未被本地化, 期待您的翻译!"><code>window.windowState</code></a> 检查窗口的状态。</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Accessibility_events" name="Accessibility_events">可访问性事件</h3> + +<p>这些事件被用来通知可访问性系统。一般来说你不应该自行使用这些事件。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event</th> + <th>Description</th> + </tr> + <tr> + <td> + <p>CheckboxStateChange</p> + </td> + <td> + <p>当一个 <a href="https://developer.mozilla.org/en/XUL/checkbox" title="en/XUL/checkbox">checkbox</a> 被选中或取消选中时，会触发 CheckboxStateChange 事件。这个事件可能由于用户动作触发，也可能由于脚本改变了选框的值。相比之下， command 事件只会因为用户的动作而触发，这时 CheckboxStateChange 事件在 command 事件之前触发。 CheckboxStateChange 事件是不起泡的。</p> + </td> + </tr> + <tr> + <td> + <p>RadioStateChange</p> + </td> + <td> + <p>当一个 <a href="https://developer.mozilla.org/en/XUL/radio" title="en/XUL/radio"> radio</a> 被选中时，会触发 RadioStateChange 事件。这个事件可能时由于用户动作触发，也可能时因为脚本修改了对应的值。相比之下， command 事件只会因为用户的动作而触发，这时 RadioStateChange 事件在 command 事件之前触发。 RadioStateChange 事件是起泡的，因此你可以在 <a href="https://developer.mozilla.org/en/XUL/radiogroup" title="en/XUL/radiogroup"> radiogroup</a> 绑定事件句柄。</p> + </td> + </tr> + </tbody> +</table> + +<p></p> +</div> + +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/image/index.html b/files/zh-cn/mozilla/tech/xul/image/index.html new file mode 100644 index 0000000000..f70f4a5f7d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/image/index.html @@ -0,0 +1,145 @@ +--- +title: image +slug: Mozilla/Tech/XUL/image +translation_of: Archive/Mozilla/XUL/image +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<h3 id="Summary">Summary</h3> +<p>用于图片显示的元素,与HTML中的img相似.使用 <code id="a-src"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code>可以指定图片的URL.</p> +<p>More information is available in the <a href="/en/XUL_Tutorial/Adding_Labels_and_Images" title="en/XUL_Tutorial/Adding_Labels_and_Images">XUL tutorial</a>.</p> +<div class="noinclude"> + <div class="note"> + <p><strong>Note:</strong> Prior to <span title="(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)">Gecko 8.0</span>, images did not shrink down with the same ratio in both directions when specifying maximum sizes using <code>maxheight</code> or <code>maxwidth</code>. The new behavior aligns more with the HTML <a href="/zh-CN/docs/Web/HTML/Element/img" title="HTML Image 元素（ <img> ）代表文档中的一个图像。"><code><img></code></a> element and shrinks both the width and height down proportionally.</p> + </div> +</div> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-onerror">onerror</a>, <a href="#a-onload">onload</a>, <a href="#a-src">src</a>, <a href="#a-validate">validate</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-src">src</a></dd> +</dl> +<dl> + <dt> + Style classes</dt> + <dd> + <a href="#s-alert-icon">alert-icon</a>, <a href="#s-error-icon">error-icon</a>, <a href="#s-message-icon">message-icon</a>, <a href="#s-question-icon">question-icon</a></dd> +</dl> +<h3 id="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:Firefoxlogo2.png" class="internal" src="/@api/deki/files/220/=Firefoxlogo2.png"></div> +<pre class="eval"><image src='Firefoxlogo.png' width='135' height='130'/> +</pre> +<h3 id="Attributes">Attributes</h3> +<p> </p><div id="a-onerror"> + + +<dl> + <dt><code id="a-onerror"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onerror">onerror</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent to an <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element when an error occurs loading the image.</dd> +</dl> +</div> <div id="a-onload"> + +<h3 id="See" name="See">See</h3> + +<ul> + <li><code id="a-image.onload"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></li> + <li><code id="a-prefwindow.onload"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/prefwindow.onload">prefwindow.onload</a></code></li> +</ul> + +</div> <div id="a-src"> + +<dl> + <dt> + <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></dt> + <dd> + Type: <em>URI</em></dd> + <dd> + The URI of the content to appear in the element.</dd> +</dl> + + +</div> <div id="a-validate"> + +<dl> + <dt> + <code id="a-validate"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd> +</dl> +<ul> + <li><code>always</code>: The image is always checked to see whether it should be reloaded.</li> + <li><code>never</code>: The image will be loaded from the cache if possible.</li> +</ul> + +<p></p> +</div><p></p> +<h3 id="Properties">Properties</h3> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-src"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/src">src</a></span></code></dt> + <dd>Type: <em>URL</em></dd> + <dd>Gets and sets the value of the <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute.</dd> +</dl></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Style_classes">Style classes</h3> +<p></p><dl> + <dt> + <code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/alert-icon">alert-icon</a></code></dt> + <dd> + Class that adds an alert icon. This typically looks like an exclamation mark. This and the other icon classes may be used by <code><a href="/en-US/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> elements or other elements which can have an image.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/error-icon">error-icon</a></code></dt> + <dd>Class that adds an error icon. This will typically be a red "X" icon.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/message-icon">message-icon</a></code></dt> + <dd>Class that adds a message box icon.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/question-icon">question-icon</a></code></dt> + <dd>Class that adds a question icon, which usually looks like a question mark.</dd> +</dl><p></p> +<h3 id="Related">Related</h3> +<p>See also the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> and <code id="a-icon"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/icon">icon</a></code> attributes.</p> +<h3 id="Interfaces">Interfaces</h3> +<ul> + <li><code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code></li> + <li><code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULImageElement" title="">nsIDOMXULImageElement</a></code></li> +</ul> +<div class="noinclude"> + </div> diff --git a/files/zh-cn/mozilla/tech/xul/index.html b/files/zh-cn/mozilla/tech/xul/index.html new file mode 100644 index 0000000000..ac0e9697f5 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/index.html @@ -0,0 +1,79 @@ +--- +title: XUL +slug: Mozilla/Tech/XUL +tags: + - XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"> + <strong><a href="/cn/XUL_%E6%95%99%E7%A8%8B" title="cn/XUL_教程">从这里开始</a></strong><br> + 帮助你对XUL有一个比较直观的理解（该教程首发于 XULPlanet）</div> +<div> + <p><strong>XUL</strong> 是一个Mozilla使用XML来描述用户界面的一种技术，使用XUL你可以快速的创建出跨平台，基于因特网的应用程序。基于XUL技术的应用程序可以很方便的使用好看的字体、图形以及方便的界面布局，而且也更容易部署和定制。如果程序员已经熟悉了Dynamic HTML (<a href="/cn/DHTML" title="cn/DHTML">DHTML</a>)，那学习XUL将是更容易的事，也可以更快的开发基于XUL的应用程序.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id=".E6.8E.A8.E8.8D.90.E7.9A.84.E6.96.87.E7.AB.A0" name=".E6.8E.A8.E8.8D.90.E7.9A.84.E6.96.87.E7.AB.A0">推荐的文章</h4> + <dl> + <dt> + <a href="/cn/XUL_Reference" title="cn/XUL Reference">XUL模板手册</a></dt> + <dd> + <small>XUL模板是用于提供来自查询或是类似于结果集的内容块的一种方法.一个比较好的例子像数据库查询集.对于每个查询结果集,生成相关的内容块.XUL模板允许使用不的规则来生成基于特定要求的不同内容块,也允许给返回结果集设置属性.</small></dd> + </dl> + <dl> + <dt> + <a class="internal" href="/cn/XUL/XUL_教程" title="cn/XUL/XUL 教程">XUL 教程</a></dt> + <dd> + <small>这份教程教你如何进入XUL (XML User Interface Language,Mozilla的平台无关界面描述语言)神奇世界.设计一个简单的"查找文件"的界面, 对XUL的各种特性进行了解和学习.</small></dd> + </dl> + <dl> + <dt> + <a href="/Cn/XUL/用XUL做你意想不到的事" title="cn/XUL/用XUL做你意想不到的事">XUL:用XUL做你意想不到的事</a></dt> + <dd> + <small>Vlad Vukicevic 写完了这个大杂烩式的 FAQ, 列出了在 XUL 中可以做的事情 (hopefully with bug numbers), 不可以做的事情 (hopefully with explanations), 以及如何解决它们的办法. 欢迎各位添加自己的 XUL 体验到文章里.</small></dd> + </dl> + <dl> + <dt> + <a href="/cn/XTech_2005_Presentations/XUL_-_Mozilla's_XML_User_Interface_Language" title="cn/XTech_2005_Presentations/XUL_-_Mozilla's_XML_User_Interface_Language">Mozilla's XML 用户接口语言</a> (表现层)</dt> + <dd> + <small>Ben Goodger 在阿姆斯特丹(</small><small>Amsterdam</small><small>)的</small><small> XTech 2005 大会上给出了这份关于 XUL 的表现层</small><small>.</small></dd> + </dl> + <dl> + <dt> + <span class="exlink"><a href="/cn/XUL应用程序教程" title="cn/XUL应用程序教程">XUL应用程序教程</a></span></dt> + <dd> + <small>这个教程被设计用来教你学会如何创建一个基于 XUL 的简单程序, 通过循序渐进地开发一个 XUL 程序来演示要讨论的概念.</small></dd> + </dl> + <p><br> + <span class="alllinks"><a href="/Special:Tags?tag=XUL:Articles&language=zh-cn" title="Special:Tags?tag=XUL:Articles&language=zh-cn">显示所有...</a></span></p> + </td> + <td> + <p> </p> + <h4 id=".E7.89.B9.E8.89.B2.E4.B8.BB.E9.A2.98" name=".E7.89.B9.E8.89.B2.E4.B8.BB.E9.A2.98">特色主题</h4> + <ul> + <li><a href="/cn/XUL_%E6%95%99%E7%A8%8B" title="cn/XUL_教程">XUL 教程</a></li> + <li><a href="/cn/Preferences_System" title="cn/Preferences_System">Preferences System</a></li> + <li><a href="/cn/XUL/Template_Guide" title="cn/XUL/Template_Guide">模板手册</a></li> + <li><a href="/cn/Adapting_XUL_Applications_for_Firefox_1.5" title="cn/Adapting_XUL_Applications_for_Firefox_1.5">Adapting XUL Applications for Firefox 1.5</a></li> + </ul> + <h4 id=".E5.85.B6.E4.BB.96.E9.A1.B5.E9.9D.A2" name=".E5.85.B6.E4.BB.96.E9.A1.B5.E9.9D.A2">其他页面</h4> + <ul> + <li><a href="/Special:Tags?tag=XUL:References&language=zh-cn" title="Special:Tags?tag=XUL:References&language=zh-cn">XUL 手册</a></li> + <li><a href="/Special:Tags?tag=XUL:Articles&language=zh-cn" title="Special:Tags?tag=XUL:Articles&language=zh-cn">XUL 文章</a></li> + <li><a href="/Special:Tags?tag=XUL:Tools&language=zh-cn" title="Special:Tags?tag=XUL:Tools&language=zh-cn">工具</a></li> + <li><a href="/Special:Tags?tag=XUL:Examples&language=zh-cn" title="Special:Tags?tag=XUL:Examples&language=zh-cn">示例</a></li> + <li><a href="/cn/XUL/Community" title="cn/XUL/Community">社区</a></li> + <li><a href="/cn/XUL/Other_Resources" title="cn/XUL/Other_Resources">其他资源</a></li> + </ul> + <h4 id=".E5.85.B3.E8.81.94.E4.B8.BB.E9.A2.98" name=".E5.85.B3.E8.81.94.E4.B8.BB.E9.A2.98">关联主题</h4> + <dl> + <dd> + <a href="/cn/JavaScript" title="cn/JavaScript">JavaScript</a>, <a href="/cn/xbl" title="cn/xbl">XBL</a>, <a href="/cn/CSS" title="cn/CSS">CSS</a>, <a href="/cn/RDF" title="cn/RDF">RDF</a><span class="alllinks"><a class="external" href="http://developer.mozilla.org/webwatch/?cat=23">显示所有...</a></span></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/key/index.html b/files/zh-cn/mozilla/tech/xul/key/index.html new file mode 100644 index 0000000000..13fabfbd2d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/key/index.html @@ -0,0 +1,166 @@ +--- +title: key +slug: Mozilla/Tech/XUL/key +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/key +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>The <code>key</code> element defines a keyboard shortcut. Event handlers can be used to respond when the appropriate keys are pressed. A <code>key</code> element must be placed inside a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/keyset" title="keyset">keyset</a></code> element.</p> +<p>When a key matching the attributes on the key element is pressed, the command will be fired on the key element. The key pressed must match the key attribute (or keycode attribute) as well as the modifiers attribute in order for the key element to be activated and fire a command event.</p> +<p>For example, consider the following key:</p> +<pre class="eval"><key key="r" modifiers="shift"/> +</pre> +<p>This key will only match when the Shift key is pressed as well as the R key, and no other keys. For instance, if the Shift, Control and R keys are all pressed, the key will not match.</p> +<p>To indiciate that a modifier key may optionally be pressed, place the word 'any' after listing the optional modifier key. For example:</p> +<pre class="eval"><key key="r" modifiers="shift any control"/> +</pre> +<p>In this example, the shift key may or may not be pressed, while the control key must be pressed. This allows keys to match more loosely for modifier keys that aren't relevant, yet still allows specific modifiers to be required.</p> +<p>If the modifiers attribute is not specified, then no modifiers may be pressed for the key to match.</p> +<p>If neither the key or keycode attribute are used, the key element will handle all key events. However, if one of the attributes is set to an empty string, the element doesn't handle any key events. For example:</p> +<pre class="eval"><!-- This element handles all key events --> +<key/> + +<!-- These elements don't handle any key events --> +<key key="" modifiers="control"/> +<key keycode="" modifiers="control"/> +</pre> +<p>More information is available in the <a href="cn/XUL_Tutorial/Keyboard_Shortcuts">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-command">command</a>, <a href="#a-disabled">disabled</a>, <a href="#a-key">key</a>, <a href="#a-keycode">keycode</a>, <a href="#a-keytext">keytext</a>, <a href="#a-modifiers">modifiers</a>, <a href="#a-oncommand">oncommand</a>, <a href="#a-phase">phase</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<p>(example needed)</p> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-command"> + +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-key"> + + +<dl> + <dt><code id="a-key"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></dt> + <dd>Type: <em>character</em></dd> + <dd>The character that must be pressed. This should be set to a displayable character.</dd> +</dl> +</div> <div id="a-keycode"> + + +<dl> + <dt><code id="a-keycode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></dt> + <dd>Type: <em>string key code</em></dd> + <dd>For keys that do not have displayable characters, such as the Enter key or function keys, use this attribute instead of the <code id="a-key"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code> attribute. Valid keys are listed at <a class="internal" href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="en/XUL Tutorial/Keyboard Shortcuts">Keyboard Shortcuts</a>.</dd> +</dl> +</div> <div id="a-keytext"> + + +<dl> + <dt><code id="a-keytext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/keytext">keytext</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>A label for the keyboard shortcut. This text would appear next to a <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> label if that <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> is associated with the <code><a href="/en-US/docs/Mozilla/Tech/XUL/key" title="key">key</a></code> element via its <code id="a-key"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code> attribute.</dd> +</dl> +</div> <div id="a-modifiers"> + + +<dl> + <dt><code id="a-modifiers"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/modifiers">modifiers</a></code></dt> + <dd>Type: <em>space-separated list of the values below</em></dd> + <dd>A list of modifier keys that should be pressed to invoke the keyboard shortcut. Multiple keys may be separated by spaces or commas. Keys will map to other keys on platforms that do not have them.</dd> +</dl> + +<ul> + <li><code>shift</code>: The Shift key.</li> + <li><code>alt</code>: The Alt key. On the Macintosh, this is the Option key. On Macintosh this can only be used in conjunction with another modifier, since Alt+Letter combinations are reserved for entering special characters in text.</li> + <li><code>meta</code>: The Meta key. On the Macintosh, this is the Command key.</li> + <li><code>control</code>: The Control key.</li> + <li><code>os</code>: Windows logo key on Windows, Super or Hyper key on Linux. This shouldn't be specified directly because it may conflict with system wide shortcut key. </li> + <li><code>accel</code>: The key used for keyboard shortcuts on the user's platform, which is Control on Windows and Linux, and Command on Mac. Usually, this would be the value you would use.</li> + <li><code>access</code>: The access key for activating menus and other elements. On Windows, this is the Alt key, used in conjuction with an element's accesskey.</li> + <li><code>any</code>: Indicates that all modifiers preceding it are optional.</li> +</ul> +</div> <div id="a-oncommand"> + + +<dl> + <dt><code id="a-oncommand"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event handler is called when the command is activated. This occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.</dd> +</dl> + + +</div> <div id="a-phase"> + + +<dl> + <dt><code id="a-phase"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/phase">phase</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The event phase where the handler is invoked. This should be set to the value <code>capturing</code> to indicate during the event capturing phase or <code>target</code> to indicate at the target element or left out entirely for the bubbling phase.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<p>TBD</p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/label/index.html b/files/zh-cn/mozilla/tech/xul/label/index.html new file mode 100644 index 0000000000..f6201f62c0 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/label/index.html @@ -0,0 +1,298 @@ +--- +title: label +slug: Mozilla/Tech/XUL/label +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/label +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>This element is used to provide a label for a control element. If the user clicks the label, it will move the focus to the associated control, specified with the <code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> attribute.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/Adding_Labels_and_Images">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-accesskey">accesskey</a>, <a href="#a-control">control</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-href">href</a>, <a href="#a-label.value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessKey">accessKey</a>, <a href="#p-accessibleType">accessibleType</a>, <a href="#p-control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-value">value</a></dd> +</dl> +<dl> + <dt> + Style classes</dt> + <dd> + <a href="#s-header">header</a>, <a href="#s-indent">indent</a>, <a href="#s-monospace">monospace</a>, <a href="#s-plain">plain</a>, <a href="#s-small-margin">small-margin</a>, <a href="#s-text-link">text-link</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_label.png"></div> +<pre class="eval"><label value="Email address" control="email"/> +<textbox id="email"/> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-control"> + +<dl> + <dt> + <code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></dt> + <dd> + Type: <em>element id</em></dd> + <dd> + This attribute specifies the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the element with which the label is associated. When the user clicks on the label, the associated element is given focus.<br> + 这个属性定义了元素的<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>，它与<code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code>相关联。当用户点击 <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 的时候，相关联的元素将获得焦点。</dd> +</dl> + +<p> </p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-href"> + + +<dl> + <dt><code id="a-href"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/href">href</a></code></dt> + <dd>类型: <em>文本</em></dd> + <dd>定义一个当元素被点击时将会打开的 URL 。需要引用类 <a href="/en/XUL/Style/text-link" title="en/XUL/Style/text-link">text-link </a>。</dd> +</dl> + + + + +</div> <div id="a-label.value"> + + +<dl> + <dt><code id="a-label.value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label.value">value</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The text to be used for the label.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-control"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/control">control</a></span></code></dt> + <dd> + Type: <em>element id</em></dd> + <dd> + Gets and sets the value of the <code id="a-control"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> attribute.</dd> +</dl> +</div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Style_classes" name="Style_classes">Style classes</h3> +<p>The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.</p> +<p></p><dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/header">header</a></code></dt> + <dd>A class used for headings. Typically, this will cause the text to appear bold.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/indent">indent</a></code></dt> + <dd>This class causes the text to be indented on its left side.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/monospace">monospace</a></code></dt> + <dd>This class causes the text to be displayed in a monospace font.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/plain">plain</a></code></dt> + <dd>This class causes the element to be displayed with no border or margin.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/small-margin">small-margin</a></code></dt> + <dd>This class causes the text to be displayed with a smaller margin.</dd> +</dl> <dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/text-link">text-link</a></code></dt> + <dd>Labels with this class may be focused and the click handler run or the address in the <a href="/en/XUL/Attribute/href" title="en/XUL/Attribute/href">href attribute</a> opened on a mouse click or Enter key press. Labels will appear like a link (blue and underlined).</dd> +</dl><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></dd> +</dl> +<dl> + <dt> + Attributes</dt> + <dd> + <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULLabelElement">nsIDOMXULLabelElement</a></dd> +</dl> +<h3 id="User_notes" name="User_notes">User notes</h3> +<p>Remember that the label element has a "value" attribute, unlike value in HTML whereas buttons, checkboxes use label="foo" as the attribute</p> +<pre><label label="A Caption"/> <-- wrong --> +<label value="A Caption"/> + +<label value="Click the button"/> +<button label="A Button"/> +<checkbox label="A Decision" value="1"/> +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/list_of_commands/index.html b/files/zh-cn/mozilla/tech/xul/list_of_commands/index.html new file mode 100644 index 0000000000..54ff23cabf --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/list_of_commands/index.html @@ -0,0 +1,196 @@ +--- +title: List of commands +slug: Mozilla/Tech/XUL/List_of_commands +translation_of: Archive/Mozilla/XUL/List_of_commands +--- +<p>The following lists <a href="/en/XUL_Tutorial/Commands" title="en/XUL_Tutorial/Commands">commands</a> which might be usable by <command> or command dispatchers/controllers.</p> +<h3 id="List_of_Commands_.28grouped_by_type.29" name="List_of_Commands_.28grouped_by_type.29">List of Commands (grouped by type)</h3> +<h4 id="nsDomWindowController_commands_.28generally_legal_when_there_is_a_selection.29:" name="nsDomWindowController_commands_.28generally_legal_when_there_is_a_selection.29:">nsDomWindowController commands (generally legal when there is a selection):</h4> +<ul> + <li>cmd_copy - copy a selection to the clipboard</li> + <li>cmd_cut - cut a selection into the clipboard</li> + <li>cmd_paste - paste a selection from the clipboard</li> + <li>cmd_selectAll</li> + <li>cmd_selectNone</li> + <li>cmd_copyLink</li> + <li>cmd_copyImageLocation</li> + <li>cmd_copyImageContents</li> + <li>cmd_scrollTop</li> + <li>cmd_scrollBottom</li> + <li>cmd_scrollPageUp</li> + <li>cmd_scrollPageDown</li> + <li>cmd_scrollLineUp</li> + <li>cmd_scrollLineDown</li> + <li>cmd_scrollLeft</li> + <li>cmd_scrollRight</li> + <li>cmd_selectCharPrevious</li> + <li>cmd_selectCharNext</li> + <li>cmd_wordPrevious</li> + <li>cmd_wordNext</li> + <li>cmd_selectWordPrevious</li> + <li>cmd_selectWordNext</li> + <li>cmd_beginLine</li> + <li>cmd_endLine</li> + <li>cmd_selectBeginLine</li> + <li>cmd_selectEndLine</li> + <li>cmd_selectLinePrevious</li> + <li>cmd_selectLineNext</li> + <li>cmd_selectPagePrevious</li> + <li>cmd_selectPageNext</li> + <li>cmd_selectMoveTop</li> + <li>cmd_selectMoveBottom</li> +</ul> +<h4 id="Editor_commands_.28legal_when_the_focus_is_anywhere_where_you_can_type_text.29:" name="Editor_commands_.28legal_when_the_focus_is_anywhere_where_you_can_type_text.29:">Editor commands (legal when the focus is anywhere where you can type text):</h4> +<ul> + <li>cmd_paste - paste a selection from the clipboard</li> + <li>cmd_pasteQuote</li> + <li>cmd_delete</li> + <li>cmd_deleteCharBackward</li> + <li>cmd_deleteCharForward</li> + <li>cmd_deleteWordBackward</li> + <li>cmd_deleteWordForward</li> + <li>cmd_deleteToBeginningOfLine</li> + <li>cmd_deleteToEndOfLine</li> + <li>cmd_scrollTop</li> + <li>cmd_scrollBottom</li> + <li>cmd_moveTop</li> + <li>cmd_moveBottom</li> + <li>cmd_selectTop</li> + <li>cmd_selectBottom</li> + <li>cmd_lineNext</li> + <li>cmd_linePrevious</li> + <li>cmd_selectLineNext</li> + <li>cmd_selectLinePrevious</li> + <li>cmd_charPrevious</li> + <li>cmd_charNext</li> + <li>cmd_selectCharPrevious</li> + <li>cmd_selectCharNext</li> + <li>cmd_beginLine</li> + <li>cmd_endLine</li> + <li>cmd_selectBeginLine</li> + <li>cmd_selectEndLine</li> + <li>cmd_wordPrevious</li> + <li>cmd_wordNext</li> + <li>cmd_selectWordPrevious</li> + <li>cmd_selectWordNext</li> + <li>cmd_scrollPageUp</li> + <li>cmd_scrollPageDown</li> + <li>cmd_scrollLineUp</li> + <li>cmd_scrollLineDown</li> + <li>cmd_movePageUp</li> + <li>cmd_movePageDown</li> + <li>cmd_selectPageUp</li> + <li>cmd_selectPageDown</li> +</ul> +<h4 id="Other_commands" name="Other_commands">Other commands</h4> +<p>The following list other commands (prefixed by cmd_ or Browser:) which have not been categorized here yet (though they are in the alphabetical list below):</p> +<ul> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/browser/resources/content/linkToolbarOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...barOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/browser/resources/content/navigator.js" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...t/navigator.js</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/browser/resources/content/navigatorOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...torOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/browser/resources/content/personalToolbar.js" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...onalToolbar.js</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/browser/resources/content/viewSourceOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...rceOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/communicator/resources/content/contentAreaContextOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...extOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/communicator/resources/content/utilityOverlay.js" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...lityOverlay.js</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/communicator/resources/content/viewZoomOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...oomOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/communicator/resources/content/unix/platformCommunicatorOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...torOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/components/bookmarks/resources/locale/en-US/bookmark.properties" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...ark.properties</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/components/bookmarks/resources/bookmarks-temp.js" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/components/bookmarks/resources/bookmarks.xml" rel="freelink">http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/components/bookmarks/resources/bookmarksOverlay.xul" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...rksOverlay.xul</a></li> + <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/components/bookmarks/resources/bookmarksTree.js" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...okmarksTree.js</a></li> +</ul> +<p> </p> +<h3 id="List_of_commands_.28listed_alphabetically.29" name="List_of_commands_.28listed_alphabetically.29">List of commands (listed alphabetically)</h3> +<ul> + <li>Browser:AddBookmark</li> + <li>Browser:AddBookmarkAs</li> + <li>Browser:AddGroupmarkAs</li> + <li>Browser:Back</li> + <li>Browser:EditPage</li> + <li>Browser:Find</li> + <li>Browser:FindAgain</li> + <li>Browser:FindPrev</li> + <li>Browser:Forward</li> + <li>Browser:Home</li> + <li>Browser:ManageBookmark</li> + <li>Browser:Open</li> + <li>Browser:OpenFile</li> + <li>Browser:Print</li> + <li>Browser:PrintPreview</li> + <li>Browser:SavePage</li> + <li>Browser:SearchInternet</li> + <li>Browser:SendPage</li> + <li>Browser:UploadFile</li> + <li>cmd_bm_copy</li> + <li>cmd_bm_cut</li> + <li>cmd_bm_delete</li> + <li>cmd_bm_expandfolder</li> + <li>cmd_bm_export</li> + <li>cmd_bm_find</li> + <li>cmd_bm_import</li> + <li>cmd_bm_managefolder</li> + <li>cmd_bm_movebookmark</li> + <li>cmd_bm_newbookmark</li> + <li>cmd_bm_newfolder</li> + <li>cmd_bm_newseparator</li> + <li>cmd_bm_open</li> + <li>cmd_bm_openinnewtab</li> + <li>cmd_bm_openinnewwindow</li> + <li>cmd_bm_paste</li> + <li>cmd_bm_properties</li> + <li>cmd_bm_rename</li> + <li>cmd_bm_selectAll</li> + <li>cmd_bm_setnewbookmarkfolder</li> + <li>cmd_bm_setnewsearchfolder</li> + <li>cmd_bm_setpersonaltoolbarfolder</li> + <li>cmd_bm_sortfolder</li> + <li>cmd_bm_sortfolderbyname</li> + <li>cmd_close</li> + <li>cmd_closeOtherTabs</li> + <li>cmd_closeWindow</li> + <li>cmd_copy</li> + <li>cmd_copyImage</li> + <li>cmd_copyLink</li> + <li>cmd_cut</li> + <li>cmd_delete</li> + <li>cmd_editPage</li> + <li>cmd_findTypeLinks</li> + <li>cmd_findTypeText</li> + <li>cmd_goToLine</li> + <li>cmd_handleBackspace</li> + <li>cmd_handleShiftBackspace</li> + <li>cmd_minimizeWindow</li> + <li>cmd_newEditor</li> + <li>cmd_newEditorDraft</li> + <li>cmd_newEditorTemplate</li> + <li>cmd_newNavigator</li> + <li>cmd_newNavigatorTab</li> + <li>cmd_newTabWithTarget</li> + <li>cmd_openHelp</li> + <li>cmd_paste - paste a selection from the clipboard</li> + <li>cmd_printSetup</li> + <li>cmd_quit</li> + <li>cmd_redo</li> + <li>cmd_savePage</li> + <li>cmd_scrollPageDown</li> + <li>cmd_scrollPageUp</li> + <li>cmd_selectAll</li> + <li>cmd_SwitchDocumentDirection</li> + <li>cmd_switchTextDirection</li> + <li>cmd_textZoomEnlarge</li> + <li>cmd_textZoomReduce</li> + <li>cmd_textZoomReset</li> + <li>cmd_undo</li> + <li>cmd_viewcomponentbar</li> + <li>cmd_viewlinktoolbar</li> + <li>cmd_viewlinktoolbar_false</li> + <li>cmd_viewlinktoolbar_maybe</li> + <li>cmd_viewlinktoolbar_true</li> + <li>cmd_viewnavbar</li> + <li>cmd_viewpersonaltoolbar</li> + <li>cmd_viewtaskbar</li> + <li>cmd_zoomWindow</li> +</ul> +<p>Thanks for help of joe.user0 in compiling: <a class="external" href="http://readlist.com/lists/mozilla.org/mozilla-general/3/15261.html" rel="freelink">http://readlist.com/lists/mozilla.or...l/3/15261.html</a> . Also obtained from <a class="external" href="http://www.mozilla.org/unix/customizing.html" rel="freelink">http://www.mozilla.org/unix/customizing.html</a></p> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/listbox/index.html b/files/zh-cn/mozilla/tech/xul/listbox/index.html new file mode 100644 index 0000000000..04489bf06d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/listbox/index.html @@ -0,0 +1,480 @@ +--- +title: listbox +slug: Mozilla/Tech/XUL/listbox +translation_of: Archive/Mozilla/XUL/listbox +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>This element is used to create a list of items where one or more of the items may be selected. A listbox may contain multiple columns. There are numerous methods which allow the items in the listbox to be retrieved and modified.</p> +<p>You may specify the number of rows to display in the list using the <code id="a-rows"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code> attribute. Additional rows can be viewed using a scroll bar. A listbox is expected to contain <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> elements. All the rows in the listbox are the same height, which is the height of the tallest item in the list. If you wish to create a list with variable height rows, or with non-text content, you should instead use the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/richlistbox" title="richlistbox">richlistbox</a></code> element.</p> +<p>See <a href="/en/XUL_Tutorial/List_Controls" title="en/XUL_Tutorial/List_Controls">List Controls</a> for more information.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-disabled">disabled</a>, <a href="#a-disableKeyNavigation">disableKeyNavigation</a>, <a href="#a-preference">preference</a>, <a href="#a-rows">rows</a>, <a href="#a-seltype">seltype</a>, <a href="#a-suppressonselect">suppressonselect</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-listbox.currentIndex">currentIndex</a>, <a href="#p-currentItem">currentItem</a>, <a href="#p-disabled">disabled</a>, <a href="#p-disableKeyNavigation">disableKeyNavigation</a>, <a href="#p-itemCount">itemCount</a>, <a href="#p-listBoxObject">listBoxObject</a>, <a href="#p-selectedCount">selectedCount</a>, <a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedItem">selectedItem</a>, <a href="#p-selectedItems">selectedItems</a>, <a href="#p-selType">selType</a>, <a href="#p-suppressOnSelect">suppressOnSelect</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-addItemToSelection">addItemToSelection</a>, <a href="#m-appendItem">appendItem</a>, <a href="#m-clearSelection">clearSelection</a>, <a href="#m-ensureElementIsVisible">ensureElementIsVisible</a>, <a href="#m-ensureIndexIsVisible">ensureIndexIsVisible</a>, <a href="#m-getIndexOfFirstVisibleRow">getIndexOfFirstVisibleRow</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-getNumberofVisibleRows">getNumberofVisibleRows</a>, <a href="#m-getRowCount">getRowCount</a>, <a href="#m-getSelectedItem">getSelectedItem</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-invertSelection">invertSelection</a>, <a href="#m-moveByOffset">moveByOffset</a>, <a href="#m-removeItemAt">removeItemAt</a>, <a href="#m-removeItemFromSelection">removeItemFromSelection</a>, <a href="#m-scrollToIndex">scrollToIndex</a>, <a href="#m-selectAll">selectAll</a>, <a href="#m-selectItem">selectItem</a>, <a href="#m-selectItemRange">selectItemRange</a>, <a href="#m-timedSelect">timedSelect</a>, <a href="#m-toggleItemSelection">toggleItemSelection</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_listbox.png" class="internal" src="/@api/deki/files/461/=XUL_ref_listbox.png"></div> +<pre> <listbox id="theList"> + <listitem label="Ruby"/> + <listitem label="Emerald"/> + <listitem label="Sapphire" selected="true"/> + <listitem label="Diamond"/> + </listbox> + +</pre> +<p><img alt="XulListBoxMultiColumn.PNG" class="internal default" src="/@api/deki/files/4189/=XulListBoxMultiColumn.PNG"></p> +<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><listbox id="theList" rows="10" width="400"> + <listhead> + <listheader label="1ct Gem" width="240"/> + <listheader label="Price" width="150"/> + </listhead> + <listcols> + <listcol/> + <listcol flex="1"/> + </listcols> +</listbox> + +var theList = document.getElementById('theList '); + gems = [ {gem: "Ruby", Price: "$3,500 - $4,600"}, + {gem: "Emerald", Price: "$700 - 4,250"}, + {gem: "Blue Sapphire", Price: "$3,400 - $4,500"}, + {gem: "Diamond", Price: "$5,600 - $16,000"} ]; +for (var i = 0; i < gems.length; i++) + { + var row = document.createElement('listitem'); + var cell = document.createElement('listcell'); + cell.setAttribute('label', gems[i].gem); + row.appendChild(cell); + + cell = document.createElement('listcell'); + cell.setAttribute('label', gems[i].Price ); + row.appendChild(cell); + + theList.appendChild(row); + } +</pre> +<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"> </pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-disableKeyNavigation"> + + +<dl> + <dt><code id="a-disableKeyNavigation"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. This is done incrementally, so typing more letters with select more specific items. This feature may be disabled by setting this attribute to <code>true</code>.</dd> +</dl> +</div> <div id="a-preference"> + + +<dl> + <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd> +</dl> +</div> <div id="a-rows"> + +<dl> + <dt> + <code id="a-rows"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + The number of rows to display in the element. If the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. To get the actual number of rows in the element, use the <span id="m-getRowCount"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getRowCount">getRowCount</a></code></span> method.</dd> +</dl> +</div> <div id="a-seltype"> + + +<dl> + <dt><code id="a-seltype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Used to indicate whether multiple selection is allowed.</dd> + <dd> + <dl> + <dt><code>single</code></dt> + <dd>Only one row may be selected at a time. (Default in <code>listbox</code> and <code>richlistbox</code>.)</dd> + <dt><code>multiple</code></dt> + <dd>Multiple rows may be selected at once. (Default in <code>tree</code>.)</dd> + </dl> + </dd> + <dd> + <p>For trees, you can also use the following values:</p> + + <dl> + <dt><code>cell</code></dt> + <dd>Individual cells can be selected </dd> + <dt><code>text</code></dt> + <dd>Rows are selected; however, the selection highlight appears only over the text of the primary column.</dd> + </dl> + + <p>For <code>richlistbox</code>, this is new in Firefox 3.5.</p> + </dd> +</dl> +</div> <div id="a-suppressonselect"> + + +<dl> + <dt><code id="a-suppressonselect"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/suppressonselect">suppressonselect</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. If set to <code>true</code>, the select event is never fired.</dd> +</dl> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-listbox.currentIndex"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/listbox.currentIndex">currentIndex</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Set to the index of the currently focused item in the list. If no item is focused, the value will be <code>-1</code>. (or, on some platforms, <code>typeof(listboxcurrentIndex)</code> will be <code>undefined</code>) In a single selection list, the current index will always be the same as the selected index. In a multiple selection list, the currently focused row may be modified by the user without changing the selection by pressing the Control key and pressing the cursor keys to navigate.</dd> +</dl></div> <div id="p-currentItem"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/currentItem">currentItem</a></span></code></dt> + <dd>Type: <em>listitem element</em></dd> + <dd>Returns the currently focused item in the list box, which is only useful in a multiple selection list box.</dd> +</dl></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disableKeyNavigation"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disableKeyNavigation">disableKeyNavigation</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets or sets the value of the <code id="a-disableKeyNavigation"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></code> attribute.</dd> +</dl></div> <div id="p-itemCount"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/itemCount">itemCount</a></span></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>Read only property holding the number of child items.</dd> +</dl> +</div> <div id="p-listBoxObject"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/listBoxObject">listBoxObject</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIListBoxObject" title="">nsIListBoxObject</a></code></em></dd> + <dd> + The <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIListBoxObject" title="">nsIListBoxObject</a></code> behind the list box. This property is read-only. Most of the features of the list box are already available directly in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>, so you will rarely have need to use this box object directly.</dd> +</dl></div> <div id="p-selectedCount"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectedCount">selectedCount</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Returns the number of items that are currently selected.</dd> +</dl></div> <div id="p-selectedIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Returns the index of the currently selected item. You may select an item by assigning its index to this property. By assigning <code>-1</code> to this property, all items will be deselected.</dd> +</dl> + +<p></p></div> <div id="p-selectedItem"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code></dt> + <dd> + Type: + <i> + element</i> + </dd> + <dd> + Holds the currently selected item. If no item is currently selected, this value will be <code>null</code>. You can select an item by setting this value. A select event will be sent to the element when it is changed either via this property, the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> property, or changed by the user.</dd> +</dl> + +<p></p></div> <div id="p-selectedItems"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectedItems">selectedItems</a></span></code></dt> + <dd>Type: <em>array of listitems</em></dd> + <dd>Returns an array of the selected items in the list.</dd> +</dl></div> <div id="p-selType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selType">selType</a></span></code> </dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-seltype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code> attribute.</dd> +</dl> +<p> </p></div> <div id="p-suppressOnSelect"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/suppressOnSelect">suppressOnSelect</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-suppressonselect"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/suppressonselect">suppressonselect</a></code> attribute.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt><span id="m-addItemToSelection"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/addItemToSelection">addItemToSelection( item )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Selects the given <var>item</var>, without deselecting any other items that are already selected.</dd> +</dl> <dl> + <dt> + <span id="m-appendItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem( label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Creates a new item and adds it to the end of the existing list of items. You may optionally set a value. The function returns the newly created element.</dd> +</dl> <dl> + <dt><span id="m-clearSelection"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/clearSelection">clearSelection()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Deselects all of the items. A select event is sent before the items are deselected.</dd> +</dl> <dl> + <dt><span id="m-ensureElementIsVisible"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/ensureElementIsVisible">ensureElementIsVisible( element )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>If the specified element is not currently visible to the user, the displayed items are scrolled so that it is. If the item is already visible, no scrolling occurs.</dd> +</dl> <dl> + <dt><span id="m-ensureIndexIsVisible"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible( index )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>If the item at the specified index is not currently visible to the user the displayed items are scrolled so that it is. If the item is already visible, no scrolling occurs.</dd> +</dl> <dl> + <dt><span id="m-getIndexOfFirstVisibleRow"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfFirstVisibleRow">getIndexOfFirstVisibleRow()</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the index of the first displayed row. Note that this is not the same as the first row -- if the displayed items have been scrolled down, this function will retrieve the index of the first row that the user can see.</dd> +</dl> <dl> + <dt><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem( item )</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the zero-based position of the specified item. Items are numbered starting at the first item displayed in the list.</dd> +</dl> <dl> + <dt><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex( index )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>Returns the element that is at the specified index.</dd> +</dl> <dl> + <dt><span id="m-getNumberOfVisibleRows"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getNumberOfVisibleRows">getNumberOfVisibleRows()</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the number of rows that are currently visible to the user.</dd> +</dl> <dl> + <dt> + <span id="m-getRowCount"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getRowCount">getRowCount()</a></code></span></dt> + <dd> + Return type: <em>integer</em></dd> + <dd> + Returns the total number of rows in the element, regardless of how many rows are displayed.</dd> +</dl> <dl> + <dt><span id="m-getSelectedItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getSelectedItem">getSelectedItem( index )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>When multiple items are selected, you can retrieve each selected item using this method. The argument <var>index</var> specifies the index in the list of the selected items, not the row number of the item. The item index is zero-based, thus this example will return the first selected item: <code>getSelectedItem(0)</code>.</dd> +</dl> <dl> + <dt> + <span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt( index, label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + This method creates a new item and inserts it at the specified position. You may optionally set a value. The new item element is returned.</dd> +</dl> <dl> + <dt><span id="m-invertSelection"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/invertSelection">invertSelection()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Reverses the selected state of all items. Selected items become deselected, and deselected items become selected.</dd> +</dl> <dl> + <dt><span id="m-moveByOffset"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/moveByOffset">moveByOffset( offset , isSelecting, isSelectingRange)</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>If <code>offset</code> is positive, adjusts the focused item forward by that many items. If <code>offset</code> is negative, adjusts the focused item backward by that many items. If <code>isSelecting</code> is <code>true</code>, then the selection is also adjusted. If <code>isSelectingRange</code> is also <code>true</code>, then the new item is selected in addition to any currently selected items. If <code>isSelectingRange</code> is <code>false</code>, any existing selection is cleared. Items that are hidden are skipped.</dd> +</dl> <dl> + <dt> + <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt( index )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Removes the child item in the element at the specified index. The method returns the removed item.</dd> +</dl> <dl> + <dt><span id="m-removeItemFromSelection"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemFromSelection">removeItemFromSelection( item )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Deselects the specified item without deselecting other items.</dd> +</dl> <dl> + <dt><span id="m-scrollToIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/scrollToIndex">scrollToIndex( index )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Scrolls the element to the specified index. This is different than <span id="m-ensureIndexIsVisible"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible</a></code></span> because the view is always scrolled.</dd> +</dl> <dl> + <dt> + <span id="m-selectAll"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/selectAll">selectAll()</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Selects all of the items. A select event is sent after the selection is made.</dd> +</dl> <dl> + <dt> + <span id="m-selectItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/selectItem">selectItem( item )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Deselects all of the currently selected items and selects the given item. A select event is sent after the selection is made.</dd> +</dl> <dl> + <dt> + <span id="m-selectItemRange"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/selectItemRange">selectItemRange( startItem, endItem )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Selects the items between the two items given as arguments, including the start and end items. All other items are deselected. This method does nothing for single-selection list boxes. A select event is sent after the selection is made.</dd> +</dl> <dl> + <dt> + <span id="m-timedSelect"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/timedSelect">timedSelect( item, timeout )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Selects the item specified by the argument item after the number of milliseconds given by the timeout argument. All other items are deselected.</dd> +</dl> <dl> + <dt> + <span id="m-toggleItemSelection"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/toggleItemSelection">toggleItemSelection( item )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + If the specified item is selected, it is deselected. If it is not selected, it is selected. Other items in the list box that are selected are not affected, and retain their selected state.</dd> +</dl><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="/en/XPCOM_Interface_Reference/nsIAccessibleProvider" title="en/nsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/en/NsIDOMXULMultiSelectControlElement" title="en/NsIDOMXULMultiSelectControlElement">nsIDOMXULMultiSelectControlElement</a></dd> +</dl> +<p> </p> diff --git a/files/zh-cn/mozilla/tech/xul/listheader/index.html b/files/zh-cn/mozilla/tech/xul/listheader/index.html new file mode 100644 index 0000000000..d71bcb6e83 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/listheader/index.html @@ -0,0 +1,180 @@ +--- +title: listheader +slug: Mozilla/Tech/XUL/listheader +translation_of: Archive/Mozilla/XUL/listheader +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>A header for a single column in a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-disabled">disabled</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-acesssibleType">acesssibleType</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_listheader.png" class="internal" src="/@api/deki/files/463/=XUL_ref_listheader.png"></div> +<pre><listbox> + <listhead> + <listheader label="Name"/> + <listheader label="Occupation"/> + </listhead> + <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="Attributes" name="Attributes">Attributes</h3> +<p></p><div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/menu/index.html b/files/zh-cn/mozilla/tech/xul/menu/index.html new file mode 100644 index 0000000000..b204dcf14b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/menu/index.html @@ -0,0 +1,370 @@ +--- +title: menu +slug: Mozilla/Tech/XUL/menu +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/menu +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>An element, much like a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>, that is placed on a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>. When the user clicks the <code>menu</code> element, the child <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> of the menu will be displayed. This element is also used to create submenus.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-acceltext">acceltext</a>, <a href="#a-accesskey">accesskey</a>, <a href="#a-allowevents">allowevents</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-menuactive">menuactive</a>, <a href="#a-open">open</a>, <a href="#a-sizetopopup">sizetopopup</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-accessKey">accessKey</a>, <a href="#p-command">command</a>, <a href="#p-menuitem.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-itemCount">itemCount</a>, <a href="#p-label">label</a>, <a href="#p-labelElement">labelElement</a>, <a href="#p-menupopup">menupopup</a>, <a href="#p-menu.open">open</a>, <a href="#p-parentContainer">parentContainer</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-appendItem">appendItem</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-removeItemAt">removeItemAt</a></dd> +</dl> +<h3 id="Example" name="Example">Example</h3> +<pre> <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> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-acceltext"> + +<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> + Type: + <i> + string</i> + </dd> + <dd> + Text that appears beside beside the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> label to indicate the shortcut key (accelerator key) to use to invoke the command. If this value is set, it overrides an assigned key set in the key attribute. This attribute does not apply to menus directly on the menubar.</dd> +</dl> + +<p></p> +</div> <div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-allowevents"> + + +<dl> + <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> + <dd>Type: + <i>boolean<br> + </i> + 类型：boolean</dd> + <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.<br> + 如果为真，事件向子元素传递。否则，事件只传递到当前元素。</dd> +</dl> + + + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-menuactive"> + + +<dl> + <dt><code id="a-menuactive"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/menuactive">menuactive</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>This attribute is set on an item in a menu when it is being hovered over. Typcially, the theme will use this to highlight the item. A <code>DOMMenuItemActive</code> event will be sent to the item when the item is hovered over, and a <code>DOMMenuItemInactive</code> event will be sent to the item when the selection moves away.</dd> +</dl> +</div> <div id="a-open"> + + +<dl> + <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd> +</dl> +</div> <div id="a-sizetopopup"> + + +<dl> + <dt><code id="a-sizetopopup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sizetopopup">sizetopopup</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Indicates how the menu width and the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> width are determined. If the <code>sizetopopup</code> attribute is left out or set to <code>none</code>, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. Otherwise, the menu will size itself to at least the size of the popup. If the menu has a maximum width, the popup will also be this width.</dd> + <dd> + <dl> + <dt><code>none</code></dt> + <dd>The width of the popup will not be constrained to the size of the menu.</dd> + <dt><code>pref</code></dt> + <dd>The preferred width of the menu label or button will be the size needed for the popup contents. This is the default value for menulists.</dd> + <dt><code>always</code></dt> + <dd>Both the preferred and minimum width of the menu label or button will be the same as that necessary for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-menuitem.control"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menuitem.control">control</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Returns the enclosing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> that the item is inside, if any, or <code>null</code> if there is no enclosing menu.</dd> +</dl> + +<p></p></div> <div id="p-itemCount"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/itemCount">itemCount</a></span></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>Read only property holding the number of child items.</dd> +</dl> +</div> <div id="p-menupopup"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menupopup">menupopup</a></span></code></dt> + <dd>Type: <em>menupopup element</em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> used by the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> or <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>. This property is read-only.</dd> +</dl></div> <div id="p-menu.open"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menu.open">open</a></span></code> </dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + This property will be set to true when the menu is open. The menu may be opened by setting the open property to true and closed by setting it to false.</dd> +</dl></div> <div id="p-parentContainer"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/parentContainer">parentContainer</a></span></code> </dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Read only property that returns the containing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element, or <code>null</code> if there isn't a containing menu.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt> + <span id="m-appendItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem( label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Creates a new item and adds it to the end of the existing list of items. You may optionally set a value. The function returns the newly created element.</dd> +</dl> <dl> + <dt><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem( item )</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the zero-based position of the specified item. Items are numbered starting at the first item displayed in the list.</dd> +</dl> <dl> + <dt><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex( index )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>Returns the element that is at the specified index.</dd> +</dl> <dl> + <dt> + <span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt( index, label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + This method creates a new item and inserts it at the specified position. You may optionally set a value. The new item element is returned.</dd> +</dl> <dl> + <dt> + <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt( index )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Removes the child item in the element at the specified index. The method returns the removed item.</dd> +</dl><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULContainerElement">nsIDOMXULContainerElement</a>, <a href="cn/NsIDOMXULContainerItemElement">nsIDOMXULContainerItemElement</a>, <a href="cn/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a></dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/menubar/index.html b/files/zh-cn/mozilla/tech/xul/menubar/index.html new file mode 100644 index 0000000000..d7946debf9 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/menubar/index.html @@ -0,0 +1,113 @@ +--- +title: menubar +slug: Mozilla/Tech/XUL/menubar +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/menubar +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>A container that usually contains <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> elements. On the Macintosh, the menubar is displayed along the top of the screen, and all non-menu related elements inside the menubar will be ignored.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-grippyhidden">grippyhidden</a>, <a href="#a-statusbar">statusbar</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-statusbar">statusbar</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_menu.png"></div> +<pre><menubar id="sample-menubar"> + <menu id="action-menu" label="Action"> + <menupopup id="action-popup"> + <menuitem label="New"/> + <menuitem label="Save" disabled="true"/> + <menuitem label="Close"/> + <menuseparator/> + <menuitem label="Quit"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit"> + <menupopup id="edit-popup"> + <menuitem label="Undo"/> + <menuitem label="Redo"/> + </menupopup> + </menu> +</menubar> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-grippyhidden"> + + +<dl> + <dt><code id="a-grippyhidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/grippyhidden">grippyhidden</a></code></dt> + <dd><strong><span class="highlightred">SeaMonkey only</span></strong></dd> + <dd>Type: <em>boolean</em></dd> + <dd>When set to <code>true</code>, the grippy will be hidden. When set to <code>false</code>, the default, the grippy will be shown.</dd> +</dl> +</div> <div id="a-statusbar"> + + +<dl> + <dt><code id="a-statusbar"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/statusbar">statusbar</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>If you set this attribute to the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/en-US/docs/Mozilla/Tech/XUL/statusbar" title="statusbar">statusbar</a></code> element, the label on the statusbar will update to the <code id="a-statustext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code> of the items on the menu as the user moves the mouse over them.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-statusbar"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/statusbar">statusbar</a></span></code></dt> + <dd>Type: <em>id of statusbar element</em></dd> + <dd>Gets and sets the value of the <code id="a-statusbar"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/statusbar">statusbar</a></code> attribute.</dd> +</dl></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a></dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/menuitem/index.html b/files/zh-cn/mozilla/tech/xul/menuitem/index.html new file mode 100644 index 0000000000..a231f6a348 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/menuitem/index.html @@ -0,0 +1,575 @@ +--- +title: menuitem +slug: Mozilla/Tech/XUL/menuitem +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/menuitem +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>A single choice in a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> element. It acts much like a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> but it is rendered on a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-acceltext">acceltext</a>, <a href="#a-accesskey">accesskey</a>, <a href="#a-allowevents">allowevents</a>, <a href="#a-autocheck">autocheck</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-description">description</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-menuitem.key">key</a>, <a href="#a-label">label</a>, <a href="#a-menuitem.name">name</a>, <a href="#a-selected">selected</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-menuitem.type">type</a>, <a href="#a-validate">validate</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-accessKey">accessKey</a>, <a href="#p-command">command</a>, <a href="#p-menuitem.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-labelElement">labelElement</a>, <a href="#p-parentContainer">parentContainer</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<dl> + <dt> + Style classes</dt> + <dd> + <a href="#s-menuitem-iconic">menuitem-iconic</a>, <a href="#s-menuitem-non-iconic">menuitem-non-iconic</a></dd> +</dl> +<h3 id="Example" name="Example">Example</h3> +<pre><menu id="edit-menu" label="Edit"> + <menupopup id="edit-popup"> + <menuitem label="Undo"/> + <menuitem label="Redo"/> + </menupopup> +</menu> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-acceltext"> + +<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> + Type: + <i> + string</i> + </dd> + <dd> + Text that appears beside beside the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> label to indicate the shortcut key (accelerator key) to use to invoke the command. If this value is set, it overrides an assigned key set in the key attribute. This attribute does not apply to menus directly on the menubar.</dd> +</dl> + +<p></p> +</div> <div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-allowevents"> + + +<dl> + <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> + <dd>Type: + <i>boolean<br> + </i> + 类型：boolean</dd> + <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.<br> + 如果为真，事件向子元素传递。否则，事件只传递到当前元素。</dd> +</dl> + + + +<p></p> +</div> <div id="a-autocheck"> + + +<dl> + <dt><code id="a-autocheck"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code></dt> + <dd>类型: + <i>boolean</i> + </dd> + <dd>如果此属性为 <code>true</code>,或空白, 每次点击按钮时，此按钮的状态检查都会被执行一次。如果此属性为<code>false</code>, 检查会手动的被拒绝。当autocheck值为true的时候，按钮将会变为多选框或者单选框。</dd> +</dl> + + + +<p></p> +</div> <div id="a-checked"> + +<dl> + <dt> + <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is checked or not.</dd> + <dd> + Use <code>hasAttribute()</code> to determine whether this attribute is set instead of <code>getAttribute()</code>.</dd> + <dd> + For buttons, the <code>type</code> attribute must be set to <code>checkbox</code> or <code>radio</code> for this attribute to have any effect.<magic name="\"PAGENAME\"/"></magic></dd> +</dl> +</div><p></p> +<div class="note"> + <b>Note:</b> if the <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute is set to <code>true</code>, and you persist its value via the <code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code> attribute, Mozilla will fail to persist its value when the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> is unchecked because of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=15232" title="persist should be able to remove an attribute from an element">bug 15232</a>. A workaround is to set the <code id="a-autocheck"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code> attribute to <code>false</code>, then programmatically set the <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute when the user selects the item, and set it to <code>false</code> instead of removing the attribute (i.e. do <code>menuitem.setAttribute("checked", "false")</code> instead of <code>menuitem.removeAttribute("checked"))</code> when the user unchecks the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, as a value of <code>false</code> will both correctly hide the checkmark and persist its hidden state.</div> +<p></p><div id="a-command"> + +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-description"> + +<dl> + <dt> + <code id="a-description"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/description">description</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Descriptive text to appear in addition to the dialog title.</dd> +</dl> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-image"> + +<dl> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + The URL of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> + +<p></p> +</div> <div id="a-menuitem.key"> + +<dl> + <dt> + <code id="a-menuitem.key"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menuitem.key">key</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/key" title="key">key</a></code> element whose key shortcut is displayed in the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd> +</dl> + +<p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-menuitem.name"> + +<dl> + <dt> + <code id="a-menuitem.name"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menuitem.name">name</a></code></dt> + <dd> + Type: + <i> + string name</i> + </dd> + <dd> + Radio <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>s with the same name as put into a group. Only one <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> in each radio group can be checked at a time.</dd> +</dl> + +<p></p> +</div> <div id="a-selected"> + +<dl> + <dt> + <code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is selected or not. This value is read-only. To change the selection, set either the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> or <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code> property of the containing element.</dd> +</dl> + +<p></p> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-menuitem.type"> + +<dl> + <dt> + <code id="a-menuitem.type"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menuitem.type">type</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + Can be used to create checkable menuitems or for radio button menuitems.</dd> +</dl> +<ul> + <li><code>checkbox</code>: The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> is checked. The <code id="a-checked"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute determines whether the menuitem is checked or not.</li> + <li><code>radio</code>: The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> becomes part of a radio group. Other menuitems that have the same value for their <code id="a-name"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/name">name</a></code> attributes are part of the same <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code> group. Only one menuitem in the same radio group can be checked at once.</li> +</ul> +<p>More information on adding checkmarks to menus in the <a href="cn/XUL_Tutorial/More_Menu_Features#Adding_Checkmarks_to_Menus">XUL tutorial</a></p> + +<p></p> +</div> <div id="a-validate"> + +<dl> + <dt> + <code id="a-validate"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd> +</dl> +<ul> + <li><code>always</code>: The image is always checked to see whether it should be reloaded.</li> + <li><code>never</code>: The image will be loaded from the cache if possible.</li> +</ul> + +<p></p> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-command"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/command">command</a></span></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-menuitem.control"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menuitem.control">control</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Returns the enclosing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> that the item is inside, if any, or <code>null</code> if there is no enclosing menu.</dd> +</dl> + +<p></p></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-image"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/image">image</a></span></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-labelElement"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/labelElement">labelElement</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element</i> + </dd> + <dd> + The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element associated with the control. This is set when a label has a <code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> attribute pointing to this element. This property will be <code>null</code> when no label is associated with the control.</dd> +</dl> + +<p></p></div> <div id="p-parentContainer"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/parentContainer">parentContainer</a></span></code> </dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Read only property that returns the containing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element, or <code>null</code> if there isn't a containing menu.</dd> +</dl> + +<p></p></div> <div id="p-selected"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selected">selected</a></span></code><magic name="\"PAGENAME\"/"></magic></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + This property's value is <code>true</code> if this element is selected, or <code>false</code> if it is not. This property is read only.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Style_classes" name="Style_classes">Style classes</h3> +<p></p><dl> + <dt> + <code><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Style/menuitem-iconic">menuitem-iconic</a></code></dt> + <dd> + Use this class to have an image appear on the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>. Specify the image using the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> + +<p></p> <dl> + <dt> + <code><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Style/menuitem-non-iconic">menuitem-non-iconic</a></code></dt> + <dd> + Normally, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>s have a margin to the left for an image or checkmark. This class may be used to remove this margin so that the menuitem appears on the left edge of the menupopup.</dd> +</dl> + +<p></p><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULContainerItemElement">nsIDOMXULContainerItemElement</a>, <a href="cn/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a></dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/menulist/index.html b/files/zh-cn/mozilla/tech/xul/menulist/index.html new file mode 100644 index 0000000000..7273d413e7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/menulist/index.html @@ -0,0 +1,509 @@ +--- +title: menulist +slug: Mozilla/Tech/XUL/menulist +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/menulist +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>An element that can be used for drop-down choice lists. The user may select one of the elements displayed in the <code>menulist</code>. The currently selected choice is displayed on the <code>menulist</code> element. To create the drop-down, put a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> inside the <code>menulist</code> containing the choices as <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> elements. The command event may be used to execute code when the menulist selection changes.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/List_Controls">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-accesskey">accesskey</a>, <a href="#a-crop">crop</a>, <a href="#a-disableautoselect">disableautoselect</a>, <a href="#a-disabled">disabled</a>, <a href="#a-editable">editable</a>, <a href="#a-focused">focused</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-oncommand">oncommand</a>, <a href="#a-open">open</a>, <a href="#a-preference">preference</a>, <a href="#a-readonly">readonly</a>, <a href="#a-sizetopopup">sizetopopup</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-crop">crop</a>, <a href="#p-description">description</a>, <a href="#p-disableautoselect">disableautoselect</a>, <a href="#p-disabled">disabled</a>, <a href="#p-editable">editable</a>, <a href="#p-editor">editor</a>, <a href="#p-menulist.image">image</a>, <a href="#p-menulist.inputField">inputField</a>, <a href="#p-itemCount">itemCount</a>, <a href="#p-label">label</a>, <a href="#p-menuBoxObject">menuBoxObject</a>, <a href="#p-menupopup">menupopup</a>, <a href="#p-open">open</a>, <a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedItem">selectedItem</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-menulist.appendItem">appendItem</a>, <a href="#m-contains">contains</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-removeAllItems">removeAllItems</a>, <a href="#m-removeItemAt">removeItemAt</a>, <a href="#m-menulist.select">select</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<pre> <menulist> + <menupopup> + <menuitem label="option 1" value="1"/> + <menuitem label="option 2" value="2"/> + <menuitem label="option 3" value="3"/> + <menuitem label="option 4" value="4"/> + </menupopup> + </menulist> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-disableautoselect"> + + +<dl> + <dt><code id="a-disableautoselect"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableautoselect">disableautoselect</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If this attribute is <code>true</code> or omitted, the selected item on the menu will update to match what the user entered in the textbox. If the text does not match any of the items in the list, the menu selection is cleared. If this attribute is <code>false</code>, the selection is never updated to match the text box. This attribute applies only to editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>s.</dd> +</dl> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-editable"> + + +<dl> + <dt><code id="a-editable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/editable">editable</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Indicates that the value of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> can be modified by typing directly into the value field. This is rendered as a textbox with a drop-down arrow beside it. The user may enter text into the textbox or select one of the choices by clicking from the drop-down.</dd> +</dl> +</div> <div id="a-focused"> + + +<dl> + <dt><code id="a-focused"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/focused">focused</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>This attribute is <code>true</code> if the element is focused.</dd> +</dl> +</div> <div id="a-image"> + +<dl> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + The URL of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> + +<p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-oncommand"> + + +<dl> + <dt><code id="a-oncommand"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event handler is called when the command is activated. This occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.</dd> +</dl> + + +</div> <div id="a-open"> + + +<dl> + <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd> +</dl> +</div> <div id="a-preference"> + + +<dl> + <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd> +</dl> +</div> <div id="a-readonly"> + + +<dl> + <dt><code id="a-readonly"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/readonly">readonly</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If set to <code>true</code>, then the user cannot change the value of the element. However, the value may still be modified by a script.</dd> +</dl> +</div> <div id="a-sizetopopup"> + + +<dl> + <dt><code id="a-sizetopopup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sizetopopup">sizetopopup</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Indicates how the menu width and the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> width are determined. If the <code>sizetopopup</code> attribute is left out or set to <code>none</code>, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. Otherwise, the menu will size itself to at least the size of the popup. If the menu has a maximum width, the popup will also be this width.</dd> + <dd> + <dl> + <dt><code>none</code></dt> + <dd>The width of the popup will not be constrained to the size of the menu.</dd> + <dt><code>pref</code></dt> + <dd>The preferred width of the menu label or button will be the size needed for the popup contents. This is the default value for menulists.</dd> + <dt><code>always</code></dt> + <dd>Both the preferred and minimum width of the menu label or button will be the same as that necessary for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-description"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/description">description</a></span></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Set to the description of the currently selected <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd> +</dl></div> <div id="p-disableautoselect"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disableautoselect">disableautoselect</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-disableautoselect"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableautoselect">disableautoselect</a></code> attribute.</dd> +</dl></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-editable"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/editable">editable</a></span></code> </dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Returns <code>true</code> if the element is editable. Autocomplete fields are editable so this property always returns <code>true</code> for those.</dd> +</dl> +<p> </p></div> <div id="p-editor"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/editor">editor</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditor" title="">nsIEditor</a></code></em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditor" title="">nsIEditor</a></code> for editable text. This property is read only.</dd> +</dl></div> <div id="p-menulist.image"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menulist.image">image</a></span></code></dt> + <dd>Type: <em>image URL</em></dd> + <dd>The image associated with the currently selected item.</dd> +</dl></div> <div id="p-menulist.inputField"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menulist.inputField">inputField</a></span></code></dt> + <dd>Type: <em>textbox element</em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code> element used for editable menu lists. This property is read only and applies to editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>s only.</dd> +</dl> + +</div> <div id="p-itemCount"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/itemCount">itemCount</a></span></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>Read only property holding the number of child items.</dd> +</dl> +</div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-menuBoxObject"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menuBoxObject">menuBoxObject</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMenuBoxObject" title="">nsIMenuBoxObject</a></code></em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMenuBoxObject" title="">nsIMenuBoxObject</a></code> which implements the menu.</dd> +</dl></div> <div id="p-menupopup"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menupopup">menupopup</a></span></code></dt> + <dd>Type: <em>menupopup element</em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> used by the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> or <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>. This property is read-only.</dd> +</dl></div> <div id="p-open"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/open">open</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> attribute.</dd> +</dl> +</div> <div id="p-selectedIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Returns the index of the currently selected item. You may select an item by assigning its index to this property. By assigning <code>-1</code> to this property, all items will be deselected.</dd> +</dl> + +<p></p></div> <div id="p-selectedItem"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code></dt> + <dd> + Type: + <i> + element</i> + </dd> + <dd> + Holds the currently selected item. If no item is currently selected, this value will be <code>null</code>. You can select an item by setting this value. A select event will be sent to the element when it is changed either via this property, the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> property, or changed by the user.</dd> +</dl> + +<p></p></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt><span id="m-menulist.appendItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/menulist.appendItem">appendItem( label, value, description )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>Creates a new <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> element and adds it to the end of the menulist. You may optionally set a value and description. The function returns the new item.</dd> +</dl> <dl> + <dt><span id="m-contains"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/contains">contains( item )</a></code></span> </dt> + <dd>Return type: <em>boolean</em></dd> + <dd>Returns <code>true</code> if the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> contains the specified <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> as one of its items.</dd> +</dl> <dl> + <dt><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem( item )</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the zero-based position of the specified item. Items are numbered starting at the first item displayed in the list.</dd> +</dl> <dl> + <dt><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex( index )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>Returns the element that is at the specified index.</dd> +</dl> <dl> + <dt> + <span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt( index, label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + This method creates a new item and inserts it at the specified position. You may optionally set a value. The new item element is returned.</dd> +</dl> <dl> + <dt><span id="m-removeAllItems"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeAllItems">removeAllItems()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Removes all of the items in the <a href="/en/XUL/menu" title="en/XUL/menu">menu</a>.</dd> +</dl> <dl> + <dt> + <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt( index )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Removes the child item in the element at the specified index. The method returns the removed item.</dd> +</dl> <dl> + <dt><span id="m-menulist.select"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/menulist.select">select()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Select all the text in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>'s textbox. This method applies to <code id="a-editable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/editable">editable</a></code> menulists only.</dd> +</dl><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULMenuListElement">nsIDOMXULMenuListElement</a></dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/menupopup/index.html b/files/zh-cn/mozilla/tech/xul/menupopup/index.html new file mode 100644 index 0000000000..23b103ebb9 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/menupopup/index.html @@ -0,0 +1,324 @@ +--- +title: menupopup +slug: Mozilla/Tech/XUL/menupopup +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/menupopup +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>A container used to display the contents of a popup menu. When a menupopup is open, it floats above the window and may extend outside the window border. There are several ways in which a menupopup may be used:</p> +<ol> + <li>It may be placed inside a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, or a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> with the <a href="#a-type">type</a> attribute set to "menu" to create a popup that will open when the menu or button is pressed.</li> + <li>It may be attached to any element using the <code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> attribute. When the element is clicked with the left mouse button, the menupopup will be displayed.</li> + <li>It may be attached to any element using the <code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> attribute. When a context menu is opened, the menupopup will be displayed. A context menu may be opened by right-clicking the element, or by pressing the menu key on the keyboard.</li> +</ol> +<p>More information is available in the <a href="cn/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-ignorekeys">ignorekeys</a>, <a href="#a-popup.left">left</a>, <a href="#a-onpopuphidden">onpopuphidden</a>, <a href="#a-onpopuphiding">onpopuphiding</a>, <a href="#a-onpopupshowing">onpopupshowing</a>, <a href="#a-onpopupshown">onpopupshown</a>, <a href="#a-popup.position">position</a>, <a href="#a-popup.top">top</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-popupBoxObject">popupBoxObject</a>, <a href="#p-popup">popup</a>, <a href="#p-state">state</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-hidePopup">hidePopup</a>, <a href="#m-moveTo">moveTo</a>, <a href="#m-openPopup">openPopup</a>, <a href="#m-openPopupAtScreen">openPopupAtScreen</a>, <a href="#m-showPopup">showPopup</a>, <a href="#m-sizeTo">sizeTo</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<p>The following example shows how a menupopup may be attached to a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>.</p> +<pre><menulist> + <menupopup> + <menuitem label="Mozilla" value="http://mozilla.org"/> + <menuitem label="Slashdot" value="http://slashdot.org"/> + <menuitem label="Sourceforge" value="http://sf.net"/> + <menuitem label="Freshmeat" value="http://freshmeat.net"/> + </menupopup> +</menulist> +</pre> +<p>The following example shows how a menupopup can be used a context menu for an element. When the label is right-clicked, the menu will be displayed.</p> +<div class="float-right"> + <img alt="Image:XUL_ref_popup.png"></div> +<pre><menupopup id="clipmenu"> + <menuitem label="Cut"/> + <menuitem label="Copy"/> + <menuitem label="Paste"/> +</menupopup> +<label value="Right click for popup" context="clipmenu"/> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-ignorekeys"> + + +<dl> + <dt><code id="a-ignorekeys"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ignorekeys">ignorekeys</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, keyboard navigation between items in the popup is disabled.</dd> +</dl> +</div> <div id="a-popup.left"> + + +<dl> + <dt><code id="a-popup.left"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup.left">left</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Overrides the horizontal position of the popup specified by the <span id="m-showPopup"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span> method.</dd> +</dl> +</div> <div id="a-onpopuphidden"> + + +<dl> + <dt><code id="a-onpopuphidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onpopuphidden">onpopuphidden</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent to a popup after it has been hidden.</dd> + <dd>This event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden.</dd> + <dt> + <h4 id="Example">Example:</h4> + </dt> +</dl> + +<pre><menupopup id="top" onpopuphidden="console.log('The onpopuphidden method of id=top was called.');"> + <menuitem label="item 1"/> + <menuitem label="item 2"/> + <menu id="submenu1" label="submenu 1"> + <menupopup id="submenu1-popup"> + <menuitem label="submenu1 item 1"/> + <menuitem label="submenu1 item 2"/> + </menupopup> + </menu> + <menu id="submenu2" label="submenu 1"> + <menupopup id="submenu2-popup"> + <menuitem label="submenu2 item 1"/> + <menuitem label="submenu2 item 2"/> + </menupopup> + </menu> +<menupopup/> +</pre> + + +</div> <div id="a-onpopuphiding"> + + +<dl> + <dt><code id="a-onpopuphiding"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onpopuphiding">onpopuphiding</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent to a popup when it is about to be hidden.</dd> +</dl> +</div> <div id="a-onpopupshowing"> + +<dl> + <dt> + <code id="a-onpopupshowing"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/onpopupshowing">onpopupshowing</a></code></dt> + <dd> + Type: <em>script code</em></dd> + <dd> + This event is sent to a popup just before it is opened. This handler is usually used to dynamically set the contents when the user requests to display it. Returning <code>false</code> from this event handler prevents the popup from appearing.</dd> + <dd> + 该事件在 popup 打开之前传给它。它用于动态生成菜单项。如果返回 false 值，则 popup 将不会显示菜单项。</dd> +</dl> + +<p> </p> +</div> <div id="a-onpopupshown"> + +<dl> + <dt> + <code id="a-onpopupshown"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/onpopupshown">onpopupshown</a></code></dt> + <dd> + Type: <em>script code</em></dd> + <dd> + This event is sent to a popup after it has been opened, much like the <code>onload</code> event is sent to a window when it is opened.</dd> + <dd> + 该事件在 popup 打开之后触发，与 window 的 onload 事件比较类似。</dd> +</dl> + +<p> </p> +</div> <div id="a-popup.position"> + + +<dl> + <dt><code id="a-popup.position"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup.position">position</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The <code>position</code> attribute determines where the popup appears relative to the element the user clicked to invoke the popup. This allows you to place the popup on one side of a button. Note that a context menu will never respect this attribute, always appearing relative to the mouse cursor.</dd> + <dd><br> + This value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned.</dd> + <dd><br> + If specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). The anchor value (ie, the first word) can be one of <code>topleft</code>, <code>topright</code>, <code>bottomleft</code>, <code>bottomright</code>, <code>leftcenter</code>, <code>rightcenter</code>, <code>topcenter</code> or <code>bottomcenter</code>. The popup value (ie, the second word) can be one of <code>topleft</code>, <code>topright</code>, <code>bottomleft</code> or <code>bottomright</code>.</dd> + <dd><br> + Positions specified as a single word string are shortcuts for the values above. Valid single-word values are <code>after_start</code>, <code>after_end</code>, <code>before_start</code>, <code>before_end</code>, <code>end_after</code>, <code>end_before</code>, <code>start_after</code>, <code>start_before</code>, <code>overlap</code>, <code>at_pointer</code> or <code>after_pointer</code>.</dd> + <dd>For more details, including examples, please see <a href="/en-US/docs/XUL/PopupGuide/Positioning" title="/en-US/docs/XUL/PopupGuide/Positioning">popup positioning</a></dd> +</dl> + + +</div> <div id="a-popup.top"> + + +<dl> + <dt><code id="a-popup.top"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup.top">top</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Overrides the vertical position of the popup specified by the <span id="m-showPopup"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span> method.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-popupBoxObject"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/popupBoxObject">popupBoxObject</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPopupBoxObject" title="">nsIPopupBoxObject</a></code></em></dd> + <dd> + This read-only property holds the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPopupBoxObject" title="">nsIPopupBoxObject</a></code> that implements the popup. You wouldn't normally need to use this property as all of its functions are available via the popup itself.</dd> +</dl></div> <div id="p-position"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/position">position</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <a href="/en/XUL/Attribute/popup.position" title="en/XUL/Attribute/popup.position">position</a> attribute.</dd> +</dl></div> <div id="p-state"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/state">state</a></span></code> </dt> + <dd> + Type: <em>string</em></dd> + <dd> + This read only property indicates whether the popup is open or not. Four values are possible: + <ul> + <li><code>closed</code>: The popup is closed and not visible.</li> + <li><code>open</code>: The popup is open and visible on screen.</li> + <li><code>showing</code>: A request has been made to open the popup, but it has not yet been shown. This state will occur during the popupshowing event.</li> + <li><code>hiding</code>: The popup is about to be hidden. This state will occur during the popuphiding event.</li> + </ul> + </dd> +</dl></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt> + <span id="m-hidePopup"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/hidePopup">hidePopup()</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Closes the popup immediately.</dd> +</dl> <dl> + <dt> + <span id="m-moveTo"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/moveTo">moveTo( x, y )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Moves the popup to a new location defined by screen coordinates (and not client coordinates).</dd> + <dd> + If both x and y have the value -1 the call will realign the popup with its anchor node.</dd> +</dl> <dl> + <dt> + <span id="m-openPopup"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup( anchor , position , x , y , isContextMenu, attributesOverride, triggerEvent )</a></code></span> </dt> + <dd> + Return type: <em>no return value</em></dd> +</dl> +<p>Opens the popup relative to a specified node at a specific location.</p> +<dl> + <dt> + anchor</dt> + <dd> + The popup may be either anchored to another node or opened freely. To anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. The anchor node does not need to be in the same document as the popup. Unanchored popups may be created by supplying <code>null</code> as the anchor node. The direction in which the popup is oriented depends on the direction of the anchor.</dd> + <dt> + position</dt> + <dd> + Possible values for position are: <code>before_start</code>, <code>before_end</code>, <code>after_start</code>, <code>after_end</code>, <code>start_before</code>, <code>start_after</code>, <code>end_before</code>, <code>end_after</code>, <code>overlap</code>, and <code>after_pointer</code>. Check <a href="/en/XUL/PopupGuide/Positioning" title="https://developer.mozilla.org/en/XUL/PopupGuide/Positioning">Positioning of the Popup Guide</a> for a precise description of the effect of the different values.</dd> + <dt> + x, y</dt> + <dd> + For an anchored popup, the <code>x</code> and <code>y</code> arguments may be used to offset the popup from its anchored position by some number, measured in CSS pixels. An unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. In this case, the <code>position</code> and <code>attributesOverride</code> arguments are ignored.</dd> + <dt> + isContextMenu</dt> + <dd> + The <code>isContextMenu</code> argument should be <code>true</code> for context menus and <code>false</code> for all other types of popups. It affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.</dd> + <dt> + attributesOverride</dt> + <dd> + If the <code>attributesOverride</code> argument is <code>true</code>, the position attribute on the popup node overrides the <code>position</code> value argument. If <code>attributesOverride</code> is <code>false</code>, the attribute is only used if the <code>position</code> argument is empty.</dd> + <dt> + triggerEvent</dt> + <dd> + The event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).</dd> +</dl> <dl> + <dt> + <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen( x, y, isContextMenu )</a></code></span> </dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Open the popup at a specific screen position specified by x and y. This position may be adjusted if it would cause the popup to be off of the screen. The x and y coordinates are measured in CSS pixels.</dd> +</dl> <dl> + <dt><span id="m-showPopup"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup( element, x, y, popupType, anchor, align )</a></code></span> <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 3)">Deprecated since Gecko 1.9</span></dt> + <dd>Return type: <em>no return value</em><br> + <em>Deprecated in favor of openPopup and <span>openPopupAtScreen</span></em></dd> + <dd>Opens a popup element. There are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the window. If either <var>x</var> or <var>y</var> are set to values, the popup will appear at the screen coordinate (<var>x</var>,<var>y</var>). If <var>x</var> and <var>y</var> are <code>-1</code>, the popup will be positioned relative to the <var>element</var> specified as the first argument. This is what you might do to show a popup below a button, for example. In this latter case, the <var>anchor</var> and <var>align</var> arguments may be used to further control where the popup appears relative to the element. The <var>anchor</var> argument corresponds to the <code id="a-popupanchor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popupanchor">popupanchor</a></code> attribute on the element. The <var>align</var> argument corresponds to the <code id="a-popupalign"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popupalign">popupalign</a></code> attribute on the element. The <var>anchor</var> and <var>align</var> arguments are ignored if either <var>x</var> or <var>y</var> are not <code>-1</code>.</dd> +</dl> + +<dl> + <dd>To have a popup appear relative to another element yet still offset by some number of pixels, determine the actual screen position of the element using the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/boxObject">boxObject</a></span></code>.screenX and <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/boxObject">boxObject</a></span></code>.screenY properties of the element, and use those as the <var>x</var> and <var>y</var> arguments offset by the desired values.</dd> +</dl> + +<dl> + <dd>The <var>popupType</var> should be one of the strings <code>popup</code>, <code>context</code>, or <code>tooltip</code>. Each type of popup is intended to be displayed only temporarily; they are not expected to be displayed permanently.</dd> +</dl> <dl> + <dt> + <span id="m-sizeTo"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/sizeTo">sizeTo( width, height )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Changes the current size of the popup to the new <var>width</var> and <var>height</var>.</dd> +</dl><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULPopupElement">nsIDOMXULPopupElement</a></dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/menuseparator/index.html b/files/zh-cn/mozilla/tech/xul/menuseparator/index.html new file mode 100644 index 0000000000..5b00451c60 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/menuseparator/index.html @@ -0,0 +1,435 @@ +--- +title: menuseparator +slug: Mozilla/Tech/XUL/menuseparator +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/menuseparator +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>Used to create a separator between menu items. Typically drawn as a thin line.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-acceltext">acceltext</a>, <a href="#a-accesskey">accesskey</a>, <a href="#a-allowevents">allowevents</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-selected">selected</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-accessKey">accessKey</a>, <a href="#p-command">command</a>, <a href="#p-menuitem.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-labelElement">labelElement</a>, <a href="#p-parentContainer">parentContainer</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<pre><menu label="Help"> + <menupopup> + <menuitem label="Contents"/> + <menuseparator/> + <menuitem label="Release Notes"/> + </menupopup> +</menu> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-acceltext"> + +<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> + Type: + <i> + string</i> + </dd> + <dd> + Text that appears beside beside the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> label to indicate the shortcut key (accelerator key) to use to invoke the command. If this value is set, it overrides an assigned key set in the key attribute. This attribute does not apply to menus directly on the menubar.</dd> +</dl> + +<p></p> +</div> <div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-allowevents"> + + +<dl> + <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> + <dd>Type: + <i>boolean<br> + </i> + 类型：boolean</dd> + <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.<br> + 如果为真，事件向子元素传递。否则，事件只传递到当前元素。</dd> +</dl> + + + +<p></p> +</div> <div id="a-command"> + +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-image"> + +<dl> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + The URL of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> + +<p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-selected"> + +<dl> + <dt> + <code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is selected or not. This value is read-only. To change the selection, set either the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> or <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code> property of the containing element.</dd> +</dl> + +<p></p> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-command"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/command">command</a></span></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-menuitem.control"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menuitem.control">control</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Returns the enclosing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> that the item is inside, if any, or <code>null</code> if there is no enclosing menu.</dd> +</dl> + +<p></p></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-image"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/image">image</a></span></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-labelElement"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/labelElement">labelElement</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element</i> + </dd> + <dd> + The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element associated with the control. This is set when a label has a <code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> attribute pointing to this element. This property will be <code>null</code> when no label is associated with the control.</dd> +</dl> + +<p></p></div> <div id="p-parentContainer"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/parentContainer">parentContainer</a></span></code> </dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Read only property that returns the containing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element, or <code>null</code> if there isn't a containing menu.</dd> +</dl> + +<p></p></div> <div id="p-selected"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selected">selected</a></span></code><magic name="\"PAGENAME\"/"></magic></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + This property's value is <code>true</code> if this element is selected, or <code>false</code> if it is not. This property is read only.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULContainerItemElement">nsIDOMXULContainerItemElement</a>, <a href="cn/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a></dd> +</dl> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/method/extra1/index.html b/files/zh-cn/mozilla/tech/xul/method/extra1/index.html new file mode 100644 index 0000000000..33546b4a30 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/extra1/index.html @@ -0,0 +1,15 @@ +--- +title: extra1 +slug: Mozilla/Tech/XUL/Method/extra1 +translation_of: Archive/Mozilla/XUL/Method/extra1 +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <span id="m-extra1"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/extra1">extra1()</a></code></span></dt> + <dd> + 返回值类型:无返回值</dd> + <dd> + 调用该方法可以模拟对extra1按钮的点击,同时也会触发并执行该元素的<code id="a-onextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/onextra1">onextra1</a></code>属性上设置的代码.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/method/focus/index.html b/files/zh-cn/mozilla/tech/xul/method/focus/index.html new file mode 100644 index 0000000000..690ba10358 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/focus/index.html @@ -0,0 +1,15 @@ +--- +title: focus +slug: Mozilla/Tech/XUL/Method/focus +translation_of: Archive/Mozilla/XUL/Method/focus +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus()</a></code></span></dt> + <dd> + 返回值类型: 无返回值</dd> + <dd> + 让指定的元素获得键盘焦点.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/method/getbrowserfortab/index.html b/files/zh-cn/mozilla/tech/xul/method/getbrowserfortab/index.html new file mode 100644 index 0000000000..483579d074 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/getbrowserfortab/index.html @@ -0,0 +1,15 @@ +--- +title: getBrowserForTab +slug: Mozilla/Tech/XUL/Method/getBrowserForTab +translation_of: Archive/Mozilla/XUL/Method/getBrowserForTab +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <span id="m-getBrowserForTab"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getBrowserForTab">getBrowserForTab( tab )</a></code></span></dt> + <dd> + 返回值类型: <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code>元素</dd> + <dd> + 返回于指定的<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>元素相关联的<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code>元素.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/method/getbutton/index.html b/files/zh-cn/mozilla/tech/xul/method/getbutton/index.html new file mode 100644 index 0000000000..11b4f91e6d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/getbutton/index.html @@ -0,0 +1,15 @@ +--- +title: getButton +slug: Mozilla/Tech/XUL/Method/getButton +translation_of: Archive/Mozilla/XUL/Method/getButton +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <span id="m-getButton"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getButton">getButton( type )</a></code></span></dt> + <dd> + 返回值类型: <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>元素</dd> + <dd> + 返回当前对话框中指定类型的<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>元素.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/method/increase/index.html b/files/zh-cn/mozilla/tech/xul/method/increase/index.html new file mode 100644 index 0000000000..b7431b355b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/increase/index.html @@ -0,0 +1,21 @@ +--- +title: increase +slug: Mozilla/Tech/XUL/Method/increase +translation_of: Archive/Mozilla/XUL/Method/increase +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<div class="noinclude"> + <dl> + <dd> + 拥有该方法的元素类型: <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/scale" title="scale">scale</a></code> <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></dd> + </dl> +</div> +<dl> + <dt> + <span id="m-increase"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/increase">increase()</a></code></span></dt> + <dd> + 返回值类型: 无返回值</dd> + <dd> + 增大刻度条控件(scale元素)或者数字输入框控件(type属性为number的textbox元素)中的数字值(按照其<code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>属性指定的值).</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/method/index.html b/files/zh-cn/mozilla/tech/xul/method/index.html new file mode 100644 index 0000000000..e5d7d023c0 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/index.html @@ -0,0 +1,170 @@ +--- +title: Methods +slug: Mozilla/Tech/XUL/Method +tags: + - XUL Methods +translation_of: Archive/Mozilla/XUL/Method +--- +<p><span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span> </p> +<ul><li> <a href="cn/XUL/Method/acceptDialog">acceptDialog</a> +</li><li> <a href="cn/XUL/Method/addItemToSelection">addItemToSelection</a> +</li><li> <a href="cn/XUL/Method/addPane">addPane</a> +</li><li> <a href="cn/XUL/Method/addProgressListener">addProgressListener</a> +</li><li> <a href="cn/XUL/Method/addSession">addSession</a> +</li><li> <a href="cn/XUL/Method/addTab">addTab</a> +</li><li> <a href="cn/XUL/Method/advance">advance</a> +</li><li> <a href="cn/XUL/Method/advanceSelectedTab">advanceSelectedTab</a> +</li><li> <a href="cn/XUL/Method/appendCustomToolbar">appendCustomToolbar</a> +</li><li> <a href="cn/XUL/Method/appendGroup">appendGroup</a> +</li><li> <a href="cn/XUL/Method/appendItem">appendItem</a> +</li><li> <a href="cn/XUL/Method/appendNotification">appendNotification</a> +</li><li> <a href="cn/XUL/Method/blur">blur</a> +</li><li> <a href="cn/XUL/Method/cancel">cancel</a> +</li><li> <a href="cn/XUL/Method/cancelDialog">cancelDialog</a> +</li><li> <a href="cn/XUL/Method/centerWindowOnScreen">centerWindowOnScreen</a> +</li><li> <a href="cn/XUL/Method/checkAdjacentElement">checkAdjacentElement</a> +</li><li> <a href="cn/XUL/Method/clearResults">clearResults</a> +</li><li> <a href="cn/XUL/Method/clearSelection">clearSelection</a> +</li><li> <a href="cn/XUL/Method/click">click</a> +</li><li> <a href="cn/XUL/Method/close">close</a> +</li><li> <a href="cn/XUL/Method/collapseToolbar">collapseToolbar</a> +</li><li> <a href="cn/XUL/Method/contains">contains</a> +</li><li> <a href="cn/XUL/Method/decrease">decrease</a> +</li><li> <a href="cn/XUL/Method/decreasePage">decreasePage</a> +</li><li> <a href="cn/XUL/Method/doCommand">doCommand</a> +</li><li> <a href="cn/XUL/Method/ensureElementIsVisible">ensureElementIsVisible</a> +</li><li> <a href="cn/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible</a> +</li><li> <a href="cn/XUL/Method/ensureSelectedElementIsVisible">ensureSelectedElementIsVisible</a> +</li><li> <a href="cn/XUL/Method/expandToolbar">expandToolbar</a> +</li><li> <a href="cn/XUL/Method/extra1">extra1</a> +</li><li> <a href="cn/XUL/Method/extra2">extra2</a> +</li><li> <a href="cn/XUL/Method/focus">focus</a> +</li><li> <a href="cn/XUL/Method/getBrowserAtIndex">getBrowserAtIndex</a> +</li><li> <a href="cn/XUL/Method/getBrowserForDocument">getBrowserForDocument</a> +</li><li> <a href="cn/XUL/Method/getBrowserForTab">getBrowserForTab</a> +</li><li> <a href="cn/XUL/Method/getBrowserIndexForDocument">getBrowserIndexForDocument</a> +</li><li> <a href="cn/XUL/Method/getButton">getButton</a> +</li><li> <a href="cn/XUL/Method/getDefaultSession">getDefaultSession</a> +</li><li> <a href="cn/XUL/Method/getEditor">getEditor</a> +</li><li> <a href="cn/XUL/Method/getElementsByAttribute">getElementsByAttribute</a> +</li><li> <a href="cn/XUL/Method/getFormattedString">getFormattedString</a> +</li><li> <a href="cn/XUL/Method/getHTMLEditor">getHTMLEditor</a> +</li><li> <a href="cn/XUL/Method/getIndexOfFirstVisibleRow">getIndexOfFirstVisibleRow</a> +</li><li> <a href="cn/XUL/Method/getIndexOfItem">getIndexOfItem</a> +</li><li> <a href="cn/XUL/Method/getItemAtIndex">getItemAtIndex</a> +</li><li> <a href="cn/XUL/Method/getNextItem">getNextItem</a> +</li><li> <a href="cn/XUL/Method/getNotificationBox">getNotificationBox</a> +</li><li> <a href="cn/XUL/Method/getNotificationWithValue">getNotificationWithValue</a> +</li><li> <a href="cn/XUL/Method/getNumberOfVisibleRows">getNumberOfVisibleRows</a> +</li><li> <a href="cn/XUL/Method/getPageById">getPageById</a> +</li><li> <a href="cn/XUL/Method/getPreviousItem">getPreviousItem</a> +</li><li> <a href="cn/XUL/Method/getResultAt">getResultAt</a> +</li><li> <a href="cn/XUL/Method/getResultCount">getResultCount</a> +</li><li> <a href="cn/XUL/Method/getResultValueAt">getResultValueAt</a> +</li><li> <a href="cn/XUL/Method/getRowCount">getRowCount</a> +</li><li> <a href="cn/XUL/Method/getSearchAt">getSearchAt</a> +</li><li> <a href="cn/XUL/Method/getSelectedItem">getSelectedItem</a> +</li><li> <a href="cn/XUL/Method/getSession">getSession</a> +</li><li> <a href="cn/XUL/Method/getSessionByName">getSessionByName</a> +</li><li> <a href="cn/XUL/Method/getSessionResultAt">getSessionResultAt</a> +</li><li> <a href="cn/XUL/Method/getSessionStatusAt">getSessionStatusAt</a> +</li><li> <a href="cn/XUL/Method/getSessionValueAt">getSessionValueAt</a> +</li><li> <a href="cn/XUL/Method/getString">getString</a> +</li><li> <a href="cn/XUL/Method/goBack">goBack</a> +</li><li> <a href="cn/XUL/Method/goBackGroup">goBackGroup</a> +</li><li> <a href="cn/XUL/Method/goDown">goDown</a> +</li><li> <a href="cn/XUL/Method/goForward">goForward</a> +</li><li> <a href="cn/XUL/Method/goForwardGroup">goForwardGroup</a> +</li><li> <a href="cn/XUL/Method/goHome">goHome</a> +</li><li> <a href="cn/XUL/Method/goTo">goTo</a> +</li><li> <a href="cn/XUL/Method/gotoIndex">gotoIndex</a> +</li><li> <a href="cn/XUL/Method/goUp">goUp</a> +</li><li> <a href="cn/XUL/Method/hasUserValue">hasUserValue</a> +</li><li> <a href="cn/XUL/Method/hidePopup">hidePopup</a> +</li><li> <a href="cn/XUL/Method/increase">increase</a> +</li><li> <a href="cn/XUL/Method/increasePage">increasePage</a> +</li><li> <a href="cn/XUL/Method/insertItem">insertItem</a> +</li><li> <a href="cn/XUL/Method/insertItemAt">insertItemAt</a> +</li><li> <a href="cn/XUL/Method/invertSelection">invertSelection</a> +</li><li> <a href="cn/XUL/Method/loadGroup">loadGroup</a> +</li><li> <a href="cn/XUL/Method/loadOneTab">loadOneTab</a> +</li><li> <a href="cn/XUL/Method/loadTabs">loadTabs</a> +</li><li> <a href="cn/XUL/Method/loadURI">loadURI</a> +</li><li> <a href="cn/XUL/Method/loadURIWithFlags">loadURIWithFlags</a> +</li><li> <a href="cn/XUL/Method/makeEditable">makeEditable</a> +</li><li> <a href="cn/XUL/Method/moveByOffset">moveByOffset</a> +</li><li> <a href="cn/XUL/Method/moveTo">moveTo</a> +</li><li> <a href="cn/XUL/Method/moveToAlertPosition">moveToAlertPosition</a> +</li><li> <a href="cn/XUL/Method/onSearchComplete">onSearchComplete</a> +</li><li> <a href="cn/XUL/Method/onTextEntered">onTextEntered</a> +</li><li> <a href="cn/XUL/Method/onTextReverted">onTextReverted</a> +</li><li> <a href="cn/XUL/Method/openPopup">openPopup</a> +</li><li> <a href="cn/XUL/Method/openPopupAtScreen">openPopupAtScreen</a> +</li><li> <a href="cn/XUL/Method/openSubDialog">openSubDialog</a> +</li><li> <a href="cn/XUL/Method/openWindow">openWindow</a> +</li><li> <a href="cn/XUL/Method/preferenceForElement">preferenceForElement</a> +</li><li> <a href="cn/XUL/Method/reload">reload</a> +</li><li> <a href="cn/XUL/Method/reloadAllTabs">reloadAllTabs</a> +</li><li> <a href="cn/XUL/Method/reloadTab">reloadTab</a> +</li><li> <a href="cn/XUL/Method/reloadWithFlags">reloadWithFlags</a> +</li><li> <a href="cn/XUL/Method/removeAllItems">removeAllItems</a> +</li><li> <a href="cn/XUL/Method/removeAllNotifications">removeAllNotifications</a> +</li><li> <a href="cn/XUL/Method/removeAllTabsBut">removeAllTabsBut</a> +</li><li> <a href="cn/XUL/Method/removeCurrentNotification">removeCurrentNotification</a> +</li><li> <a href="cn/XUL/Method/removeCurrentTab">removeCurrentTab</a> +</li><li> <a href="cn/XUL/Method/removeItemAt">removeItemAt</a> +</li><li> <a href="cn/XUL/Method/removeItemFromSelection">removeItemFromSelection</a> +</li><li> <a href="cn/XUL/Method/removeNotification">removeNotification</a> +</li><li> <a href="cn/XUL/Method/removeProgressListener">removeProgressListener</a> +</li><li> <a href="cn/XUL/Method/removeSession">removeSession</a> +</li><li> <a href="cn/XUL/Method/removeTab">removeTab</a> +</li><li> <a href="cn/XUL/Method/removeTransientNotifications">removeTransientNotifications</a> +</li><li> <a href="cn/XUL/Method/replaceGroup">replaceGroup</a> +</li><li> <a href="cn/XUL/Method/reset">reset</a> +</li><li> <a href="cn/XUL/Method/rewind">rewind</a> +</li><li> <a href="cn/XUL/Method/scrollByIndex">scrollByIndex</a> +</li><li> <a href="cn/XUL/Method/scrollByPixels">scrollByPixels</a> +</li><li> <a href="cn/XUL/Method/scrollToIndex">scrollToIndex</a> +</li><li> <a href="cn/XUL/Method/select">select</a> +</li><li> <a href="cn/XUL/Method/selectAll">selectAll</a> +</li><li> <a href="cn/XUL/Method/selectItem">selectItem</a> +</li><li> <a href="cn/XUL/Method/selectItemRange">selectItemRange</a> +</li><li> <a href="cn/XUL/Method/setSelectionRange">setSelectionRange</a> +</li><li> <a href="cn/XUL/Method/showPane">showPane</a> +</li><li> <a href="cn/XUL/Method/showPopup">showPopup</a> +</li><li> <a href="cn/XUL/Method/sizeTo">sizeTo</a> +</li><li> <a href="cn/XUL/Method/startEditing">startEditing</a> +</li><li> <a href="cn/XUL/Method/stop">stop</a> +</li><li> <a href="cn/XUL/Method/stopEditing">stopEditing</a> +</li><li> <a href="cn/XUL/Method/syncSessions">syncSessions</a> +</li><li> <a href="cn/XUL/Method/timedSelect">timedSelect</a> +</li><li> <a href="cn/XUL/Method/toggleItemSelection">toggleItemSelection</a> +</li></ul> +<h3 id="Related_DOM_element_methods" name="Related_DOM_element_methods"> Related DOM element methods </h3> +<ul><li> <a href="cn/DOM/element.addEventListener">DOM:element.addEventListener</a> +</li><li> <a href="cn/DOM/element.appendChild">DOM:element.appendChild</a> +</li><li> <a href="cn/DOM/element.dispatchEvent">DOM:element.dispatchEvent</a> +</li><li> <a href="cn/DOM/element.getAttribute">DOM:element.getAttribute</a> +</li><li> <a href="cn/DOM/element.getAttributeNode">DOM:element.getAttributeNode</a> +</li><li> <a href="cn/DOM/element.getAttributeNodeNS">DOM:element.getAttributeNodeNS</a> +</li><li> <a href="cn/DOM/element.getAttributeNS">DOM:element.getAttributeNS</a> +</li><li> <a href="cn/DOM/element.getElementsByTagName">DOM:element.getElementsByTagName</a> +</li><li> <a href="cn/DOM/element.getElementsByTagNameNS">DOM:element.getElementsByTagNameNS</a> +</li><li> <a href="cn/DOM/element.hasAttribute">DOM:element.hasAttribute</a> +</li><li> <a href="cn/DOM/element.hasAttributeNS">DOM:element.hasAttributeNS</a> +</li><li> <a href="cn/DOM/element.hasAttributes">DOM:element.hasAttributes</a> +</li><li> <a href="cn/DOM/element.hasChildNodes">DOM:element.hasChildNodes</a> +</li><li> <a href="cn/DOM/element.insertBefore">DOM:element.insertBefore</a> +</li><li> <a href="cn/DOM/element.isSupported">DOM:element.isSupported</a> +</li><li> <a href="cn/DOM/element.normalize">DOM:element.normalize</a> +</li><li> <a href="cn/DOM/element.removeAttribute">DOM:element.removeAttribute</a> +</li><li> <a href="cn/DOM/element.removeAttributeNode">DOM:element.removeAttributeNode</a> +</li><li> <a href="cn/DOM/element.removeAttributeNS">DOM:element.removeAttributeNS</a> +</li><li> <a href="cn/DOM/element.removeChild">DOM:element.removeChild</a> +</li><li> <a href="cn/DOM/element.removeEventListener">DOM:element.removeEventListener</a> +</li><li> <a href="cn/DOM/element.replaceChild">DOM:element.replaceChild</a> +</li><li> <a href="cn/DOM/element.setAttribute">DOM:element.setAttribute</a> +</li><li> <a href="cn/DOM/element.setAttributeNode">DOM:element.setAttributeNode</a> +</li><li> <a href="cn/DOM/element.setAttributeNodeNS">DOM:element.setAttributeNodeNS</a> +</li><li> <a href="cn/DOM/element.setAttributeNS">DOM:element.setAttributeNS</a> +</li></ul> diff --git a/files/zh-cn/mozilla/tech/xul/method/reset/index.html b/files/zh-cn/mozilla/tech/xul/method/reset/index.html new file mode 100644 index 0000000000..258f4d53df --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/reset/index.html @@ -0,0 +1,15 @@ +--- +title: reset +slug: Mozilla/Tech/XUL/Method/reset +translation_of: Archive/Mozilla/XUL/Method/reset +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <span id="m-reset"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/reset">reset()</a></code></span></dt> + <dd> + 返回值:无返回值</dd> + <dd> + 将用户偏好重置为默认值.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/method/stop/index.html b/files/zh-cn/mozilla/tech/xul/method/stop/index.html new file mode 100644 index 0000000000..181a6123ae --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/method/stop/index.html @@ -0,0 +1,15 @@ +--- +title: stop +slug: Mozilla/Tech/XUL/Method/stop +translation_of: Archive/Mozilla/XUL/Method/stop +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/en-US/docs/XUL_Reference" title="/en-US/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <span id="m-stop"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/stop">stop()</a></code></span></dt> + <dd> + 返回值: 无返回值</dd> + <dd> + 效果等同于按下了停止按钮,停止当前页面中文档的加载.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/namespaces/index.html b/files/zh-cn/mozilla/tech/xul/namespaces/index.html new file mode 100644 index 0000000000..73a5099ae6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/namespaces/index.html @@ -0,0 +1,73 @@ +--- +title: Namespaces +slug: Mozilla/Tech/XUL/Namespaces +translation_of: Archive/Mozilla/XUL/Namespaces +--- +<p> </p> + +<p>除此文档外，请参阅<a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a>。</p> + +<p><strong>XML namespaces</strong> 提供了区分重复元素和属性名称的方法。当XML文档包含来自两个或多个不同的XML模式 (或者DTD)的元素和属性时，可能会出现重复元素和属性名称。引用 <a class="external" href="http://en.wikipedia.org/wiki/Namespace">Wikipedia</a>: "一般来说，namespaces是一个抽象的容器，为项目提供上下文... 它拥有并且允许消除具有相同名称的项目的消歧。"</p> + +<p>如果你熟悉C++命名空间、Java包、Perl包或者Python模块导入，那么你已经熟悉了namespaces概念。</p> + +<p>XML namespace 由唯一的名称 (称为URI, 而不是URL, 即使它看起来像URL)标识。URI 可以是任何字符串，虽然大多数人选择基于URL的URI，因为URL是实现我们期望的唯一性的一种简单的方法。虽然没有任何理由去阻止其他人使用这个namespaces <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code>, 但是不太可能有人会不小心选择这个namespaces。即使他们意外的选择了这个namespaces，他们也不可能在他们的模式/DTD中定义与XUL相同的元素 。</p> + +<p>XML namespace中的任何元素类型或者属性名称都可以通过其XML namespace和其“local name”来唯一标识。 这两个项目一起定义了一个限定名称，或者 <a class="external" href="http://www.w3.org/TR/REC-xml-names/#dt-qualname">QName</a>.</p> + +<p>例如： <code><xul:textbox/></code> 使用名为"xul"的namespace和本地名称 "textbox"。它不同于例子所示，例如： <code><foobar:textbox/></code> 可能出现在同一个文档中。<strong>xul</strong>和<strong>foobar</strong> namespaces必须定义在它们所使用的XML文档的顶部， 如下：</p> + +<pre> <foobar:some-element + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:foobar="the-foobar-namespace"> + <xul:textbox id="foo" value="bar"/> + <foobar:textbox favorite-food="pancakes"/> + </foobar:some-element> +</pre> + +<p>注意我已经在同一个文档中混合了两个<code><textboxes/></code> 。区分他们的唯一的方法是他们有不同含义的namespaces.</p> + +<p>还有一个事情需要了解：“default namespace(默认namespace)”。每个XML元素有一个 "default namespace", 而且它总是和XUL 元素一起使用。在XUL 文档中，您通常会看到：</p> + +<pre> <window + id="foo" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + ... + ... + </window> +</pre> + +<p>在XHTML 文档中，您会看到：</p> + +<pre> <html xmlns="http://www.w3.org/1999/xhtml"> + ... + ... + </html> +</pre> + +<p>与之前相比，这里有一个非常微妙的差别。 我之前写过<code>xmlns<strong>:xul</strong>="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</code> ，但是这儿的：<strong>xul</strong> 部分被省略。这意味着对XML解析器来说，<code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code> 是元素及其后代元素的 <strong>default namespace</strong> (除非在后代元素上被default namespace覆盖)，并且，如果没有namespace 的任何元素（即，没有前缀和colon）属于default namespace。这就是为什么我们可以使用简写<code><textbox/></code>来代替XUL中的 <code><xul:textbox/></code> (即使后者在没有使用<code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code> 作为default namespace是正确的) -- XUL namespace被定义为最顶层元素的默认值。换句话说，default namespace允许一种简短的概括被用于一个元素的所有后代元素。</p> + +<p>这里有一个问题：在下面的XML文档中，什么namespace包含了foo元素?</p> + +<pre> <foo/> +</pre> + +<p>答案是它不在namespace, 或者它在namespace中由空字符串表示:</p> + +<pre> <foo xmlns=""/> +</pre> + +<p>第二个例子在语义上等同于第一个例子。</p> + +<p>那么第二个问题是： <code>bar</code>、 <code>baz</code> 和 <code>quux</code> 是什么名称空间中的属性?</p> + +<p> </p> + +<pre> <foo bar="value"> + <element xmlns="namespace!" baz="value"> + <element quux="value"/> + </element> + </foo> +</pre> + +<p><code>bar</code> 显然不在namespace中。那么 <code>baz<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">和</span></font></code><code>quux</code>怎么样呢？答案是他们也不在namespace中。实际上，在namespace中没有任何前缀不确定的属性，主要是因为XML最初没有namespaces，而且从那时起，所有的XML必须保持在无namespace.这是XML namespaces常年混乱的根源。</p> diff --git a/files/zh-cn/mozilla/tech/xul/popup/index.html b/files/zh-cn/mozilla/tech/xul/popup/index.html new file mode 100644 index 0000000000..05ce34c3bc --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/popup/index.html @@ -0,0 +1,23 @@ +--- +title: popup +slug: Mozilla/Tech/XUL/popup +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/popup +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>The popup element is equivalent to the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> element which should be used instead. See the documentation on the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> element for more information.</p> +<p>popup元素和<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>元素在功能上是等价的，具体用法可以参考<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>的说明文档。</p> +<p> </p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/accessibletype/index.html b/files/zh-cn/mozilla/tech/xul/property/accessibletype/index.html new file mode 100644 index 0000000000..ae445e8bdb --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/accessibletype/index.html @@ -0,0 +1,183 @@ +--- +title: accessibleType +slug: Mozilla/Tech/XUL/Property/accessibleType +translation_of: Archive/Mozilla/XUL/Property/accessibleType +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> +<div class="noinclude"> + <p>Possible values are:</p> + <table> + <tbody> + <tr> + <th>Constant</th> + <th>Value</th> + </tr> + <tr> + <td>XULAlert</td> + <td>1001</td> + </tr> + <tr> + <td>XULButton</td> + <td>1002</td> + </tr> + <tr> + <td>XULCheckbox</td> + <td>1003</td> + </tr> + <tr> + <td>XULColorPicker</td> + <td>1004</td> + </tr> + <tr> + <td>XULColorPickerTile</td> + <td>1005</td> + </tr> + <tr> + <td>XULCombobox</td> + <td>1006</td> + </tr> + <tr> + <td>XULDropmarker</td> + <td>1007</td> + </tr> + <tr> + <td>XULGroupbox</td> + <td>1008</td> + </tr> + <tr> + <td>XULImage</td> + <td>1009</td> + </tr> + <tr> + <td>XULLink</td> + <td>100A</td> + </tr> + <tr> + <td>XULListbox</td> + <td>100B</td> + </tr> + <tr> + <td>XULListCell</td> + <td>1026</td> + </tr> + <tr> + <td>XULListHead</td> + <td>1024</td> + </tr> + <tr> + <td>XULListHeader</td> + <td>1025</td> + </tr> + <tr> + <td>XULListitem</td> + <td>100C</td> + </tr> + <tr> + <td>XULMenubar</td> + <td>100D</td> + </tr> + <tr> + <td>XULMenuitem</td> + <td>100E</td> + </tr> + <tr> + <td>XULMenupopup</td> + <td>100F</td> + </tr> + <tr> + <td>XULMenuSeparator</td> + <td>1010</td> + </tr> + <tr> + <td>XULPane</td> + <td>1011</td> + </tr> + <tr> + <td>XULProgressMeter</td> + <td>1012</td> + </tr> + <tr> + <td>XULScale</td> + <td>1013</td> + </tr> + <tr> + <td>XULStatusBar</td> + <td>1014</td> + </tr> + <tr> + <td>XULRadioButton</td> + <td>1015</td> + </tr> + <tr> + <td>XULRadioGroup</td> + <td>1016</td> + </tr> + <tr> + <td>XULTab</td> + <td>1017</td> + </tr> + <tr> + <td>XULTabBox</td> + <td>1018</td> + </tr> + <tr> + <td>XULTabs</td> + <td>1019</td> + </tr> + <tr> + <td>XULText</td> + <td>101A</td> + </tr> + <tr> + <td>XULTextBox</td> + <td>101B</td> + </tr> + <tr> + <td>XULThumb</td> + <td>101C</td> + </tr> + <tr> + <td>XULTree</td> + <td>101D</td> + </tr> + <tr> + <td>XULTreeColumns</td> + <td>101E</td> + </tr> + <tr> + <td>XULTreeColumnItem</td> + <td>101F</td> + </tr> + <tr> + <td>XULToolbar</td> + <td>1020</td> + </tr> + <tr> + <td>XULToolbarSeparator</td> + <td>1021</td> + </tr> + <tr> + <td>XULTooltip</td> + <td>1022</td> + </tr> + <tr> + <td>XULToolbarButton</td> + <td>1023</td> + </tr> + </tbody> + </table> + <p></div></p> +</div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/accesskey/index.html b/files/zh-cn/mozilla/tech/xul/property/accesskey/index.html new file mode 100644 index 0000000000..7b49328080 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/accesskey/index.html @@ -0,0 +1,21 @@ +--- +title: accessKey +slug: Mozilla/Tech/XUL/Property/accessKey +translation_of: Archive/Mozilla/XUL/Property/accessKey +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/browser.preferences/index.html b/files/zh-cn/mozilla/tech/xul/property/browser.preferences/index.html new file mode 100644 index 0000000000..7a0bd25201 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/browser.preferences/index.html @@ -0,0 +1,15 @@ +--- +title: browser.preferences +slug: Mozilla/Tech/XUL/Property/browser.preferences +translation_of: Archive/Mozilla/XUL/Property/browser.preferences +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/browser.preferences">preferences</a></span></code></dt> + <dd> + 类型: <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService" title="">nsIPrefService</a></code></dd> + <dd> + 这是一个只读属性,其值为一个<code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPref" title="">nsIPref</a></code>对象,可以用来读取或设置用户的首选项.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/buttons/index.html b/files/zh-cn/mozilla/tech/xul/property/buttons/index.html new file mode 100644 index 0000000000..67304e8fa1 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/buttons/index.html @@ -0,0 +1,10 @@ +--- +title: buttons +slug: Mozilla/Tech/XUL/Property/buttons +translation_of: Archive/Mozilla/XUL/Property/buttons +--- +<div class="noinclude"><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> <dt><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/buttons">buttons</a></span></code></dt> <dd>类型: 列表，下面的值用逗号分隔</dd> <dd>需要显示在对话框上的按钮的一个列表，使用逗号分隔。将按钮放置在合适的位置，将根据用户平台自动执行基本的事件处理。在列表中可以使用以下值： <ul> <li><code>accept</code>：“确定”按钮，按下按钮时将接受更改。此按钮为默认按钮。</li> <li><code>cancel</code>：“取消”按钮，将取消操作。</li> <li><code>help</code>：“帮助”按钮，在对话框显示一个“帮助”按钮。</li> <li><code>disclosure</code>：“更多信息”按钮，显示一个“more info”按钮。该按钮可能是一个按钮或一个三角形。</li> <li><code>extra1</code>：一个可选的额外的按钮。你可以通过<code><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code> 属性设置它的label。</li> <li><code>extra2</code>：第二个可选的额外的按钮。你可以通过 <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code> 属性设置它的label。</li> </ul> </dd> +</dl> +<div class="noinclude"> <p></p><div class="blockIndicator note"><strong>Note:</strong> If you don't want to display any buttons in the dialog box, set the value of this attribute to "," (a single comma).</div><p></p> <p></p> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/property/command/index.html b/files/zh-cn/mozilla/tech/xul/property/command/index.html new file mode 100644 index 0000000000..10993a17e6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/command/index.html @@ -0,0 +1,21 @@ +--- +title: command +slug: Mozilla/Tech/XUL/Property/command +translation_of: Archive/Mozilla/XUL/Property/command +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/command">command</a></span></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/crop/index.html b/files/zh-cn/mozilla/tech/xul/property/crop/index.html new file mode 100644 index 0000000000..54a99a746b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/crop/index.html @@ -0,0 +1,21 @@ +--- +title: crop +slug: Mozilla/Tech/XUL/Property/crop +translation_of: Archive/Mozilla/XUL/Property/crop +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/defaultvalue/index.html b/files/zh-cn/mozilla/tech/xul/property/defaultvalue/index.html new file mode 100644 index 0000000000..7aca9067cb --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/defaultvalue/index.html @@ -0,0 +1,15 @@ +--- +title: defaultValue +slug: Mozilla/Tech/XUL/Property/defaultValue +translation_of: Archive/Mozilla/XUL/Property/defaultValue +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/defaultValue">defaultValue</a></span></code> </dt> + <dd> + 类型: 字符串</dd> + <dd> + 获取或设置一个<code>textbox</code>元素中显示的默认值.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/disabled/index.html b/files/zh-cn/mozilla/tech/xul/property/disabled/index.html new file mode 100644 index 0000000000..500640dc2a --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/disabled/index.html @@ -0,0 +1,21 @@ +--- +title: disabled +slug: Mozilla/Tech/XUL/Property/disabled +translation_of: Archive/Mozilla/XUL/Property/disabled +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/image/index.html b/files/zh-cn/mozilla/tech/xul/property/image/index.html new file mode 100644 index 0000000000..5079e489cd --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/image/index.html @@ -0,0 +1,21 @@ +--- +title: image +slug: Mozilla/Tech/XUL/Property/image +translation_of: Archive/Mozilla/XUL/Property/image +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/image">image</a></span></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/index.html b/files/zh-cn/mozilla/tech/xul/property/index.html new file mode 100644 index 0000000000..caec3163d8 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/index.html @@ -0,0 +1,266 @@ +--- +title: Property +slug: Mozilla/Tech/XUL/Property +tags: + - XUL Properties +translation_of: Archive/Mozilla/XUL/Property +--- +<p><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span> +</p> +<ul><li> <a href="cn/XUL/Property/accessible">accessible</a> +</li><li> <a href="cn/XUL/Property/accessKey">accessKey</a> +</li><li> <a href="cn/XUL/Property/align">align</a> +</li><li> <a href="cn/XUL/Property/allNotifications">allNotifications</a> +</li><li> <a href="cn/XUL/Property/allowEvents">allowEvents</a> +</li><li> <a href="cn/XUL/Property/alwaysOpenPopup">alwaysOpenPopup</a> +</li><li> <a href="cn/XUL/Property/amIndicator">amIndicator</a> +</li><li> <a href="cn/XUL/Property/appLocale">appLocale</a> +</li><li> <a href="cn/XUL/Property/autoCheck">autoCheck</a> +</li><li> <a href="cn/XUL/Property/autoFill">autoFill</a> +</li><li> <a href="cn/XUL/Property/autoFillAfterMatch">autoFillAfterMatch</a> +</li><li> <a href="cn/XUL/Property/boxObject">boxObject</a> +</li><li> <a href="cn/XUL/Property/browsers">browsers</a> +</li><li> <a href="cn/XUL/Property/builder">builder</a> +</li><li> <a href="cn/XUL/Property/builderView">builderView</a> +</li><li> <a href="cn/XUL/Property/buttons">buttons</a> +</li><li> <a href="cn/XUL/Property/canAdvance">canAdvance</a> +</li><li> <a href="cn/XUL/Property/canGoBack">canGoBack</a> +</li><li> <a href="cn/XUL/Property/canGoForward">canGoForward</a> +</li><li> <a href="cn/XUL/Property/canRewind">canRewind</a> +</li><li> <a href="cn/XUL/Property/checked">checked</a> +</li><li> <a href="cn/XUL/Property/checkState">checkState</a> +</li><li> <a href="cn/XUL/Property/child">child</a> +</li><li> <a href="cn/XUL/Property/children">children</a> +</li><li> <a href="cn/XUL/Property/className">className</a> +</li><li> <a href="cn/XUL/Property/clickSelectsAll">clickSelectsAll</a> +</li><li> <a href="cn/XUL/Property/collapsed">collapsed</a> +</li><li> <a href="cn/XUL/Property/color">color</a> +</li><li> <a href="cn/XUL/Property/columns">columns</a> +</li><li> <a href="cn/XUL/Property/command">command</a> +</li><li> <a href="cn/XUL/Property/commandManager">commandManager</a> +</li><li> <a href="cn/XUL/Property/completeDefaultIndex">completeDefaultIndex</a> +</li><li> <a href="cn/XUL/Property/container">container</a> +</li><li> <a href="cn/XUL/Property/contentDocument">contentDocument</a> +</li><li> <a href="cn/XUL/Property/contentPrincipal">contentPrincipal</a> +</li><li> <a href="cn/XUL/Property/contentTitle">contentTitle</a> +</li><li> <a href="cn/XUL/Property/contentView">contentView</a> +</li><li> <a href="cn/XUL/Property/contentViewerEdit">contentViewerEdit</a> +</li><li> <a href="cn/XUL/Property/contentViewerFile">contentViewerFile</a> +</li><li> <a href="cn/XUL/Property/contentWindow">contentWindow</a> +</li><li> <a href="cn/XUL/Property/contextMenu">contextMenu</a> +</li><li> <a href="cn/XUL/Property/control">control</a> +</li><li> <a href="cn/XUL/Property/controller">controller</a> +</li><li> <a href="cn/XUL/Property/controllers">controllers</a> +</li><li> <a href="cn/XUL/Property/crop">crop</a> +</li><li> <a href="cn/XUL/Property/current">current</a> +</li><li> <a href="cn/XUL/Property/currentIndex">currentIndex</a> +</li><li> <a href="cn/XUL/Property/currentItem">currentItem</a> +</li><li> <a href="cn/XUL/Property/currentPage">currentPage</a> +</li><li> <a href="cn/XUL/Property/currentPane">currentPane</a> +</li><li> <a href="cn/XUL/Property/currentSet">currentSet</a> +</li><li> <a href="cn/XUL/Property/currentURI">currentURI</a> +</li><li> <a href="cn/XUL/Property/customToolbarCount">customToolbarCount</a> +</li><li> <a href="cn/XUL/Property/database">database</a> +</li><li> <a href="cn/XUL/Property/datasources">datasources</a> +</li><li> <a href="cn/XUL/Property/date">date</a> +</li><li> <a href="cn/XUL/Property/dateLeadingZero">dateLeadingZero</a> +</li><li> <a href="cn/XUL/Property/dateValue">dateValue</a> +</li><li> <a href="cn/XUL/Property/decimalPlaces">decimalPlaces</a> +</li><li> <a href="cn/XUL/Property/decimalSymbol">decimalSymbol</a> +</li><li> <a href="cn/XUL/Property/defaultButton">defaultButton</a> +</li><li> <a href="cn/XUL/Property/description">description</a> +</li><li> <a href="cn/XUL/Property/dir">dir</a> +</li><li> <a href="cn/XUL/Property/disableAutocomplete">disableAutocomplete</a> +</li><li> <a href="cn/XUL/Property/disableAutoComplete">disableAutoComplete</a> +</li><li> <a href="cn/XUL/Property/disableKeyNavigation">disableKeyNavigation</a> +</li><li> <a href="cn/XUL/Property/disableautoselect">disableautoselect</a> +</li><li> <a href="cn/XUL/Property/disabled">disabled</a> +</li><li> <a href="cn/XUL/Property/disableKeyNavigation">disableKeyNavigation</a> +</li><li> <a href="cn/XUL/Property/dlgType">dlgType</a> +</li><li> <a href="cn/XUL/Property/docShell">docShell</a> +</li><li> <a href="cn/XUL/Property/documentCharsetInfo">documentCharsetInfo</a> +</li><li> <a href="cn/XUL/Property/editable">editable</a> +</li><li> <a href="cn/XUL/Property/editingColumn">editingColumn</a> +</li><li> <a href="cn/XUL/Property/editingRow">editingRow</a> +</li><li> <a href="cn/XUL/Property/editingSession">editingSession</a> +</li><li> <a href="cn/XUL/Property/editor">editor</a> +</li><li> <a href="cn/XUL/Property/editortype">editortype</a> +</li><li> <a href="cn/XUL/Property/emptyText">emptyText</a> +</li><li> <a href="cn/XUL/Property/enableColumnDrag">enableColumnDrag</a> +</li><li> <a href="cn/XUL/Property/eventNode">eventNode</a> +</li><li> <a href="cn/XUL/Property/firstOrdinalColumn">firstOrdinalColumn</a> +</li><li> <a href="cn/XUL/Property/firstPermanentChild">firstPermanentChild</a> +</li><li> <a href="cn/XUL/Property/flex">flex</a> +</li><li> <a href="cn/XUL/Property/focused">focused</a> +</li><li> <a href="cn/XUL/Property/focusedItem">focusedItem</a> +</li><li> <a href="cn/XUL/Property/forceComplete">forceComplete</a> +</li><li> <a href="cn/XUL/Property/group">group</a> +</li><li> <a href="cn/XUL/Property/handleCtrlPageUpDown">handleCtrlPageUpDown</a> +</li><li> <a href="cn/XUL/Property/handleCtrlTab">handleCtrlTab</a> +</li><li> <a href="cn/XUL/Property/height">height</a> +</li><li> <a href="cn/XUL/Property/hidden">hidden</a> +</li><li> <a href="cn/XUL/Property/hideSeconds">hideSeconds</a> +</li><li> <a href="cn/XUL/Property/homePage">homePage</a> +</li><li> <a href="cn/XUL/Property/hour">hour</a> +</li><li> <a href="cn/XUL/Property/hourLeadingZero">hourLeadingZero</a> +</li><li> <a href="cn/XUL/Property/id">id</a> +</li><li> <a href="cn/XUL/Property/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a> +</li><li> <a href="cn/XUL/Property/image">image</a> +</li><li> <a href="cn/XUL/Property/increment">increment</a> +</li><li> <a href="cn/XUL/Property/inputField">inputField</a> +</li><li> <a href="cn/XUL/Property/inverted">inverted</a> +</li><li> <a href="cn/XUL/Property/is24HourClock">is24HourClock</a> +</li><li> <a href="cn/XUL/Property/isPM">isPM</a> +</li><li> <a href="cn/XUL/Property/isSearching">isSearching</a> +</li><li> <a href="cn/XUL/Property/isWaiting">isWaiting</a> +</li><li> <a href="cn/XUL/Property/itemCount">itemCount</a> +</li><li> <a href="cn/XUL/Property/label">label</a> +</li><li> <a href="cn/XUL/Property/labelElement">labelElement</a> +</li><li> <a href="cn/XUL/Property/lastPermanentChild">lastPermanentChild</a> +</li><li> <a href="cn/XUL/Property/lastSelected">lastSelected</a> +</li><li> <a href="cn/XUL/Property/left">left</a> +</li><li> <a href="cn/XUL/Property/linkedPanel">linkedPanel</a> +</li><li> <a href="cn/XUL/Property/listBoxObject">listBoxObject</a> +</li><li> <a href="cn/XUL/Property/locked">locked</a> +</li><li> <a href="cn/XUL/Property/markupDocumentViewer">markupDocumentViewer</a> +</li><li> <a href="cn/XUL/Property/max">max</a> +</li><li> <a href="cn/XUL/Property/maxHeight">maxHeight</a> +</li><li> <a href="cn/XUL/Property/maxLength">maxLength</a> +</li><li> <a href="cn/XUL/Property/maxRows">maxRows</a> +</li><li> <a href="cn/XUL/Property/maxWidth">maxWidth</a> +</li><li> <a href="cn/XUL/Property/menu">menu</a> +</li><li> <a href="cn/XUL/Property/menuBoxObject">menuBoxObject</a> +</li><li> <a href="cn/XUL/Property/menupopup">menupopup</a> +</li><li> <a href="cn/XUL/Property/min">min</a> +</li><li> <a href="cn/XUL/Property/minHeight">minHeight</a> +</li><li> <a href="cn/XUL/Property/minResultsForPopup">minResultsForPopup</a> +</li><li> <a href="cn/XUL/Property/minWidth">minWidth</a> +</li><li> <a href="cn/XUL/Property/minute">minute</a> +</li><li> <a href="cn/XUL/Property/minuteLeadingZero">minuteLeadingZero</a> +</li><li> <a href="cn/XUL/Property/mode">mode</a> +</li><li> <a href="cn/XUL/Property/month">month</a> +</li><li> <a href="cn/XUL/Property/monthLeadingZero">monthLeadingZero</a> +</li><li> <a href="cn/XUL/Property/name">name</a> +</li><li> <a href="cn/XUL/Property/next">next</a> +</li><li> <a href="cn/XUL/Property/noMatch">noMatch</a> +</li><li> <a href="cn/XUL/Property/notificationsHidden">notificationsHidden</a> +</li><li> <a href="cn/XUL/Property/object">object</a> +</li><li> <a href="cn/XUL/Property/observes">observes</a> +</li><li> <a href="cn/XUL/Property/onFirstPage">onFirstPage</a> +</li><li> <a href="cn/XUL/Property/onLastPage">onLastPage</a> +</li><li> <a href="cn/XUL/Property/open">open</a> +</li><li> <a href="cn/XUL/Property/ordinal">ordinal</a> +</li><li> <a href="cn/XUL/Property/orient">orient</a> +</li><li> <a href="cn/XUL/Property/pack">pack</a> +</li><li> <a href="cn/XUL/Property/pageCount">pageCount</a> +</li><li> <a href="cn/XUL/Property/pageid">pageid</a> +</li><li> <a href="cn/XUL/Property/pageIncrement">pageIncrement</a> +</li><li> <a href="cn/XUL/Property/pageIndex">pageIndex</a> +</li><li> <a href="cn/XUL/Property/pageStep">pageStep</a> +</li><li> <a href="cn/XUL/Property/parentContainer">parentContainer</a> +</li><li> <a href="cn/XUL/Property/palette">palette</a> +</li><li> <a href="cn/XUL/Property/persist">persist</a> +</li><li> <a href="cn/XUL/Property/persistence">persistence</a> +</li><li> <a href="cn/XUL/Property/popup">popup</a> +</li><li> <a href="cn/XUL/Property/popupBoxObject">popupBoxObject</a> +</li><li> <a href="cn/XUL/Property/popupOpen">popupOpen</a> +</li><li> <a href="cn/XUL/Property/position">position</a> +</li><li> <a href="cn/XUL/Property/predicate">predicate</a> +</li><li> <a href="cn/XUL/Property/preferenceElements">preferenceElements</a> +</li><li> <a href="cn/XUL/Property/preferencePanes">preferencePanes</a> +</li><li> <a href="cn/XUL/Property/preferences">preferences</a> +</li><li> <a href="cn/XUL/Property/priority">priority</a> +</li><li> <a href="cn/XUL/Property/radioGroup">radioGroup</a> +</li><li> <a href="cn/XUL/Property/readonly">readonly</a> +</li><li> <a href="cn/XUL/Property/readonly">readOnly</a> +</li><li> <a href="cn/XUL/Property/ref">ref</a> +</li><li> <a href="cn/XUL/Property/resource">resource</a> +</li><li> <a href="cn/XUL/Property/resultsPopup">resultsPopup</a> +</li><li> <a href="cn/XUL/Property/scrollBoxObject">scrollBoxObject</a> +</li><li> <a href="cn/XUL/Property/scrollIncrement">scrollIncrement</a> +</li><li> <a href="cn/XUL/Property/searchCount">searchCount</a> +</li><li> <a href="cn/XUL/Property/searchLabel">searchLabel</a> +</li><li> <a href="cn/XUL/Property/searchParam">searchParam</a> +</li><li> <a href="cn/XUL/Property/searchSessions">searchSessions</a> +</li><li> <a href="cn/XUL/Property/second">second</a> +</li><li> <a href="cn/XUL/Property/secondLeadingZero">secondLeadingZero</a> +</li><li> <a href="cn/XUL/Property/securityUI">securityUI</a> +</li><li> <a href="cn/XUL/Property/selected">selected</a> +</li><li> <a href="cn/XUL/Property/selectedBrowser">selectedBrowser</a> +</li><li> <a href="cn/XUL/Property/selectedCount">selectedCount</a> +</li><li> <a href="cn/XUL/Property/selectedIndex">selectedIndex</a> +</li><li> <a href="cn/XUL/Property/selectedItem">selectedItem</a> +</li><li> <a href="cn/XUL/Property/selectedItems">selectedItems</a> +</li><li> <a href="cn/XUL/Property/selectedPanel">selectedPanel</a> +</li><li> <a href="cn/XUL/Property/selectedTab">selectedTab</a> +</li><li> <a href="cn/XUL/Property/selectionEnd">selectionEnd</a> +</li><li> <a href="cn/XUL/Property/selectionStart">selectionStart</a> +</li><li> <a href="cn/XUL/Property/selstyle">selstyle</a> +</li><li> <a href="cn/XUL/Property/selType">selType</a> +</li><li> <a href="cn/XUL/Property/sessionCount">sessionCount</a> +</li><li> <a href="cn/XUL/Property/sessionHistory">sessionHistory</a> +</li><li> <a href="cn/XUL/Property/showCommentColumn">showCommentColumn</a> +</li><li> <a href="cn/XUL/Property/showPopup">showPopup</a> +</li><li> <a href="cn/XUL/Property/size">size</a> +</li><li> <a href="cn/XUL/Property/smoothScroll">smoothScroll</a> +</li><li> <a href="cn/XUL/Property/spinButtons">spinButtons</a> +</li><li> <a href="cn/XUL/Property/src">src</a> +</li><li> <a href="cn/XUL/Property/state">state</a> +</li><li> <a href="cn/XUL/Property/statusbar">statusbar</a> +</li><li> <a href="cn/XUL/Property/statusText">statusText</a> +</li><li> <a href="cn/XUL/Property/stringBundle">stringBundle</a> +</li><li> <a href="cn/XUL/Property/strings">strings</a> +</li><li> <a href="cn/XUL/Property/style">style</a> +</li><li> <a href="cn/XUL/Property/subject">subject</a> +</li><li> <a href="cn/XUL/Property/suppressOnSelect">suppressOnSelect</a> +</li><li> <a href="cn/XUL/Property/tabContainer">tabContainer</a> +</li><li> <a href="cn/XUL/Property/tabIndex">tabIndex</a> +</li><li> <a href="cn/XUL/Property/tabs">tabs</a> +</li><li> <a href="cn/XUL/Property/tabScrolling">tabScrolling</a> +</li><li> <a href="cn/XUL/Property/tabpanels">tabpanels</a> +</li><li> <a href="cn/XUL/Property/tag">tag</a> +</li><li> <a href="cn/XUL/Property/textLength">textLength</a> +</li><li> <a href="cn/XUL/Property/textValue">textValue</a> +</li><li> <a href="cn/XUL/Property/timeout">timeout</a> +</li><li> <a href="cn/XUL/Property/title">title</a> +</li><li> <a href="cn/XUL/Property/toolbarName">toolbarName</a> +</li><li> <a href="cn/XUL/Property/toolbarset">toolbarset</a> +</li><li> <a href="cn/XUL/Property/tooltip">tooltip</a> +</li><li> <a href="cn/XUL/Property/tooltipText">tooltipText</a> +</li><li> <a href="cn/XUL/Property/top">top</a> +</li><li> <a href="cn/XUL/Property/treeBoxObject">treeBoxObject</a> +</li><li> <a href="cn/XUL/Property/type">type</a> +</li><li> <a href="cn/XUL/Property/uri">uri</a> +</li><li> <a href="cn/XUL/Property/userAction">userAction</a> +</li><li> <a href="cn/XUL/Property/value">value</a> +</li><li> <a href="cn/XUL/Property/valueNumber">valueNumber</a> +</li><li> <a href="cn/XUL/Property/view">view</a> +</li><li> <a href="cn/XUL/Property/webBrowserFind">webBrowsereFind</a> +</li><li> <a href="cn/XUL/Property/webNavigation">webNavigation</a> +</li><li> <a href="cn/XUL/Property/webProgress">webProgress</a> +</li><li> <a href="cn/XUL/Property/width">width</a> +</li><li> <a href="cn/XUL/Property/wizardPages">wizardPages</a> +</li><li> <a href="cn/XUL/Property/wrapAround">wrapAround</a> +</li><li> <a href="cn/XUL/Property/year">year</a> +</li><li> <a href="cn/XUL/Property/yearLeadingZero">yearLeadingZero</a> +</li></ul> +<h3 id="Related_DOM_element_properties" name="Related_DOM_element_properties"> Related DOM element properties </h3> +<ul><li> <a href="cn/DOM/element.attributes">DOM:element.attributes</a> +</li><li> <a href="cn/DOM/element.childNodes">DOM:element.childNodes</a> +</li><li> <a href="cn/DOM/element.cloneNode">DOM:element.cloneNode</a> +</li><li> <a href="cn/DOM/element.firstChild">DOM:element.firstChild</a> +</li><li> <a href="cn/DOM/element.lastChild">DOM:element.lastChild</a> +</li><li> <a href="cn/DOM/element.localName">DOM:element.localName</a> +</li><li> <a href="cn/DOM/element.namespaceURI">DOM:element.namespaceURI</a> +</li><li> <a href="cn/DOM/element.nextSibling">DOM:element.nextSibling</a> +</li><li> <a href="cn/DOM/element.nodeName">DOM:element.nodeName</a> +</li><li> <a href="cn/DOM/element.nodeType">DOM:element.nodeType</a> +</li><li> <a href="cn/DOM/element.nodeValue">DOM:element.nodeValue</a> +</li><li> <a href="cn/DOM/element.ownerDocument">DOM:element.ownerDocument</a> +</li><li> <a href="cn/DOM/element.parentNode">DOM:element.parentNode</a> +</li><li> <a href="cn/DOM/element.prefix">DOM:element.prefix</a> +</li><li> <a href="cn/DOM/element.previousSibling">DOM:element.previousSibling</a> +</li><li> <a href="cn/DOM/element.tagName">DOM:element.tagName</a> +</li></ul> +<div class="noinclude"> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/property/label/index.html b/files/zh-cn/mozilla/tech/xul/property/label/index.html new file mode 100644 index 0000000000..83f85cc1e3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/label/index.html @@ -0,0 +1,21 @@ +--- +title: label +slug: Mozilla/Tech/XUL/Property/label +translation_of: Archive/Mozilla/XUL/Property/label +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/labelelement/index.html b/files/zh-cn/mozilla/tech/xul/property/labelelement/index.html new file mode 100644 index 0000000000..6baead11d3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/labelelement/index.html @@ -0,0 +1,21 @@ +--- +title: labelElement +slug: Mozilla/Tech/XUL/Property/labelElement +translation_of: Archive/Mozilla/XUL/Property/labelElement +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/labelElement">labelElement</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element</i> + </dd> + <dd> + The <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element associated with the control. This is set when a label has a <code id="a-control"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> attribute pointing to this element. This property will be <code>null</code> when no label is associated with the control.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/markupdocumentviewer/index.html b/files/zh-cn/mozilla/tech/xul/property/markupdocumentviewer/index.html new file mode 100644 index 0000000000..8719292f2d --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/markupdocumentviewer/index.html @@ -0,0 +1,15 @@ +--- +title: markupDocumentViewer +slug: Mozilla/Tech/XUL/Property/markupDocumentViewer +translation_of: Archive/Mozilla/XUL/Property/markupDocumentViewer +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/markupDocumentViewer">markupDocumentViewer</a></span></code></dt> + <dd> + 类型: <em><code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMarkupDocumentViewer" title="">nsIMarkupDocumentViewer</a></code></em></dd> + <dd> + 这个只读的属性包含 <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMarkupDocumentViewer" title="">nsIMarkupDocumentViewer</a></code> 接口，负责document文档的绘制。</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/max/index.html b/files/zh-cn/mozilla/tech/xul/property/max/index.html new file mode 100644 index 0000000000..3d20dae617 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/max/index.html @@ -0,0 +1,15 @@ +--- +title: max +slug: Mozilla/Tech/XUL/Property/max +translation_of: Archive/Mozilla/XUL/Property/max +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/max">max</a></span></code></dt> + <dd> + 类型:整数</dd> + <dd> + 获取或设置<code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>特性(attribute)的值.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/menuitem.control/index.html b/files/zh-cn/mozilla/tech/xul/property/menuitem.control/index.html new file mode 100644 index 0000000000..a8cd738934 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/menuitem.control/index.html @@ -0,0 +1,21 @@ +--- +title: menuitem.control +slug: Mozilla/Tech/XUL/Property/menuitem.control +translation_of: Archive/Mozilla/XUL/Property/menuitem.control +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menuitem.control">control</a></span></code></dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Returns the enclosing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> that the item is inside, if any, or <code>null</code> if there is no enclosing menu.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/parentcontainer/index.html b/files/zh-cn/mozilla/tech/xul/property/parentcontainer/index.html new file mode 100644 index 0000000000..f8a29d42ae --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/parentcontainer/index.html @@ -0,0 +1,21 @@ +--- +title: parentContainer +slug: Mozilla/Tech/XUL/Property/parentContainer +translation_of: Archive/Mozilla/XUL/Property/parentContainer +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/parentContainer">parentContainer</a></span></code> </dt> + <dd> + Type: + <i> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</i> + </dd> + <dd> + Read only property that returns the containing <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element, or <code>null</code> if there isn't a containing menu.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/selected/index.html b/files/zh-cn/mozilla/tech/xul/property/selected/index.html new file mode 100644 index 0000000000..eee4b31285 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/selected/index.html @@ -0,0 +1,18 @@ +--- +title: selected +slug: Mozilla/Tech/XUL/Property/selected +translation_of: Archive/Mozilla/XUL/Property/selected +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selected">selected</a></span></code><magic name="\"PAGENAME\"/"></magic></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + This property's value is <code>true</code> if this element is selected, or <code>false</code> if it is not. This property is read only.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/selectedindex/index.html b/files/zh-cn/mozilla/tech/xul/property/selectedindex/index.html new file mode 100644 index 0000000000..22d1a4fba1 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/selectedindex/index.html @@ -0,0 +1,21 @@ +--- +title: selectedIndex +slug: Mozilla/Tech/XUL/Property/selectedIndex +translation_of: Archive/Mozilla/XUL/Property/selectedIndex +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Returns the index of the currently selected item. You may select an item by assigning its index to this property. By assigning <code>-1</code> to this property, all items will be deselected.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/selecteditem/index.html b/files/zh-cn/mozilla/tech/xul/property/selecteditem/index.html new file mode 100644 index 0000000000..1583c5f526 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/selecteditem/index.html @@ -0,0 +1,21 @@ +--- +title: selectedItem +slug: Mozilla/Tech/XUL/Property/selectedItem +translation_of: Archive/Mozilla/XUL/Property/selectedItem +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code></dt> + <dd> + Type: + <i> + element</i> + </dd> + <dd> + Holds the currently selected item. If no item is currently selected, this value will be <code>null</code>. You can select an item by setting this value. A select event will be sent to the element when it is changed either via this property, the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> property, or changed by the user.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/selectionstart/index.html b/files/zh-cn/mozilla/tech/xul/property/selectionstart/index.html new file mode 100644 index 0000000000..27ecd267c6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/selectionstart/index.html @@ -0,0 +1,16 @@ +--- +title: selectionStart +slug: Mozilla/Tech/XUL/Property/selectionStart +translation_of: Archive/Mozilla/XUL/Property/selectionStart +--- +<div class="noinclude"><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectionStart">selectionStart</a></span></code></dt> + <dd>类型: <em>integer</em></dd> + <dd>获取或设置字段文本的选定部分的开始。 与<code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectionEnd">selectionEnd</a></span></code> 属性结合使用。 该值指定第一个选定字符的索引。</dd> +</dl> + +<div class="noinclude"> +<p></p> +</div> diff --git a/files/zh-cn/mozilla/tech/xul/property/spinbuttons/index.html b/files/zh-cn/mozilla/tech/xul/property/spinbuttons/index.html new file mode 100644 index 0000000000..aadb3a3a31 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/spinbuttons/index.html @@ -0,0 +1,15 @@ +--- +title: spinButtons +slug: Mozilla/Tech/XUL/Property/spinButtons +translation_of: Archive/Mozilla/XUL/Property/spinButtons +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/spinButtons">spinButtons</a></span></code></dt> + <dd> + 类型:<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spinbuttons" title="spinbuttons">spinbuttons</a></code>元素</dd> + <dd> + 一个只读属性,返回了数字输入框元素(<code>type</code>属性为<code>number的textbox元素</code>)中包含的<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spinbuttons" title="spinbuttons">spinbuttons</a></code>元素(也就是右侧调整数字大小的上下小箭头).</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/tabindex/index.html b/files/zh-cn/mozilla/tech/xul/property/tabindex/index.html new file mode 100644 index 0000000000..5e41049910 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/tabindex/index.html @@ -0,0 +1,21 @@ +--- +title: tabIndex +slug: Mozilla/Tech/XUL/Property/tabIndex +translation_of: Archive/Mozilla/XUL/Property/tabIndex +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/property/textbox.value/index.html b/files/zh-cn/mozilla/tech/xul/property/textbox.value/index.html new file mode 100644 index 0000000000..860ed2fd39 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/textbox.value/index.html @@ -0,0 +1,15 @@ +--- +title: textbox.value +slug: Mozilla/Tech/XUL/Property/textbox.value +translation_of: Archive/Mozilla/XUL/Property/textbox.value +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/textbox.value">value</a></span></code></dt> + <dd> + 类型:字符串</dd> + <dd> + 读取或设置该<code>textbox</code>元素中的文本内容.</dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/property/value/index.html b/files/zh-cn/mozilla/tech/xul/property/value/index.html new file mode 100644 index 0000000000..b56deb5fc4 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/property/value/index.html @@ -0,0 +1,21 @@ +--- +title: value +slug: Mozilla/Tech/XUL/Property/value +translation_of: Archive/Mozilla/XUL/Property/value +--- +<div class="noinclude"> + <span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/zh-CN/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></div> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/radio/index.html b/files/zh-cn/mozilla/tech/xul/radio/index.html new file mode 100644 index 0000000000..ecadeea308 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/radio/index.html @@ -0,0 +1,379 @@ +--- +title: radio +slug: Mozilla/Tech/XUL/radio +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/radio +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>An element that can be turned on and off. Radio buttons are almost always grouped together in groups. Only one radio button within the same <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code> may be selected at a time. The user can switch which radio button is turned on by selecting it with the mouse or keyboard. Other radio buttons in the same group are turned off. A label, specified with the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute may be added beside the radio button.</p> +<p>More information is available in the <a href="cn/XUL_Tutorial/Input_Controls">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-accesskey">accesskey</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-focused">focused</a>, <a href="#a-group">group</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-selected">selected</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessKey">accessKey</a>, <a href="#p-accessibleType">accessibleType</a>, <a href="#p-radio.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-radioGroup">radioGroup</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_radio.png"></div> +<pre><radiogroup> + <radio id="orange" label="Red" accesskey="R"/> + <radio id="violet" label="Green" accesskey="G" selected="true"/> + <radio id="yellow" label="Blue" accesskey="B" disabled="true"/> +</radiogroup> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-accesskey"> + + + + +<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>类型: + <i>character【字符】</i> + </dd> + <dd>本属性允许为控件（元素）设定一个字符作为快捷键，这个字符应该是 <code><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性文本中的一个字符。该字符将会被加下划线以重点强调，平台和主体的变换并不影响这一表现行为。 当用户点击 ALT (在其他平台上具有类似功能的键) 和这个字符对应的按键时， 控件（元素）将立刻被从窗口中的某处激活或/并且获得焦点 <b>。虽说字符不分大小写，但是当label中存在大写字符和小写字符时，快捷键的字符将首先选择与之完全匹配的那一个，如果label中存在两个或更多的与accesskey字符相同的字符，其中的第一个字符将被加下划线。</b></dd> + <dt> *(有些键在监听按键事件时，分别对应event.ctrlKey和event.metaKey。)</dt> +</dl> + +<p> </p> + +<h4 id="Example" name="Example">Example</h4> + +<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div> + +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> + +<h4 id="See_also" name="See_also">See also</h4> + +<p><code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-command"> + +<dl> + <dt> + <code id="a-command"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd> + Type: + <i> + element id</i> + </dd> + <dd> + Set to the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + +<p></p> +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: + <i> + one of the values below</i> + </dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> +</dl> +<ul> + <li><code>start</code>: The text will be cropped on its left side.</li> + <li><code>end</code>: The text will be cropped on its right side.</li> + <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</li> + <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</li> + <li><code>center</code>: The text will be cropped in the middle, showing both the start and end of the text normally.</li> + <li><code>none</code>: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</li> +</ul> + +<p></p> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-focused"> + + +<dl> + <dt><code id="a-focused"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/focused">focused</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>This attribute is <code>true</code> if the element is focused.</dd> +</dl> +</div> <div id="a-group"> + + +<dl> + <dt><code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code></dt> + <dd>Type: <em>string group name</em> </dd> + <dd>Buttons with type="radio" and the same value for their group attribute are put into the same group. Only one button from each group can be checked at a time. If the user selects one the buttons, the others in the group are unchecked.</dd> +</dl> +</div> <div id="a-image"> + +<dl> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + The URL of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> + +<p></p> +</div> <div id="a-label"> + +<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> + Type: <em>string</em></dd> + <dd> + The label that will appear on the element. If this is left out, no text appears.<br> + label 在元素上显示。如果左侧出界，则不显示任何文字。</dd> +</dl> + +<p></p> +</div> <div id="a-selected"> + +<dl> + <dt> + <code id="a-selected"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Indicates whether the element is selected or not. This value is read-only. To change the selection, set either the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> or <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code> property of the containing element.</dd> +</dl> + +<p></p> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: + <i> + character</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-radio.control"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/radio.control">control</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code> element</em></dd> + <dd>Returns the enclosing <code><a href="/en-US/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code> that the <code><a href="/en-US/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code> element is contained within, which may or may not be its direct parent.</dd> +</dl></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-image"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/image">image</a></span></code></dt> + <dd> + Type: + <i> + image URL</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-radioGroup"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/radioGroup">radioGroup</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code> element</em></dd> + <dd>Equivalent to the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/control">control</a></span></code> property.</dd> +</dl></div> <div id="p-selected"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selected">selected</a></span></code><magic name="\"PAGENAME\"/"></magic></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + This property's value is <code>true</code> if this element is selected, or <code>false</code> if it is not. This property is read only.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="cn/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="cn/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a>, <a href="cn/NsIDOMXULLabeledControlElement">nsIDOMXULLabeledControlElement</a></dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/radiogroup/index.html b/files/zh-cn/mozilla/tech/xul/radiogroup/index.html new file mode 100644 index 0000000000..a91c7aa8e0 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/radiogroup/index.html @@ -0,0 +1,275 @@ +--- +title: radiogroup +slug: Mozilla/Tech/XUL/radiogroup +tags: + - radiogroup + - 单选按钮组 +translation_of: Archive/Mozilla/XUL/radiogroup +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> + +<p>一组单选按钮。在单选按钮组内一次只能选择一个单选按钮。<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code> 按钮可以指示单选按钮组或后代的子节点。 如果您想要一个边框或 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code> ，请将Radiogroup放在一个 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code>内。<strong>radiogroup </strong>默认为垂直方向。</p> + +<p>更多信息可以在 <a href="/en/XUL_Tutorial/Input_Controls" title="en/XUL_Tutorial/Input_Controls">XUL 教程</a> 中找到。</p> + +<dl> + <dt>Attributes</dt> + <dd><a href="#a-disabled">disabled</a>, <a href="#a-focused">focused</a>, <a href="#a-preference">preference</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> + +<dl> + <dt>Properties</dt> + <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-disabled">disabled</a>, <a href="#p-focusedItem">focusedItem</a>, <a href="#p-itemCount">itemCount</a>, <a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedItem">selectedItem</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> + +<dl> + <dt>Methods</dt> + <dd><a href="#m-appendItem">appendItem</a>, <a href="#m-checkAdjacentElement">checkAdjacentElement</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-removeItemAt">removeItemAt</a></dd> +</dl> + +<h3 id="Examples" name="Examples">范例</h3> + +<div class="float-right"><img alt="Image:XUL_ref_radios.png" class="internal" src="/@api/deki/files/469/=XUL_ref_radios.png"></div> + +<pre><radiogroup> + <radio id="orange" label="Red"/> + <radio id="violet" label="Green" selected="true"/> + <radio id="yellow" label="Blue"/> +</radiogroup> +</pre> + +<h3 id="Attributes" name="Attributes">Attributes</h3> + +<p> </p><div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-focused"> + + +<dl> + <dt><code id="a-focused"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/focused">focused</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>This attribute is <code>true</code> if the element is focused.</dd> +</dl> +</div> <div id="a-preference"> + + +<dl> + <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd> +</dl> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-value"> + +<dl> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use.</dd> +</dl> + +<p></p> +</div><p></p> + +<h3 id="Properties" name="Properties">Properties</h3> + +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-focusedItem"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/focusedItem">focusedItem</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code> element</em></dd> + <dd>Holds the currently focused item in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code>, which may or may not be the same as the selected item. You can change the focused item by setting this property.</dd> +</dl></div> <div id="p-itemCount"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/itemCount">itemCount</a></span></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>Read only property holding the number of child items.</dd> +</dl> +</div> <div id="p-selectedIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Returns the index of the currently selected item. You may select an item by assigning its index to this property. By assigning <code>-1</code> to this property, all items will be deselected.</dd> +</dl> + +<p></p></div> <div id="p-selectedItem"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedItem">selectedItem</a></span></code></dt> + <dd> + Type: + <i> + element</i> + </dd> + <dd> + Holds the currently selected item. If no item is currently selected, this value will be <code>null</code>. You can select an item by setting this value. A select event will be sent to the element when it is changed either via this property, the <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> property, or changed by the user.</dd> +</dl> + +<p></p></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: + <i> + string</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute.</dd> +</dl> + +<p></p></div><p></p> + +<h3 id="Methods" name="Methods">Methods</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt> + <span id="m-appendItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem( label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Creates a new item and adds it to the end of the existing list of items. You may optionally set a value. The function returns the newly created element.</dd> +</dl> <dl> + <dt><span id="m-checkAdjacentElement"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/checkAdjacentElement">checkAdjacentElement( dir )</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Deselects the currently selected <code><a href="/en-US/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code> button in the group and selects the one adjacent to it. If the argument <var>dir</var> is <code>true</code>, the next radio button is selected. If it is <code>false</code>, the previous radio button is selected.</dd> +</dl> <dl> + <dt><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem( item )</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the zero-based position of the specified item. Items are numbered starting at the first item displayed in the list.</dd> +</dl> <dl> + <dt><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex( index )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>Returns the element that is at the specified index.</dd> +</dl> <dl> + <dt> + <span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt( index, label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + This method creates a new item and inserts it at the specified position. You may optionally set a value. The new item element is returned.</dd> +</dl> <dl> + <dt> + <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt( index )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Removes the child item in the element at the specified index. The method returns the removed item.</dd> +</dl><p></p> + +<h3 id="Related" name="Related">Related</h3> + +<dl> + <dt>Interfaces</dt> + <dd><code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULSelectControlElement" title="">nsIDOMXULSelectControlElement</a></code></dd> +</dl> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/script/index.html b/files/zh-cn/mozilla/tech/xul/script/index.html new file mode 100644 index 0000000000..6006a33298 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/script/index.html @@ -0,0 +1,117 @@ +--- +title: script +slug: Mozilla/Tech/XUL/script +translation_of: Archive/Mozilla/XUL/script +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>Much like the HTML <code>script</code> element, this is used to declare a script to be used by the XUL window. You should usually put scripts in a separate file pointed to by the <code id="a-src"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute, but you may also place the script inline inside the opening and closing <code>script</code> tags.</p> +<p>More information is available in the <a href="/en/XUL_Tutorial/Adding_Event_Handlers" title="en/XUL_Tutorial/Adding_Event_Handlers">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-script.src">src</a>, <a href="#a-script.type">type</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<pre> <script src="test.js"/> + <script src="http://example.com/js/test.js"/> + <script> + function foo(){ + // code + } + </script> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p></p><div id="a-script.src"> + + +<dl> + <dt><code id="a-script.src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/script.src">src</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>The URI of the script.</dd> +</dl> +</div> <div id="a-script.type"> + + +<dl> + <dt><code id="a-script.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/script.type">type</a></code></dt> + <dd>Type: <em>language content type</em></dd> + <dd>The language of the script. Usually, you would set this to <code>application/javascript</code>.<br> + <br> + <strong>Note: </strong>If the JavaScript file is in chrome://, setting this attribute to <code>application/javascript</code> will always use the latest available JavaScript version. If you omit this attribute, the default (and older) JavaScript version is used (like you get when including a JavaScript file from web content without specifying a version number).</dd> +</dl> +</div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/statusbar/index.html b/files/zh-cn/mozilla/tech/xul/statusbar/index.html new file mode 100644 index 0000000000..dec688952e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/statusbar/index.html @@ -0,0 +1,131 @@ +--- +title: statusbar +slug: Mozilla/Tech/XUL/statusbar +translation_of: Archive/Mozilla/XUL/statusbar +--- +<p></p><div class="blockIndicator deprecated deprecatedHeader"> + <p><strong><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> 已废弃</strong><br>该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。</p> + </div><p></p> +<div class="noinclude"> + 我建议使用<a href="/en-US/docs/The_add-on_bar" title="/en-US/docs/The_add-on_bar">附加组件栏</a>来代替.</div> +<div class="noinclude"> + </div> +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<div class="noinclude"> + </div> +<p>用来创建状态栏的元素,通常位于窗口底部.可以包含多个<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/statusbarpanel" title="statusbarpanel">statusbarpanel</a></code>元素.</p> +<dl> + <dt> + 属性</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a></dd> +</dl> +<h3 id="Examples" name="Examples">示例</h3> +<pre><statusbar> + <statusbarpanel label="Left panel"/> + <spacer flex="1"/> + <progressmeter mode="determined" value="82"/> + <statusbarpanel label="Right panel"/> +</statusbar> +</pre> +<p><img alt="Image:XUL_ref_statusbar.png" class="internal" src="/@api/deki/files/470/=XUL_ref_statusbar.png"></p> +<h3 id="Attributes" name="Attributes">XUL属性(Attribute)</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> +<h3 id="Properties" name="Properties">DOM属性(Propertie)</h3> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">方法</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">相关</h3> +<dl> + <dt> + 元素</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/statusbarpanel" title="statusbarpanel">statusbarpanel</a></code></dd> +</dl> +<dl> + <dt> + 接口</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code></dd> +</dl> diff --git a/files/zh-cn/mozilla/tech/xul/style/index.html b/files/zh-cn/mozilla/tech/xul/style/index.html new file mode 100644 index 0000000000..173c741e34 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/style/index.html @@ -0,0 +1,6 @@ +--- +title: Style classes +slug: Mozilla/Tech/XUL/Style +translation_of: Archive/Mozilla/XUL/Style +--- +<p>This page was auto-generated because a user created a sub-page to this page.</p> diff --git a/files/zh-cn/mozilla/tech/xul/style/menuitem-iconic/index.html b/files/zh-cn/mozilla/tech/xul/style/menuitem-iconic/index.html new file mode 100644 index 0000000000..8b41b0497e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/style/menuitem-iconic/index.html @@ -0,0 +1,16 @@ +--- +title: menuitem-iconic +slug: Mozilla/Tech/XUL/Style/menuitem-iconic +translation_of: Archive/Mozilla/XUL/Style/menuitem-iconic +--- +<div class="noinclude"> + <a href="/zh-CN/docs/XUL_Reference" title="« XUL Reference">« XUL Reference</a></div> +<dl> + <dt> + <code><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Style/menuitem-iconic">menuitem-iconic</a></code></dt> + <dd> + Use this class to have an image appear on the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>. Specify the image using the <code id="a-image"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/style/menuitem-non-iconic/index.html b/files/zh-cn/mozilla/tech/xul/style/menuitem-non-iconic/index.html new file mode 100644 index 0000000000..c9873b5c31 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/style/menuitem-non-iconic/index.html @@ -0,0 +1,16 @@ +--- +title: menuitem-non-iconic +slug: Mozilla/Tech/XUL/Style/menuitem-non-iconic +translation_of: Archive/Mozilla/XUL/Style/menuitem-non-iconic +--- +<div class="noinclude"> + <a href="/zh-CN/docs/XUL_Reference" title="« XUL Reference">« XUL Reference</a></div> +<dl> + <dt> + <code><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Style/menuitem-non-iconic">menuitem-non-iconic</a></code></dt> + <dd> + Normally, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>s have a margin to the left for an image or checkmark. This class may be used to remove this margin so that the menuitem appears on the left edge of the menupopup.</dd> +</dl> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/tabbox/index.html b/files/zh-cn/mozilla/tech/xul/tabbox/index.html new file mode 100644 index 0000000000..c0decfea4f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tabbox/index.html @@ -0,0 +1,156 @@ +--- +title: tabbox +slug: Mozilla/Tech/XUL/tabbox +translation_of: Archive/Mozilla/XUL/tabbox +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>A container used to display a set of tabbed pages of elements. A row of tabs is displayed at the top of tabbox which may be used to switch between each page. The <code>tabbox</code> should contain two children, the first a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> element which contains the tabs and the second a <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code> element which contains the contents of the pages.</p> +<p>More information is available in the <a href="/en/XUL_Tutorial/Tabboxes" title="en/XUL_Tutorial/Tabboxes">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-eventnode">eventnode</a>, <a href="#a-handleCtrlPageUpDown">handleCtrlPageUpDown</a>, <a href="#a-handleCtrlTab">handleCtrlTab</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-eventNode">eventNode</a>, <a href="#p-handleCtrlPageUpDown">handleCtrlPageUpDown</a>, <a href="#p-handleCtrlTab">handleCtrlTab</a>, <a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedPanel">selectedPanel</a>, <a href="#p-selectedTab">selectedTab</a>, <a href="#p-tabbox.tabs">tabs</a>, <a href="#p-tabpanels">tabpanels</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<pre><tabbox id="myTabList" selectedIndex="2"> + <tabs> + <tab label="A First tab"/> + <tab label="Second tab"/> + <tab label="Another tab"/> + <tab label="Last tab"/> + </tabs> + <tabpanels> + <tabpanel><!-- tabpanel First elements go here --></tabpanel> + <tabpanel><!-- tabpanel Second elements go here --></tabpanel> + <tabpanel><button label="Click me"/></tabpanel> + <tabpanel><!-- tabpanel Fourth elements go here --></tabpanel> + </tabpanels> +</tabbox> +</pre> +<p><img alt="Image:XUL_REF_tabboxes.gif" class="internal" src="/@api/deki/files/434/=XUL_REF_tabboxes.gif"></p> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-eventnode"> + + +<dl> + <dt><code id="a-eventnode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/eventnode">eventnode</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Indicates where keyboard navigation events are listened to. If this attribute is not specified, events are listened to from the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>. Thus, if this attribute is not used, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> or an element inside it must have the focus for the keyboard navigation to apply.</dd> + <dd> + <dl> + <dt><code>parent</code></dt> + <dd>Keyboard navigation is captured at the parent of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>.</dd> + <dt><code>window</code></dt> + <dd>Keyboard navigation is captured at the window level. Tab navigation will occur as long as any element in the window is focused.</dd> + <dt><code>document</code></dt> + <dd>Keyboard navigation is captured at the document level. Tab navigation will occur as long as any element in the document is focused.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-handleCtrlPageUpDown"> + +</div> <div id="a-handleCtrlTab"> + + +<dl> + <dt><code id="a-handleCtrlTab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If set to <code>true</code> or omitted, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> will switch to the next tab when the Control and Tab keys are pressed. If the Shift key is also held down, the previous tab will be displayed. If this attribute is set to <code>false</code>, these keys do not navigate between tabs.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-eventNode"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/eventNode">eventNode</a></span></code></dt> + <dd>Type: <em>EventTarget</em></dd> + <dd>Indicates the node where keyboard navigation events listener is set up. The initial value for this property is determined by the value of the <code id="a-eventnode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/eventnode">eventnode</a></code> attribute.</dd> +</dl></div> <div id="p-handleCtrlPageUpDown"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/handleCtrlPageUpDown">handleCtrlPageUpDown</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-handleCtrlPageUpDown"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a></code> attribute.</dd> +</dl></div> <div id="p-handleCtrlTab"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/handleCtrlTab">handleCtrlTab</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-handleCtrlTab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></code> attibute.</dd> +</dl></div> <div id="p-selectedIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Returns the index of the currently selected item. You may select an item by assigning its index to this property. By assigning <code>-1</code> to this property, all items will be deselected.</dd> +</dl> + +<p></p></div> <div id="p-selectedPanel"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectedPanel">selectedPanel</a></span></code></dt> + <dd>Type: <em>element</em></dd> + <dd>Holds a reference to the currently selected panel within a <code><tabbox></code> element. Assigning a value to this property will modify the selected panel. A select event will be sent when the selected panel is changed.</dd> +</dl></div> <div id="p-selectedTab"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectedTab">selectedTab</a></span></code></dt> + <dd>Type: <em>tab element</em></dd> + <dd>A reference to the currently selected tab, which will always be one of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> elements in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> element. Assign a value to this property to modify the currently selected tab.</dd> +</dl></div> <div id="p-tabbox.tabs"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/tabbox.tabs">tabs</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> element</em></dd> + <dd>The <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> element contained within the tabbox.</dd> +</dl></div> <div id="p-tabpanels"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/tabpanels">tabpanels</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code> element</em></dd> + <dd>The <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code> element contained within the tabbox.</dd> +</dl></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code>.</dd> +</dl> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/template_guide/index.html b/files/zh-cn/mozilla/tech/xul/template_guide/index.html new file mode 100644 index 0000000000..9a6ac79352 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/template_guide/index.html @@ -0,0 +1,68 @@ +--- +title: Template Guide +slug: Mozilla/Tech/XUL/Template_Guide +translation_of: Archive/Mozilla/XUL/Template_Guide +--- +<p>Basics of XUL Templates</p> +<ul> + <li><a href="/en/XUL/Template_Guide/Introduction" title="en/XUL/Template_Guide/Introduction">Introduction</a></li> + <li><a href="/en/XUL/Template_Guide/Rule_Compilation" title="en/XUL/Template_Guide/Rule_Compilation">Rule Compilation</a></li> +</ul> +<h2 id="RDF_Template_Syntax" name="RDF_Template_Syntax">RDF Template Syntax</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/Result_Generation" title="en/XUL/Template_Guide/Result_Generation">Result Generation</a></li> + <li><a href="/en/XUL/Template_Guide/RDF_Query_Syntax" title="en/XUL/Template_Guide/RDF_Query_Syntax">RDF Query Syntax</a></li> + <li><a href="/en/XUL/Template_Guide/Actions" title="en/XUL/Template_Guide/Actions">Actions</a></li> + <li><a href="/en/XUL/Template_Guide/Recursive_Generation" title="en/XUL/Template_Guide/Recursive_Generation">Recursive Generation</a></li> + <li><a href="/en/XUL/Template_Guide/Simple_Example" title="en/XUL/Template_Guide/Simple_Example">Simple Example</a></li> + <li><a href="/en/XUL/Template_Guide/Bindings" title="en/XUL/Template_Guide/Bindings">Bindings</a></li> + <li><a href="/en/XUL/Template_Guide/Additional_Navigation" title="en/XUL/Template_Guide/Additional_Navigation">Additional Navigation</a></li> + <li><a href="/en/XUL/Template_Guide/Filtering" title="en/XUL/Template_Guide/Filtering">Filtering</a></li> + <li><a href="/en/XUL/Template_Guide/Static_Content" title="en/XUL/Template_Guide/Static_Content">Static Content</a></li> + <li><a href="/en/XUL/Template_Guide/Simple_Query_Syntax" title="en/XUL/Template_Guide/Simple_Query_Syntax">Simple Query Syntax</a></li> + <li><a href="/en/XUL/Template_Guide/Containment_Properties" title="en/XUL/Template_Guide/Containment_Properties">Containment Properties</a></li> +</ul> +<h2 id="XML_Template_Syntax" name="XML_Template_Syntax">XML Template Syntax</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/XML_Templates" title="en/XUL/Template_Guide/XML_Templates">XML Templates</a></li> + <li><a href="/en/XUL/Template_Guide/XML_Assignments" title="en/XUL/Template_Guide/XML_Assignments">XML Assignments</a></li> +</ul> +<h2 id="SQL_Template_Syntax" name="SQL_Template_Syntax">SQL Template Syntax</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/SQLite_Templates" title="en/XUL/Template_Guide/SQLite_Templates">SQLite Templates</a></li> +</ul> +<h2 id="Common_Template_Syntax" name="Common_Template_Syntax">Common Template Syntax</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/Attribute_Substitution" title="en/XUL/Template_Guide/Attribute_Substitution">Attribute Substitution</a></li> + <li><a href="/en/XUL/Template_Guide/Multiple_Rules" title="en/XUL/Template_Guide/Multiple_Rules">Multiple Rules</a></li> + <li><a href="/en/XUL/Template_Guide/Using_Recursive_Templates" title="en/XUL/Template_Guide/Using_Recursive_Templates">Using Recursive Templates</a></li> + <li><a href="/en/XUL/Template_Guide/Building_Menus_With_Templates" title="en/XUL/Template_Guide/Building_Menus_With_Templates">Building Menus With Templates</a></li> + <li><a href="/en/XUL/Template_Guide/Special_Condition_Tests" title="en/XUL/Template_Guide/Special_Condition_Tests">Special Condition Tests</a></li> + <li><a href="/en/XUL/Template_Guide/Multiple_Queries" title="en/XUL/Template_Guide/Multiple_Queries">Multiple Queries</a></li> + <li><a href="/en/XUL/Template_Guide/Using_Multiple_Queries_to_Generate_More_Results" title="en/XUL/Template_Guide/Using_Multiple_Queries_to_Generate_More_Results">Using Multiple Queries to Generate More Results</a></li> +</ul> +<h2 id="Building_Trees_with_Templates" name="Building_Trees_with_Templates">Building Trees with Templates</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/Building_Trees" title="en/XUL/Template_Guide/Building_Trees">Building Trees</a></li> + <li><a href="/en/XUL/Template_Guide/Building_Hierarchical_Trees" title="en/XUL/Template_Guide/Building_Hierarchical_Trees">Building Hierarchical Trees</a></li> +</ul> +<h2 id="Template_Modifications" name="Template_Modifications">Template Modifications</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/Template_Builder_Interface" title="en/XUL/Template_Guide/Template_Builder_Interface">Template Builder Interface</a></li> + <li><a href="/en/XUL/Template_Guide/Template_and_Tree_Listeners" title="en/XUL/Template_Guide/Template_and_Tree_Listeners">Template and Tree Listeners</a></li> + <li><a href="/en/XUL/Template_Guide/RDF_Modifications" title="en/XUL/Template_Guide/RDF_Modifications">RDF Modifications</a></li> +</ul> +<h2 id="Additional_Topics" name="Additional_Topics">Additional Topics</h2> +<ul> + <li><a href="/en/XUL/Template_Guide/Sorting_Results" title="en/XUL/Template_Guide/Sorting_Results">Sorting Results</a></li> + <li><a href="/en/XUL/Template_Guide/Additional_Template_Attributes" title="en/XUL/Template_Guide/Additional_Template_Attributes">Additional Template Attributes</a></li> + <li><a href="/en/XUL/Template_Guide/Template_Logging" title="en/XUL/Template_Guide/Template_Logging">Template Logging</a></li> + <li><a href="/en/XUL/Template_Guide/Namespaces" title="en/XUL/Template Guide/Namespaces">XML Namespaces</a></li> +</ul> +<h2 id="Alternative_Approaches" name="Alternative_Approaches">Alternative Approaches</h2> +<ul> + <li><a href="/en/JavaScript_templates" title="en/JavaScript_templates">JavaScript templates</a></li> + <li><a class="link-https" href="https://github.com/laurentj/XulJsDatasource" title="https://github.com/laurentj/XulJsDatasource">XulJsDatasource</a>: a component for extensions, which bring a "JavaScript Template syntax". It allows to use JavaScript objects as a data source for XUL templates.</li> +</ul> +<p><span class="comment">Interwiki Language Links</span></p> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/textbox/index.html b/files/zh-cn/mozilla/tech/xul/textbox/index.html new file mode 100644 index 0000000000..4d032ca259 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/textbox/index.html @@ -0,0 +1,653 @@ +--- +title: textbox +slug: Mozilla/Tech/XUL/textbox +translation_of: Archive/Mozilla/XUL/textbox +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p>An input field where the user can enter text. It is similar to the HTML <code>input</code> element. Only one line of text is displayed by default. The <code id="a-multiline"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code> attribute can be specified to display a field with multiple rows.</p> +<p>More information is available in the <a href="/en/XUL_Tutorial/Input_Controls" title="en/XUL_Tutorial/Input_Controls">XUL tutorial</a>.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-cols">cols</a>, <a href="#a-decimalplaces">decimalplaces</a>, <a href="#a-disabled">disabled</a>, , <a href="#a-emptytext">emptytext</a>, <a href="#a-hidespinbuttons">hidespinbuttons</a>, <a href="#a-increment">increment</a>, <a href="#a-textbox.label">label</a>, <a href="#a-max">max</a>, <a href="#a-maxlength">maxlength</a>, <a href="#a-min">min</a>, <a href="#a-multiline">multiline</a>, <a href="#a-newlines">newlines</a>, <a href="#a-textbox.onchange">onchange</a>, <a href="#a-oninput">oninput</a>, <a href="#a-placeholder">placeholder</a>, <a href="#a-preference">preference</a>, <a href="#a-readonly">readonly</a>, <a href="#a-rows">rows</a>, <a href="#a-searchbutton">searchbutton</a>, <a href="#a-size">size</a>, <a href="#a-spellcheck">spellcheck</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-timeout">timeout</a>, <a href="#a-textbox.type">type</a>, <a href="#a-textbox.value">value</a>, <a href="#a-wrap">wrap</a>, <a href="#a-wraparound">wraparound</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-clickSelectsAll">clickSelectsAll</a>, <a href="#p-decimalPlaces">decimalPlaces</a>, <a href="#p-decimalSymbol">decimalSymbol</a>, <a href="#p-defaultValue">defaultValue</a>, <a href="#p-disabled">disabled</a>, <a href="#p-editor">editor</a>, <a href="#p-emptyText">emptyText</a>, <a href="#p-increment">increment</a>, <a href="#p-inputField">inputField</a>, <a href="#p-textbox.label">label</a>, <a href="#p-max">max</a>, <a href="#p-maxLength">maxLength</a>, <a href="#p-min">min</a>, <a href="#p-placeholder">placeholder</a>, <a href="#p-readOnly">readOnly</a>, <a href="#p-searchButton">searchButton</a>, <a href="#p-selectionEnd">selectionEnd</a>, <a href="#p-selectionStart">selectionStart</a>, <a href="#p-size">size</a>, <a href="#p-spinButtons">spinButtons</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-textLength">textLength</a>, <a href="#p-timeout">timeout</a>, <a href="#p-type">type</a>, <a href="#p-textbox.value">value</a>, <a href="#p-valueNumber">valueNumber</a>, <a href="#p-wrapAround">wrapAround</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-decrease">decrease</a>, <a href="#m-increase">increase</a>, <a href="#m-reset">reset</a>, <a href="#m-select">select</a>, <a href="#m-setSelectionRange">setSelectionRange</a></dd> +</dl> +<dl> + <dt> + Style classes</dt> + <dd> + <a href="#s-plain">plain</a></dd> +</dl> +<h3 id="Examples" name="Examples">Examples</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_textbox.png" class="internal" src="/@api/deki/files/471/=XUL_ref_textbox.png"></div> +<pre><vbox> +<label control="your-name" value="Enter your name:"/> +<textbox id="your-name" value="John"/> +</vbox> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-cols"> + + +<dl> + <dt><code id="a-cols"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/cols">cols</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>For multiline textboxes, the number of columns to display.</dd> +</dl> +</div> <div id="a-decimalplaces"> + + +<dl> + <dt><code id="a-decimalplaces"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>The number of decimal places to display. The default is 0, which doesn't show any decimal places. The value <code>Infinity</code> may be used if you want no limit on the number of decimal places. Note that decimal numbers are stored as floats.</dd> +</dl> +</div> <div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-emptytext"> + + +<dl> + <dt><code id="a-emptytext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code> <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Deprecated since Gecko 2</span></dt> + <dd>Type: <em>string</em></dd> + <dd>A string that appears in the textbox when it has no value. This is superseded by the <code id="a-placeholder"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> attribute in Gecko 2.0. The old name is retained for compatibility, but you should update your code.</dd> +</dl> +</div> <div id="a-hidespinbuttons"> + + +<dl> + <dt><code id="a-hidespinbuttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the number box does not have arrow buttons next to it to allow the user to adjust the value. The value may still be adjusted with the keyboard. The default value is <code>false</code>.</dd> +</dl> +</div> <div id="a-increment"> + +<dl> + <dt> + <code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code></dt> + <dd> + 类型:整数</dd> + <dd> + 拖动刻度条控件(<code>scale</code>元素)中的拉杆,点击滚动条控件(<code>scrollbar</code>元素)中的箭头(拖动拉杆也可以),点击数字输入框(<code>type</code>属性为<code>number</code>的<code>textbox</code>元素)中的箭头时,其<code id="a-curpos"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code>属性或者value属性每次改变的数字值,默认值为1.</dd> +</dl> +</div> <div id="a-textbox.label"> + + +<dl> + <dt><code id="a-textbox.label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.label">label</a></code> </dt> + <dd>Type: <em>string</em></dd> + <dd>If present and not empty, this will be exposed to screen readers through the <a href="/en/XUL/Property/textbox.label" title="en/XUL/Property/textbox.label">label</a> property.</dd> +</dl> +</div> <div id="a-max"> + +<dl> + <dd> + 类型:整数</dd> + <dd> + 设置刻度条控件(scale元素)或者数字输入框控件(type属性为number的textbox元素)中能输入的最大数字.刻度条控件中,该属性的默认值为100,数字输入框中,该属性的默认值为无穷大.</dd> +</dl> + +<p> </p> +</div> <div id="a-maxlength"> + + +<dl> + <dt><code id="a-maxlength"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxlength">maxlength</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>The maximum number of characters that the textbox allows to be entered.</dd> +</dl> +</div> <div id="a-min"> + +<dl> + <dt> + <code id="a-min"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code></dt> + <dd> + 类型:整数</dd> + <dd> + 该控件可以有的最小的整数值,默认值为0.</dd> +</dl> +<p> </p> +</div> <div id="a-multiline"> + + +<dl> + <dt><code id="a-multiline"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the textbox displays multiple lines. If the user presses Enter, a new line is started. If <code>false</code>, the textbox only allows entry of one line.</dd> +</dl> +</div> <div id="a-newlines"> + + +<dl> + <dt><code id="a-newlines"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/newlines">newlines</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>How the text box handles pastes with newlines in them.</dd> + <dd>Possible values: + <dl> + <dt><code>pasteintact</code></dt> + <dd>Paste newlines unchanged</dd> + <dt><code>pastetofirst</code></dt> + <dd>Paste text up to the first newline, dropping the rest of the text</dd> + <dt><code>replacewithcommas</code></dt> + <dd>Pastes the text with the newlines replaced with commas</dd> + <dt><code>replacewithspaces</code></dt> + <dd>Pastes the text with newlines replaced with spaces</dd> + <dt><code>strip</code></dt> + <dd>Pastes the text with the newlines removed</dd> + <dt><code>stripsurroundingwhitespace</code></dt> + <dd>Pastes the text with newlines and adjacent whitespace removed</dd> + </dl> + </dd> +</dl> +</div> <div id="a-textbox.onchange"> + + +<dl> + <dt><code id="a-textbox.onchange"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.onchange">onchange</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.</dd> +</dl> + + +</div> <div id="a-oninput"> + + +<dl> + <dt><code id="a-oninput"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/oninput">oninput</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent when a user enters text in a <code><a href="/en-US/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code>. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.</dd> +</dl> + + +</div> <div id="a-placeholder"> + + +<dl> + <dt><code id="a-placeholder"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> </dt> + <dd>Type: <em>string</em></dd> + <dd>A string that appears in the textbox when it has no value.</dd> +</dl> +</div> <div id="a-preference"> + + +<dl> + <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd> +</dl> +</div> <div id="a-readonly"> + + +<dl> + <dt><code id="a-readonly"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/readonly">readonly</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If set to <code>true</code>, then the user cannot change the value of the element. However, the value may still be modified by a script.</dd> +</dl> +</div> <div id="a-rows"> + +<dl> + <dt> + <code id="a-rows"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + The number of rows to display in the element. If the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. To get the actual number of rows in the element, use the <span id="m-getRowCount"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getRowCount">getRowCount</a></code></span> method.</dd> +</dl> +</div> <div id="a-searchbutton"> + + +<dl> + <dt><code id="a-searchbutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/searchbutton">searchbutton</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the search field will only fire a command event when the user presses the search button or presses the <code>Enter</code> key. Otherwise, the command event is fired whenever the user modifies the value. This attribute only applies to textboxes with the type <code>search</code>.</dd> +</dl> +</div><div id="a-size"> + + +<dl> + <dt><code id="a-size"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/size">size</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>The number of characters that can be displayed in the textbox.</dd> +</dl> +</div> <div id="a-spellcheck"> + + +<dl> + <dt><code id="a-spellcheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/spellcheck">spellcheck</a></code> </dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, spell checking is enabled by default for the text box; if <code>false</code>, spell checking is disabled by default.</dd> + <dd>If not specified, this defaults to <code>false</code></dd> +</dl> + +<p><span style="font-family: Georgia,Times,'Times New Roman',serif; font-size: 1.628em; font-style: inherit; font-variant: inherit; line-height: 1.1em;">The HTML</span></p> + +<article style="margin: 0px; padding: 0px; border: 0px; font-family: 'Open Sans', Arial, sans-serif; line-height: 16px; font-size: 16px; vertical-align: baseline; position: relative;"> +<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.6em; vertical-align: baseline;">The <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">spellcheck</code> attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element):</p> + +<pre class="html language-html" style="margin-top: 0.5em; margin-bottom: 0.5em; padding: 1em; border: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-style: inherit; font-variant: inherit; line-height: 1.6em; font-size: 0.8em; vertical-align: baseline; background-color: rgb(245, 242, 240); color: black; text-shadow: white 0px 1px; direction: ltr;"><code class="language-html" style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-style: inherit; font-variant: inherit; line-height: inherit; font-size: 13px; vertical-align: baseline; text-shadow: white 0px 1px; direction: ltr;"><span class="comment token" style="border: 0px; color: #708090; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><!-- spellcheck everything! --></span> +<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>input</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>text<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>br</span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span> +<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>textarea</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span>textarea</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span> +<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>div</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">contenteditable</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span>I am some content<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span>div</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span> + +<span class="comment token" style="border: 0px; color: #708090; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><!-- spellcheck nothing! --></span> +<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>input</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>text<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>false<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>br</span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></span> +<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>textarea</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>false<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span>textarea</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span> +<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span>div</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">contenteditable</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>false<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span>I am some content<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span>div</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span></code></pre> + +<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.6em; vertical-align: baseline;">You can use spellcheck on <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">INPUT</code>, <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">TEXTAREA</code>, and <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">contenteditable</code> elements. The<code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">spellcheck</code> attribute works well paired with the <font face="inherit"><span style="font-style: inherit; font-variant: inherit; line-height: inherit;">autocomplete, autocapitalize, and autocorrect attributes</span></font> too!</p> + +<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.6em; vertical-align: baseline;">Added from David Walsh's article on <a href="http://davidwalsh.name/spellcheck">Spell Check</a>.</p> +</article> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-timeout"> + + +<dl> + <dt><code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>For autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. The default is 50 milliseconds. For search textboxes, the number of milliseconds before the timer fires a command event. The default is 500 milliseconds. For timed textboxes, the number of milliseconds before the timer fires a command event. There is no default. The timer starts after the user types a character. If the user types another character, the timer resets.</dd> +</dl> +</div> <div id="a-textbox.type"> + + +<dl> + <dt><code id="a-textbox.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.type">type</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>You can set the type attribute to one of the values below for a more specialized type of textbox. Don't set the type if you wish to use a regular textbox.</dd> + <dd> + <dl> + <dt><code>autocomplete</code></dt> + <dd>A textbox that supports autocomplete. For more information about autocomplete textboxes, see the autocomplete documentation (<a href="/En/XUL/Textbox_(XPFE_autocomplete)" title="En/XUL/Textbox (XPFE autocomplete)">XPFE</a> [Thunderbird/SeaMonkey]) (<a href="/En/XUL/Textbox_(Toolkit_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">Firefox</a>)</dd> + <dt><code>number</code></dt> + <dd> A textbox that only allows the user to enter numbers. In addition, arrow buttons appear next to the textbox to let the user step through values. There are several attributes that allow the number textbox to be configured, including <code id="a-decimalplaces"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code>, <code id="a-min"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>, <code id="a-max"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>, <code id="a-increment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>, <code id="a-wraparound"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wraparound">wraparound</a></code>, <code id="a-hidespinbuttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></code>, and <code id="a-textbox.value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.value">textbox.value</a></code>.</dd> + <dt><code>password</code></dt> + <dd>A textbox that hides what is typed, used for entering passwords.</dd> + <dt><code>search</code></dt> + <dd> A textbox intended for searching. The command event will fire as the user modifies the value. A listener for the command event should update search results. If the <code id="a-searchbutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/searchbutton">searchbutton</a></code> attribute is set to <code>true</code>, the command event is only fired if the user presses the search button or presses the <code>Enter </code>key. You may specify grey text to appear when the search box is empty using the <code id="a-emptytext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code> attribute, and a timeout may be set for the command event using the <code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code> attribute (defaults to 500).</dd> + <dt><code>timed</code></dt> + <dd><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> This textbox will fire a command event after the user types characters and a certain time has passed. The delay is set with the <code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code> attribute. The command event will fire if the user presses the <code>Enter </code>key. The <code>timed</code> type is deprecated in Gecko 1.9.1 and the <code>search</code> textbox may be used instead.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-textbox.value"> + + +<dl> + <dt><code id="a-textbox.value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.value">value</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The default value entered in a textbox. The attribute only holds the default value and is never modified when the user enters text. To get the updated value, use the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/value">value</a></span></code> property. For number boxes, the default is 0 or the minimum value returned by the <code>min</code> property, whichever is higher.</dd> +</dl> + + +</div> <div id="a-wrap"> + + +<dl> + <dt><code id="a-wrap"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wrap">wrap</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Set this attribute to the value <code>off</code> to disable word wrapping in the textbox. If this attribute is not specified, word wrapping is enabled.</dd> +</dl> +</div> <div id="a-wraparound"> + + +<dl> + <dt><code id="a-wraparound"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wraparound">wraparound</a></code> </dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the value of the number box will wrap around when the maximum or minimum value is exceeded. The minimum and maximum values must both not be infinity.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-clickSelectsAll"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/clickSelectsAll">clickSelectsAll</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + If set to <code>true</code>, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged.</dd> +</dl></div> <div id="p-decimalPlaces"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/decimalPlaces">decimalPlaces</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + Gets and sets the value of the <code id="a-decimalplaces"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code> attribute.</dd> +</dl></div> <div id="p-decimalSymbol"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/decimalSymbol">decimalSymbol</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The character used for the decimal place indicator. The default value is a period (.)</dd> +</dl></div> <div id="p-defaultValue"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/defaultValue">defaultValue</a></span></code> </dt> + <dd> + 类型: 字符串</dd> + <dd> + 获取或设置一个<code>textbox</code>元素中显示的默认值.</dd> +</dl></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-editor"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/editor">editor</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditor" title="">nsIEditor</a></code></em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditor" title="">nsIEditor</a></code> for editable text. This property is read only.</dd> +</dl></div> <div id="p-emptyText"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/emptyText">emptyText</a></span></code> <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Deprecated since Gecko 2</span></dt> + <dd>Type: <em>string</em></dd> + <dd>Gets and sets a string that appears in the textbox when it has no value. This is superseded by the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/placeholder">placeholder</a></span></code> property in Gecko 2.0. The old name is retained for compatibility, but you should update your code.</dd> +</dl></div> <div id="p-increment"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/increment">increment</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + Gets and sets the value of the <code id="a-increment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> attribute.</dd> +</dl></div> <div id="p-inputField"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/inputField">inputField</a></span></code></dt> + <dd>Type: <em>textbox element</em></dd> + <dd>In Mozilla, the XUL textbox is implemented as a wrapper around an HTML input element. This read only property holds a reference to this inner input element.</dd> +</dl></div> <div id="p-textbox.label"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/textbox.label">label</a></span></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Sets the <code id="a-textbox.label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.label">label</a></code> attribute. Gets the <code id="a-textbox.label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.label">label</a></code> attribute if it is present and not empty. Otherwise it returns the <code id="a-label.value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label.value">value</a></code> of the associated <code><a href="/en-US/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> element, if applicable. Otherwise it returns the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/placeholder">placeholder</a></span></code> or <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/emptyText">emptyText</a></span></code> property. The getter is mostly useful for screen readers. + <div class="blockIndicator note"> + <p><strong>Note:</strong> Prior to Firefox 3, and always in Thunderbird and SeaMonkey, the label property of an autocomplete textbox returns its value, for compatibility with the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> element.</p> + </div> + </dd> +</dl></div> <div id="p-max"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/max">max</a></span></code></dt> + <dd> + 类型:整数</dd> + <dd> + 获取或设置<code id="a-max"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>特性(attribute)的值.</dd> +</dl></div> <div id="p-maxLength"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/maxLength">maxLength</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>The maximum number of characters that the textbox allows to be entered.</dd> +</dl></div> <div id="p-min"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/min">min</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + Gets and sets the value of the <code id="a-min"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> attribute.</dd> +</dl></div> <div id="p-placeholder"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/placeholder">placeholder</a></span></code> </dt> + <dd>Type: <em>string</em></dd> + <dd>Gets and sets a string that appears in the textbox when it has no value.</dd> +</dl></div> <div id="p-readOnly"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/readOnly">readOnly</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + If set to <code>true</code>, then the user cannot modify the value of the element.</dd> +</dl></div> <div id="p-searchButton"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/searchButton">searchButton</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-searchbutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/searchbutton">searchbutton</a></code> attribute.</dd> +</dl></div> <div id="p-selectionEnd"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectionEnd">selectionEnd</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Get or set the end of the selected portion of the field's text. Use in conjuction with the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectionStart">selectionStart</a></span></code> property. The value specifies the index of the character after the selection. If this value is equal to the value of the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectionStart">selectionStart</a></span></code> property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox.</dd> +</dl></div> <div id="p-selectionStart"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectionStart">selectionStart</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Get or set the beginning of the selected portion of the field's text. Use in conjuction with the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selectionEnd">selectionEnd</a></span></code> property. The value specifies the index of the first selected character.</dd> +</dl></div> <div id="p-size"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/size">size</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Gets and sets the value of the <code id="a-size"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/size">size</a></code> attribute.</dd> +</dl></div> <div id="p-spinButtons"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/spinButtons">spinButtons</a></span></code></dt> + <dd> + 类型:<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spinbuttons" title="spinbuttons">spinbuttons</a></code>元素</dd> + <dd> + 一个只读属性,返回了数字输入框元素(<code>type</code>属性为<code>number的textbox元素</code>)中包含的<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/spinbuttons" title="spinbuttons">spinbuttons</a></code>元素(也就是右侧调整数字大小的上下小箭头).</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-textLength"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/textLength">textLength</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Holds the length of the text entered in the textbox. This property is read-only.</dd> +</dl></div> <div id="p-timeout"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/timeout">timeout</a></span></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>Gets and sets the value of the <code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code> attribute.</dd> +</dl></div> <div id="p-type"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/type">type</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute.</dd> +</dl> +</div> <div id="p-textbox.value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/textbox.value">value</a></span></code></dt> + <dd> + 类型:字符串</dd> + <dd> + 读取或设置该<code>textbox</code>元素中的文本内容.</dd> +</dl></div> <div id="p-valueNumber"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/valueNumber">valueNumber</a></span></code></dt> + <dd> + Type: <em>number</em></dd> + <dd> + In contrast to the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/value">value</a></span></code> property which holds a string representation, the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/valueNumber">valueNumber</a></span></code> property is a number containing the current value of the number box.</dd> +</dl></div> <div id="p-wrapAround"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/wrapAround">wrapAround</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-wraparound"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wraparound">wraparound</a></code> attribute.</dd> +</dl></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><dl> + <dt> + <span id="m-decrease"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/decrease">decrease()</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Decreases the value of the scale or number box by the <code id="a-increment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>.</dd> +</dl> <dl> + <dt> + <span id="m-increase"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/increase">increase()</a></code></span></dt> + <dd> + 返回值类型: 无返回值</dd> + <dd> + 增大刻度条控件(scale元素)或者数字输入框控件(type属性为number的textbox元素)中的数字值(按照其<code id="a-increment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>属性指定的值).</dd> +</dl> <dl> + <dt> + <span id="m-reset"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/reset">reset()</a></code></span></dt> + <dd> + 返回值:无返回值</dd> + <dd> + 将用户偏好重置为默认值.</dd> +</dl> <dl> + <dt> + <span id="m-select"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/select">select()</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Selects all the text in the textbox.</dd> +</dl> <dl> + <dt> + <span id="m-setSelectionRange"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/setSelectionRange">setSelectionRange( start, end )</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Sets the selected portion of the textbox, where the <var>start</var> argument is the index of the first character to select and the <var>end</var> argument is the index of the character after the selection. Set both arguments to the same value to move the cursor to the corresponding position without selecting text.</dd> +</dl> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Style_classes" name="Style_classes">Style classes</h3> +<p>The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.</p> +<p></p><dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/plain">plain</a></code></dt> + <dd>This class causes the element to be displayed with no border or margin.</dd> +</dl><p></p> +<h3 id="Notes">Notes</h3> +<p>The <code>maxlength</code> attribute does not work when in multiline mode. A workaround using JavaScript and the <code>onkeypress</code> event handler as shown in abstract below may be your solution.</p> +<p>The XUL script:</p> +<pre class="deki-transform"><textbox id="pnNote" multiline="true" rows="2" cols="70" onkeypress="return pnCountNoteChars(event);"/> +</pre> +<p>The Javascript:</p> +<pre class="deki-transform">function pnCountNoteChars(evt) { + //allow non character keys (delete, backspace and and etc.) + if ((evt.charCode == 0) && (evt.keyCode != 13)) + return true; + + if(evt.target.value.length < 10) { + return true; + } else { + return false; + } +}</pre> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="/en/XPCOM_Interface_Reference/nsIAccessibleProvider" title="en/nsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/en/NsIDOMXULTextboxElement" title="en/NsIDOMXULTextboxElement">nsIDOMXULTextboxElement</a></dd> +</dl> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/toolbarpalette/index.html b/files/zh-cn/mozilla/tech/xul/toolbarpalette/index.html new file mode 100644 index 0000000000..7df0ea3483 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/toolbarpalette/index.html @@ -0,0 +1,103 @@ +--- +title: toolbarpalette +slug: Mozilla/Tech/XUL/toolbarpalette +translation_of: Archive/Mozilla/XUL/toolbarpalette +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> +<p><strong><span class="highlightred">Firefox only</span></strong></p> +<p>The item is a palette of available <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> items. It is not displayed, but is used by the toolbar customization dialog to display the list of items. The children of the <code>toolbarpalette</code> should be the complete list of <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>s and <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>s that can be added to the toolbar. Do not add the various spacing items, as those are added automatically.</p> +<p>这个控件（item不知道是不是这个意思，下同）是一个调色板控件，它不会显示出来，但是是被工具栏用来个性化对话框从而显示控件列表的。toolbarpalette的子类应该是一个可以被添加入工具栏toolbarbutton和toolbaritem的完整列表。不要加入spacing items，因为它们是被自动添加的。</p> +<p>You can add your own custom buttons to the Firefox browser by using an <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code> that overlays the <code>toolbarpalette</code> with the <code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code><code>BrowserToolbarPalette</code>.</p> +<p>你可以通过overlay来向火狐浏览器添加个性化的按钮，这是通过用BrowserToolbarPalette覆盖toolbarpalette实现的</p> +<p>不过个人感觉这个palette好像不怎么用</p> +<h3 id="Examples" name="Examples">Examples（实例）</h3> +<pre class="eval"><toolbarpalette id="BrowserToolbarPalette"> + <toolbarbutton id="toolbarpalette-button" + class="toolbarbutton-class" + label="&mylabel;" + tooltiptext="&mytiptext;" + oncommand="somefunction()"/> +</toolbarpalette> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements（意思应该是这里面含有的元素吧，看样子既然toolbox都在里面说明这个item还是挺大的）</dt> + <dd> + <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd> +</dl> +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/toolbars/creating_toolbar_buttons/index.html b/files/zh-cn/mozilla/tech/xul/toolbars/creating_toolbar_buttons/index.html new file mode 100644 index 0000000000..363a3b9e2b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/toolbars/creating_toolbar_buttons/index.html @@ -0,0 +1,183 @@ +--- +title: 添加工具栏按钮 (定制工具栏) +slug: Mozilla/Tech/XUL/Toolbars/Creating_toolbar_buttons +translation_of: Archive/Mozilla/XUL/Toolbars/Creating_toolbar_buttons +--- +<p>此文章解释如何使用 <a href="/en/XUL_Overlays" title="en/XUL_Overlays">overlays</a> 为工具包（firefox，Thunderbird 或 Kompozer) 添加工具栏按钮（就是浏览器右上方一系列按钮，home，下载之类的）。适用用户是拥有 <a href="/en/XUL" title="en/XUL">XUL</a> 和 <a href="/en/CSS" title="en/CSS">CSS</a> 基础知识的 <a href="/en/Extensions" title="en/Extensions">扩展</a> 开发人员。</p> +<p>我们假设您已经会创建基础的火狐插件，并且已经成功创建了 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">Hello World extension</a> ，另外，还有一份更加完全的初学者示例指南，请查看 <a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Toolbars/Custom_toolbar_button" title="en/Custom_Toolbar_Button">自定义工具栏按钮。</a></p> +<h3 id="Creating_an_overlay" name="Creating_an_overlay">创建一个 overlay</h3> +<p>The first step is to create an <a href="/en/XUL_Overlays" title="en/XUL_Overlays">overlay</a> for the document containing the toolbar you wish to enhance. Explaining overlays is beyond the scope of this tutorial -- you can read about them in the <a href="/en/XUL_Tutorial/Cross_Package_Overlays" title="en/XUL_Tutorial/Cross_Package_Overlays">XUL Tutorial</a>.</p> +<p>To overlay a document, you need to know its URI. You can find a list of URIs for the most commonly overlaid documents at the <a href="#A_list_of_commonly_overlayed_windows_with_toolbars">bottom of this page</a>.</p> +<div class="note"> + <strong>Note:</strong> Some people overlay <span class="nowiki"><code>chrome://messenger/content/mailWindowOverlay.xul</code></span>. That should cause the button to appear on all windows that <code>mailWindowOverlay.xul</code> is applied to (i.e. Main window and View Message window). This needs to be looked into.</div> +<h3 id="Adding_the_toolbar_button" name="Adding_the_toolbar_button">在工具栏添加按钮</h3> +<p>Toolkit applications have customizable toolbars; therefore, it's common practice for extensions to add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar. The latter is possible but is not recommended and is harder to implement.</p> +<p>Adding a button to the toolbar palette is very easy. Just add code like this to your overlay:</p> +<pre><toolbarpalette id="BrowserToolbarPalette"> + <toolbarbutton id="myextension-button" class="toolbarbutton-1" + label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" + oncommand="MyExtension.onToolbarButtonCommand(event);"/> +</toolbarpalette> +</pre> +<p>注意:</p> +<ul> + <li>The <code>id</code> of the palette (<code>BrowserToolbarPalette</code> in the example) depends on the window whose toolbar you wish to insert a button into. See <a href="#A_list_of_commonly_overlayed_windows_with_toolbars"> below</a> for the list of common palette IDs.</li> + <li><code>class="toolbarbutton-1"</code> makes the toolbar button appear correctly in Icons and Text mode; it also adjusts padding.</li> + <li>If you need to handle middle-click, add this line after the oncommand line.</li> +</ul> +<pre class="prettyprint language-html"><span class="pln">onclick</span><span class="pun">=</span><span class="str">"checkForMiddleClick(this, event)"</span></pre> +<ul> + <li>you can also handle middle-lick and right-click using <code>onclick</code> handler and check <code>event.button</code> in it. like this:</li> +</ul> +<pre class="language-html"><toolbarpalette id="BrowserToolbarPalette"> + <toolbarbutton id="myextension-button" class="toolbarbutton-1" + label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" + onclick="MyExtension.onclick(event);"/> +</toolbarpalette></pre> +<pre>onclick: function(event) { + switch(event.button) { + case 0: + // Left click + break; + case 1: + // Middle click + break; + case 2: + // Right click + break; + } +} +</pre> +<p>To add more buttons, put more <code><toolbarbutton></code> elements inside the <code><toolbarpalette></code> element. Wrap elements other than <code><toolbarbutton></code> in <code><toolbaritem></code>.</p> +<h3 id="Styling_the_button" name="Styling_the_button">为按键应用风格</h3> +<p>Most toolbar buttons have an icon. To attach an image to the button we use standard Mozilla skinning facilities. If you're unfamiliar with how that works, read the <a class="external" href="http://www.borngeek.com/firefox/toolbar-tutorial/" title="http://www.borngeek.com/firefox/toolbar-tutorial/">skinning section of Jonah Bishop's excellent Toolbar Tutorial</a>. Although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques we'll use here.</p> +<h4 id="Icon_size" name="Icon_size">图标大小</h4> +<p>Toolbar buttons can have two different sizes -- big and small. This means you'll need to provide two icons for each of your toolbar buttons. The dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications):</p> +<table> + <tbody> + <tr> + <th>Application (Theme name)</th> + <th>Big icon size</th> + <th>Small icon size</th> + </tr> + <tr> + <td>Firefox 1.0 (Winstripe)</td> + <td>24x24</td> + <td>16x16</td> + </tr> + <tr> + <td>Thunderbird 1.0 (Qute)</td> + <td>24x24</td> + <td>16x16</td> + </tr> + </tbody> +</table> +<h4 id="The_stylesheet" name="The_stylesheet">CSS 样式表</h4> +<p>To set the image for your toolbar button, use the following CSS rules:</p> +<pre>/* skin/toolbar-button.css */ + +#myextension-button { + list-style-image: url("chrome://myextension/skin/btn_large.png"); +} + +toolbar[iconsize="small"] #myextension-button { + list-style-image: url("chrome://myextension/skin/btn_small.png"); +} +</pre> +<h4 id="Applying_the_stylesheet" name="Applying_the_stylesheet">应用样式表</h4> +<p>Remember to attach the stylesheet you created to both the overlay file and the Customize Toolbar window. To attach it to the overlay, put this processing instruction (PI) at the top of the overlay file:</p> +<pre class="eval"><?xml-stylesheet href="<a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a>" type="text/css"?> +</pre> +<div class="note"> + <strong>Note:</strong> The CSS file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the <code>chrome.manifest</code> file. This is very important because the toolbar customization dialog won't work correctly without this.</div> +<p>To include the style on your chrome.manifest file:</p> +<pre class="eval">style <a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a> <a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a> +</pre> +<p>If you are developing for Firefox 1.0, attach it to the Customize Toolbar window (<code><a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a></code>) using <code>skin/contents.rdf</code>. The code looks like this:</p> +<pre><?xml version="1.0"?> +<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> + + <Seq about="urn:mozilla:skin:root"> + <li resource="urn:mozilla:skin:classic/1.0"/> + </Seq> + + <Description about="urn:mozilla:skin:classic/1.0"> + <chrome:packages> + <Seq about="urn:mozilla:skin:classic/1.0:packages"> + <li resource="urn:mozilla:skin:classic/1.0:myextension"/> + </Seq> + </chrome:packages> + </Description> + + <Seq about="urn:mozilla:stylesheets"> + <li resource="chrome://global/content/customizeToolbar.xul"/> + </Seq> + + <Seq about="chrome://global/content/customizeToolbar.xul"> + <li>chrome://myextension/skin/toolbar-button.css</li> + </Seq> +</RDF> +</pre> +<p>The <code>skin/contents.rdf</code> file is denigrated in developing for later releases of Firefox. Extensions for Firefox/Thunderbird 1.5 and above should instead use something like this in their <a href="/en/Chrome_Registration" title="en/Chrome_Registration">chrome.manifest</a>:</p> +<pre class="eval">skin myextension classic/1.0 chrome/skin/ +style <a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a> <a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a> +ia</pre> +<p>Take note of the <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development#Packaging">Packaging section</a> in this article; you may need to include .jar references if you are delivering your extension as a .xpi file.</p> +<h3 id="Common_mistakes" name="Common_mistakes">常见错误</h3> +<p>This is a list of the most common mistakes made by extension authors, including both symptoms and solutions.</p> +<p><strong>Problem:</strong> The whole set of default buttons is painted on the toolbar or in the Customize Toolbars window, instead of your own icon.</p> +<p><strong>Caused by:</strong> Malformed or not applied stylesheet.</p> +<p><strong>Solution:</strong> Check to be sure your stylesheet is correct, make sure your <code>contents.rdf</code> (or <code>chrome.manifest</code>) is correct, and be sure you didn't forget to <a href="#Applying_the_stylesheet">apply the stylesheet</a> to <code>customizeToolbar.xul</code>.</p> +<h3 id="A_list_of_commonly_overlayed_windows_with_toolbars" name="A_list_of_commonly_overlayed_windows_with_toolbars">常见工具栏的 overlayed windows</h3> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>URL</th> + <th>Application and affected window(s)</th> + <th>Palette id</th> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></small></td> + <td>Firefox - Main window</td> + <td>BrowserToolbarPalette</td> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://navigator/content/navigator.xul</a></small></td> + <td>SeaMonkey 2.0 - Browser window</td> + <td>BrowserToolbarPalette</td> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></small></td> + <td>Thunderbird - Main window</td> + <td>MailToolbarPalette</td> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://messenger/content/messenger...gercompose.xul</a></small></td> + <td>Thunderbird - Compose window</td> + <td>MsgComposeToolbarPalette</td> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://messenger/content/addressbo...ddressbook.xul</a></small></td> + <td>Thunderbird - Address book</td> + <td>AddressBookToolbarPalette</td> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://editor/content/editor.xul</a></small></td> + <td>Kompozer - Main window</td> + <td>NvuToolbarPalette</td> + </tr> + <tr> + <td><small><a class="external" rel="freelink">chrome://calendar/content/calendar.xul</a></small></td> + <td>Sunbird - Main window</td> + <td>calendarToolbarPalette</td> + </tr> + </tbody> +</table> +<h3 id="More_information" name="More_information">更多信息</h3> +<ul> + <li>XulPlanet.com references: <a class="external" href="/en/XUL/toolbarbutton" title="https://developer.mozilla.org/en/XUL/toolbarbutton"><code><toolbarbutton></code></a>, <a class="external" href="/en/XUL/toolbaritem" title="https://developer.mozilla.org/en/XUL/toolbaritem"><code><toolbaritem></code></a>.</li> + <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=220220">How to adjust toolbarbutton's label position</a></li> + <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=189667">A forum thread</a> about adding an item to the toolbar (instead of just adding it to palette) right after an extension is installed. Note that doing this is not recommended.</li> + <li>There is <a href="/en/XUL/Toolbars/Custom_toolbar_button/SeaMonkey" title="en/Custom_Toolbar_Button/SeaMonkey">another page</a> on mdc with information about adding buttons to various windows in SeaMonkey. Includes useful information about overlays for ChatZilla.</li> +</ul> diff --git a/files/zh-cn/mozilla/tech/xul/toolbars/custom_toolbar_button/index.html b/files/zh-cn/mozilla/tech/xul/toolbars/custom_toolbar_button/index.html new file mode 100644 index 0000000000..9030e502a8 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/toolbars/custom_toolbar_button/index.html @@ -0,0 +1,332 @@ +--- +title: 自定义工具栏按钮 +slug: Mozilla/Tech/XUL/Toolbars/Custom_toolbar_button +translation_of: Archive/Mozilla/XUL/Toolbars/Custom_toolbar_button +--- +<p>此教程教您一步步为 Firefox, SeaMonkey 2.0, Thunderbird 或 Sunbird 制作工具栏按钮 (对于 SeaMonkey 1.x，请查看 <a href="/en/XUL/Toolbars/Custom_toolbar_button/SeaMonkey" title="en/Custom_Toolbar_Button/SeaMonkey">Custom Toolbar Button:SeaMonkey</a>.)</p> +<p>你不需要任何技巧和工具，所以需要的信息全部在本页。</p> +<p> </p> +<h3 id="Introduction" name="Introduction">介绍</h3> +<p>本页所述技术不包括任何黑科技。你可以自己定制属于自己的扩展。</p> +<p>适用示例上的代码可以制作出很多很有用的按钮，如果你懂得 JS 编程，你可以自己编代码，实现更多其他功能。</p> +<p>如果你需要创建一个具某项功能的按钮，那么你来对地方了</p> +<p>在此页你也能学到扩展程序的基础知识，有利于将来写更复杂的插件。注意，扩展程序非常简单，你或许得查看其他教程，那么-主 <a href="/en/Extensions" title="en/Extensions">扩展</a> 页就是您该去的地方。另外， <a href="/en/XUL/Toolbars/Creating_toolbar_buttons" title="en/Creating_toolbar_buttons">创建工具栏按钮</a> 这篇文章（译注：建议先看本文再看这个，那里面有几句没说清楚该放哪去）和 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">创建一个扩展</a> 更好的展示了创建过程。</p> +<h4 id="Supported_applications" name="Supported_applications">支持的程序</h4> +<p>本文中步骤适用于下列 Mozilla 应用：</p> +<ul> + <li>Firefox 1.5 以后</li> + <li>SeaMonkey 2.0 以后</li> + <li>Thunderbird 1.5 以后</li> + <li>Sunbird 0.3 以后</li> +</ul> +<p>提前发行版一般都支持 (alphas, betas 和 release candidates) 。</p> +<p><strong>译注：本文的例子适用于很多Mozilla 开发的应用程序，原文用Application 代表这些程序，所以我按照原文翻译成了应用/程序，所以如果将来遇到应用/程序等字样，就是指Firefox 等。</strong></p> +<div class="note"> + <p><strong>Note: </strong> There is a similar tutorial for SeaMonkey 1.x on the page: <a href="/en/XUL/Toolbars/Custom_toolbar_button/SeaMonkey" title="en/Custom_Toolbar_Button/SeaMonkey">Custom Toolbar Button:SeaMonkey</a></p> + <p>Earlier versions and other Mozilla applications also support extensions, but some parts of this tutorial are not appropriate for them.</p> +</div> +<h4 id="Required_tools" name="Required_tools">所需工具</h4> +<p>需要两个工具，系统一般都默认提供了：</p> +<ul> + <li>能操作文件，文件夹的环境</li> + <li>纯文本编辑器</li> +</ul> +<h5 id="Character_encoding" name="Character_encoding">字符编码</h5> +<p>有些文本编辑器有调整字符编码的选项。</p> +<p>如果你使用拉丁 (ASCII) 字符，那就将你的文本编辑器设为除 Unicode 外的任意编码</p> +<p>如果你的语言包含非拉丁字符，那保存文件时请选择 UTF-8 编码。</p> +<p>要想测试编辑器，新建一个文件<code>test.txt</code>。在文件中输入属于您语言的文字，然后保存。</p> +<p>使用火狐打开此文件，(例如，直接将文件拖动到火狐上，或在菜单中选择 文件 – 打开文件)。</p> +<p>在火狐的菜单栏中，选择 查看– 字符编码 – Unicode (UTF-8)。然后看在此设置下，文本中的文字是否能正常显示。</p> +<p>如果你的文本编辑器不支持 UTF-8，自己上网搜索装一个。</p> +<h4 id="Optional_tools" name="Optional_tools">可选工具</h4> +<p>可以使用任意图像编辑器编辑图片。</p> +<p>可以使用 jar 工具或 zip 工具将此按钮项目压缩成跨平台的安装文件 (XPI)，方便别人安装使用。</p> +<h3 id="Making_a_button" name="Making_a_button">制作一个按钮</h3> +<p>按照下面10步完成</p> +<p>完成所有步骤后，文件夹结构应该如下图所示：</p> +<dl> + <dd> + <img alt="Directory and file structure" class="internal" src="/@api/deki/files/633/=Custom-button-structure.png"></dd> +</dl> +<p> profile 和 <code>extensions</code> 文件夹已存在，需要添加图中其他的文件和文件夹(当然此目录下可能还会有其他文件，只是没显示.)</p> +<div style="margin-left: 4ex;"> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 1.</div> + 前往应用程序的配置文件夹，然后找到<code>extensions</code> 文件夹。 + <p><strong>注意: </strong> 至于如何找到配置文件夹，请查看：<a class="external" href="http://kb.mozillazine.org/Profile_folder">配置文件夹</a></p> + <p><em>说明: </em> 配置文件夹包含用户指定的设置，和主程序分开存放。所以程序重装或升级之后，这些信息不受影响。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 2.</div> + 在 <code>extensions</code> 文件夹中，创建一个文件夹，名称如下： + <p>建议直接复制粘贴，以免出错</p> + <dl> + <dd> + <code><a class="link-mailto" href="mailto:custom-toolbar-button@example.com" rel="freelink">custom-toolbar-button@example.com</a></code></dd> + </dl> + <p>按照后面的步骤，创建两个文件和一个文件夹。</p> + <p><em>说明: </em> 此文件夹名称是用于区分不同扩展程序的唯一标识符。在稍后的部分会有详细的标识符。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 3.</div> + 创建一个文本文档，名称为 <code>install.rdf</code>. + <p>完整复制下面内容，粘贴到文档中：</p> + <pre><?xml version="1.0"?> + +<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:em="http://www.mozilla.org/2004/em-rdf#"> + + <Description + about="urn:mozilla:install-manifest" + + em:name="Custom Button" + em:description="My custom toolbar button" + em:creator="My name" + + em:id="custom-toolbar-button@example.com" + em:version="1.0" + em:homepageURL="http://developer.mozilla.org/en/docs/Custom_Toolbar_Button" + + em:iconURL="chrome://custombutton/content/icon.png" > + + <em:targetApplication><!-- Firefox --> + <Description + em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" + em:minVersion="1.4" + em:maxVersion="99" /> + </em:targetApplication> + + <em:targetApplication><!-- Thunderbird --> + <Description + em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" + em:minVersion="1.4" + em:maxVersion="99" /> + </em:targetApplication> + + <em:targetApplication><!-- Sunbird --> + <Description + em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" + em:minVersion="0.2.9" + em:maxVersion="99" /> + </em:targetApplication> + + <em:file> + <Description + about="urn:mozilla:extension:custombutton" + em:package="content/custombutton/" /> + </em:file> + + </Description> + +</RDF> +</pre> + <p>可选：改变 name, description 和 creator。改变这三行中双引号间的文字即可</p> + <p>根据需求，移除不需要的软件说明部分（译注：假如你只想给firefox创建插件，那么就可以删掉别的部分）。</p> + <p>保存文件</p> + <p><em>说明: </em> 此文件包含应用程序扩展管理器需要的信息。target applications这一大段表示能运行扩展程序的应用以及版本号。 最后一段描述此插件会添加内容到应用程序。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 4.</div> + 创建一个文本文档，名称为 <code>chrome.manifest</code>. + <p>完整复制下面内容，粘贴到文档中：</p> + <pre>content custombutton chrome/ +style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css + +# Firefox +overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul + +# Thunderbird mail +overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul + +# Thunderbird compose +overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul + +# Thunderbird address book +overlay chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul + +# Sunbird +overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul +</pre> + <p>移除不需要的部分（同上段说明）。</p> + <p>保存文件</p> + <p><em>说明: </em> 此文件定义扩展的内容结构。先给工具栏窗口应用一个样式表。然后给每个工具栏都指定一个 overlay 。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 5.</div> + 创建文件夹： <code>chrome</code>. + <p>按照下放说明，创建 5 个文件。</p> + <p><em>说明: </em> <code>chrome</code> 文件夹包含扩展的可执行部分，即扩展是干什的。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 6.</div> + 创建一个文本文档，名称为 <code>button.xul</code>. + <p>完整复制下面内容，粘贴到文档中：</p> + <pre><?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet type="text/css" + href="chrome://custombutton/content/button.css"?> + +<!DOCTYPE overlay > +<overlay id="custombutton-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script type="application/javascript" + src="chrome://custombutton/content/button.js"/> + +<!-- Firefox --> +<toolbarpalette id="BrowserToolbarPalette"> + <toolbarbutton id="custom-button-1"/> + </toolbarpalette> + +<!-- Thunderbird mail --> +<toolbarpalette id="MailToolbarPalette"> + <toolbarbutton id="custom-button-1"/> + </toolbarpalette> + +<!-- Thunderbird compose --> +<toolbarpalette id="MsgComposeToolbarPalette"> + <toolbarbutton id="custom-button-1"/> + </toolbarpalette> + +<!-- Thunderbird address book --> +<toolbarpalette id="AddressBookToolbarPalette"> + <toolbarbutton id="custom-button-1"/> + </toolbarpalette> + +<!-- Sunbird --> +<toolbarpalette id="calendarToolbarPalette"> + <toolbarbutton id="custom-button-1"/> + </toolbarpalette> + + +<!-- button details --> +<toolbarbutton id="custom-button-1" + label="Custom" + tooltiptext="My custom toolbar button" + oncommand="CustomButton[1]()" + class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" + /> + +</overlay> +</pre> + <p>可选：你可以自定义最后一块中的 label 和 tooltiptext 。更改双括号间的内容即可。</p> + <p>可选地，移除不需要的部分。。</p> + <p>保存文件。</p> + <p><em>说明: </em> 此 <a href="/en/XUL" title="en/XUL">XUL</a> 文件会添加一个按钮到应用程序的 toolbar customization palette。此文件还链接了CSS样式表 和 JavaScript 脚本。最后一部分描述按钮的信息（译注；就是按钮名+鼠标放上面会提示什么文字）</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 7.</div> + 创建一个文本文档，名称为： <code>button.css</code>. + <p>完整复制下面内容，粘贴到文档中：</p> + <pre>#custom-button-1, +#wrapper-custom-button-1 + {list-style-image: url("chrome://custombutton/content/button-1.png");} + +/* common style for all custom buttons */ +.custombutton + {-moz-image-region: rect( 0px 24px 24px 0px);} + +.custombutton:hover + {-moz-image-region: rect(24px 24px 48px 0px);} + +[iconsize="small"] .custombutton + {-moz-image-region: rect( 0px 40px 16px 24px);} + +[iconsize="small"] .custombutton:hover + {-moz-image-region: rect(24px 40px 40px 24px);} +</pre> + <p>没有什么能优化的，保存文件即可</p> + <p><em>说明: </em> 此 <a href="/en/CSS" title="en/CSS">CSS</a> 样式表定义按钮如何显示。它链接到了按钮图片，指定了图片四个部分的尺寸。（译注；这里你就可以看文章开头提到的文章了，比这里举的例子更好实现，你只需在css中指定一大一小两个图片即可）</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 8.</div> + 创建一个文本文档，名称为： <code>button.js</code>. + <p>完整复制下面内容，粘贴到文档中：</p> + <div style="width: 40em;"> + <pre>CustomButton = { + +1: function () { + alert("Just testing") + }, + +} +</pre> + </div> + <p>没有什么能优化的，保存文件即可</p> + <p>接下来一部分的教程包含几个实例代码，你可以用他们来实现有用的功能。</p> + <p><em>说明: </em> 此文件指定当按钮按下时执行什么操作。它使用 <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 语言，加应用自己提供的一些特性。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 9.</div> + 下载按钮图片。 + <p>右击图片，另存为，保存到 <code>chrome</code> 目录下。请确保文件名为： <code>button-1.png</code></p> + <div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> + <img alt="button-1.png" class="internal" src="/@api/deki/files/576/=Button-1.png"></div> + <p style=""><em>说明: </em> 此图片包含四个部分。左上方是常用的图标。左下是深色的，按下按钮后显示，右侧的是小图标，工具栏设置成使用小图标时需要用。</p> + <div style="margin-left: -4ex; width: 4ex; float: left;"> + 10.</div> + 下载扩展的图片。 + <p>右击图片，另存为，保存到 <code>chrome</code> 目录下。请确保文件名为：<code>icon.png</code></p> + <div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> + <img alt="icon.png" class="internal" src="/@api/deki/files/717/=Icon.png"></div> + <p style=""><em>说明: </em> 此图片显示在应用扩展管理窗口中。</p> +</div> +<h4 id="Testing_your_new_button" name="Testing_your_new_button">测试您的按钮</h4> +<p>重启应用程序（firefox）</p> +<p>右击工具栏，选中定制，或者在菜单中，依次选择：查看 – 工具栏 – 定制</p> +<p>将刚才的新按钮拖动到工具栏，点击“退出定制”保存设置。</p> +<p>点击按钮，应该能看到弹出信息了。</p> +<h3 id="Further_development" name="Further_development">进一步开发</h3> +<p>此部分描述如何进一步开发按钮。</p> +<h4 id="Uninstalling_the_button" name="Uninstalling_the_button">卸载按钮</h4> +<p>如果想卸载按钮，删掉步骤 2 创建的文件夹即可。</p> +<p>或者，使用程序自己的 扩展管理窗口 正常卸载应用，在下次重启时应用就会删掉此文件夹。</p> +<p>重启程序</p> +<h4 id="Troubleshooting" name="Troubleshooting">排错</h4> +<p>如果按钮没在工具栏中显示，或是其他问题，可以按照下列步骤排查。</p> +<p>如果有必要，卸载按钮，重头开始，这次不要修改任何内容</p> +<p>在能成功让按钮工作后，小心的修改文件。</p> +<p>要想看到修改后的结果，需要重启应用。</p> +<h5 id="Advanced_troubleshooting" name="Advanced_troubleshooting">高级排错</h5> +<p>如果你有一定的技术只是，那么你可以使用应用程序的 JavaScript console 查看错误信息。但是不一定都有用，而且易混淆，或是看到了其他程序的执行结果。</p> +<p>在 工具栏 - 开发者（web developer） - Browser Console 中开启 JS 选项。或使用快捷键"Ctrl + Shift + J"</p> +<p> JavaScript console 里会显示 JavaScript, XUL 或 CSS 文件的信息。</p> +<div class="note"> + <strong>Note</strong>: The preference setting <a class="external" href="http://kb.mozillazine.org/Javascript.options.strict">javascript.options.strict</a> imposes restrictions that are not appropriate for the simple scripts in this tutorial. If you choose to use this setting, either ignore the warnings that it generates, or change the coding style to keep it quiet.</div> +<h4 id="Programming_the_button" name="Programming_the_button">为按钮编程</h4> +<p>要想改变按钮功能，去修改步骤 8 里的 <code>button.js</code> 。</p> +<p>移除行: <code>alert("Just testing")</code> ，替换成其他 js 语句。</p> +<p>可以在 <a href="/en/XUL/Toolbars/Custom_toolbar_button/Code_Samples" title="en/Custom_Toolbar_Button/Code_Samples">Code Samples</a> 查看很多代码示例，不用知道编程知识就能修改并使用。</p> +<p>需要重启才能生效变更。</p> +<h4 id="Adding_more_buttons" name="Adding_more_buttons">添加更多的按钮</h4> +<p>要想添加更多的按钮，请编辑 <code>button.xul 文件，对于每个应用，复制指定</code> <code>custom-button-1 的那行</code>，然后将新行指定成 <code>custom-button-2</code>。</p> +<p>重复最后一部分。在 <code>id</code> 和 <code>oncommand</code> 参数中，将 1 改为 2。然后改变 <code>label</code> 和 <code>tooltiptext</code> 。<strong>不要</strong>改变 <code>class</code> 参数。</p> +<p>然后编辑 <code>button.css</code>。复制前三行，改变新行成为 <code>button-2</code>.</p> +<p>编辑 <code>button.js</code> 为新按钮添加 js 语句。请确保<strong>添加的语句在最后一个花括号的前面</strong>，例如，这么添加命令：</p> +<pre class="eval">2: function () { + alert("Just testing again") + }, +</pre> +<p>为新按钮创建图标，命名为 <code>button-2.png</code>。下面提供的文件有40 像素宽，48像素高，256色，透明背景，PNG格式，其他格式也能工作。</p> +<p>你可以下载使用下列图片：</p> +<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> + <img alt="button-2.png" class="internal" src="/@api/deki/files/580/=Button-2.png"></div> +<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> + <img alt="button-3.png" class="internal" src="/@api/deki/files/583/=Button-3.png"></div> +<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> + <img alt="button-4.png" class="internal" src="/@api/deki/files/586/=Button-4.png"></div> +<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> + <img alt="button-5.png" class="internal" src="/@api/deki/files/589/=Button-5.png"></div> +<p style="">重启程序，并将新按钮添加到工具栏。</p> +<p>你可以重复这些步骤，创建更多按钮</p> +<h3 id="Distributing_your_button_to_other_users" name="Distributing_your_button_to_other_users">将您的按钮分发给其他用户</h3> +<p>如果你想将按钮程序分发给他人，那就必须做些修改以和其他扩展程序做区分。</p> +<p>创建一个扩展 ID，格式为：</p> +<dl> + <dd> + <code><em>something</em>@<em>domain-name</em></code></dd> +</dl> +<p>必须包含at符号 (<code>@</code>)，格式和邮箱地址挺像，但不必是真实邮箱地址。@符号的前后，只能使用字符 ： A-Z， a-z， 0-9， 英文句号( . )， 连字符（-）和下划线（_）。如果您没有域名（domain-name），可以自己编个，如果你想让这域名看着不像真正的域名，那就在结尾加个 <code>.invalid</code> 。</p> +<p>使用你的 扩展ID （extension ID）重命名文件夹，然后在 <code>install.rdf</code> 文件中指定相同的 ID。</p> +<p><code>在 install.rdf</code> 文件中，移除您扩展不能正常工作的应用项。例如，如果您的按钮只能在 Thunderbird 上运行，就删除 Firefox 和 Sunbird 的部分。同样道理，修改 <code>button.xul</code> 和 <code>chrome.manifest</code>.</p> +<p>改变所有文件中的 "custombutton", "custom-button" 和 "CustomButton" 字样。</p> +<p>可以自己更改的：</p> +<ul> + <li>按钮的图片</li> + <li>扩展的图片： <code>icon.png</code></li> + <li> <code>install.rdf</code> 中的版本号和主页</li> +</ul> +<p>使用 jar 工具或 zip 工具打包整个文件夹的内容命名为 <code>.xpi</code> 文件。方便用于其他程序。</p> +<p>用户可在应用程序的扩展管理窗口中安装此 XPI 文件。</p> diff --git a/files/zh-cn/mozilla/tech/xul/toolbars/index.html b/files/zh-cn/mozilla/tech/xul/toolbars/index.html new file mode 100644 index 0000000000..b028d9cd69 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/toolbars/index.html @@ -0,0 +1,65 @@ +--- +title: Toolbars +slug: Mozilla/Tech/XUL/Toolbars +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/XUL/Toolbars +--- +<p>Toolbars, implemented using the XUL <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> element, are containers for toolbar buttons and other user interface objects. The following articles provide details about implementing and working with toolbars.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt><a href="/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="XUL/School_tutorial/Adding Toolbars and Toolbar Buttons">XUL School: Adding Toolbars and Toolbar Buttons</a></dt> + <dd>A helpful tutorial to creating toolbars and toolbar buttons.</dd> + <dt><a href="/en-US/docs/XUL/Toolbars/Toolbar_customization_events" title="XUL/Toolbars/Toolbar customization events">Toolbar customization events</a></dt> + <dd>A look at the events that are sent during toolbar customization; you can use these to be kept aware of changes to toolbars.</dd> + <dt><a href="/en-US/docs/XUL/Toolbars/Creating_toolbar_buttons" title="XUL/Toolbars/Creating toolbar buttons">Creating toolbar buttons</a></dt> + <dd>How to use overlays to add toolbar buttons to Mozilla applications.</dd> + <dt><a href="/en-US/docs/XUL/Toolbars/Custom_toolbar_button" title="XUL/Toolbars/Custom toolbar button">Custom toolbar button</a></dt> + <dd>Another example of how to create a toolbar button, complete with a sample extension you can download and try.</dd> + <dt><a href="/en-US/docs/Code_snippets/Toolbar" title="Code snippets/Toolbar">Code snippets: Toolbar</a></dt> + <dd>Code snippets that are helpful when working with toolbars.</dd> + <dt></dt> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Extensions" title="Tags:Toolbars">View all pages tagged with "Toolbars"...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Community</h2> + <ul> + <li>View Mozilla extension development forums... <ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-extensions"> 邮件列表</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.extensions"> 新闻组</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.extensions/feeds"> Web feed</a></li> +</ul></li> + <li><a class="link-irc" href="irc://irc.mozilla.org/extdev">#extdev IRC channel</a></li> + <li><a href="http://forums.mozillazine.org/?c=11">MozillaZine forum</a></li> + <li><a href="/devnews/index.php/categories/about-addons" title="https://developer.mozilla.org/editor/fckeditor/core/editor/devnews/index.php/categories/about-addons/">about:addons newsletter</a></li> + <li><a href="/web-tech" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/">Mozilla's Web-Tech blog</a></li> + <li><a href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a></li> + <li><a href="http://planet.mozilla.org/" title="http://planet.mozilla.org/">Planet Mozilla</a></li> + <li><a href="/en-US/docs/Extensions/Community" title="Extensions/Community">Other community links...</a></li> + </ul> + <h2 class="Tools" id="Tools" name="Tools">Tools</h2> + <ul> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> edit the live DOM (Firefox and Thunderbird)</li> + <li><a class="link-https" href="https://builder.mozillalabs.com/" title="https://builder.mozillalabs.com/">Mozilla Labs Add-on Builder</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> a suite of development tools</li> + <li><a href="http://www.gijsk.com/" rel="external nofollow" title="http://www.gijsk.com/">Chrome List</a> view files in chrome:// (<a href="http://addons.mozilla.org/en-US/firefox/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox</a>, <a href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird</a>)</li> + <li><a href="http://ted.mielczarek.org/code/mozilla/extensionwiz/" rel="external nofollow" title="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> a web-based extension skeleton generator (Firefox and Thunderbird)</li> + </ul> + <p>... <a href="/en-US/docs/Setting_up_extension_development_environment#Development_extensions" title="Setting up extension development environment#Development extensions">more tools</a> ...</p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/Themes" title="Themes">Themes</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/mozilla/tech/xul/toolbox/index.html b/files/zh-cn/mozilla/tech/xul/toolbox/index.html new file mode 100644 index 0000000000..4417170b3e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/toolbox/index.html @@ -0,0 +1,6 @@ +--- +title: toolbox +slug: Mozilla/Tech/XUL/toolbox +translation_of: Archive/Mozilla/XUL/toolbox +--- +<p>This page has no content. Enrich MDC by contributing.</p> diff --git a/files/zh-cn/mozilla/tech/xul/tree/index.html b/files/zh-cn/mozilla/tech/xul/tree/index.html new file mode 100644 index 0000000000..7e2de0b669 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tree/index.html @@ -0,0 +1,512 @@ +--- +title: tree +slug: Mozilla/Tech/XUL/tree +translation_of: Archive/Mozilla/XUL/tree +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> + +<p>tree是用来显示表格或层级行元素的容器。 包含若干行 （rows ）和列（columns）。树的每行包含若干缩进显示的子行（child rows）。 和其他元素不同的是，用来显示的数据不是通过标签（tags），而是通过一个显示对象（view object）来确定的。这个显示对象（view object）实现了接口 <a href="/en/XPCOM_Interface_Reference/nsITreeView" title="en/nsITreeView">nsITreeView</a> . The view is queried for the data to appear in the tree. 树的使用有以下几种方法， 第二列列出了通过树的 <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/view">view</a></span></code>属性（property）的可用的接口. 第三列指示<code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> 元素是否使用.</p> + +<p>If you would like to allow the tree to be horizontally scrolled, simply set the <code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> attributes for each column to make the tree wider than its containing object.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Tree type</th> + <th>View interfaces</th> + <th>Has DOM nodes?</th> + <th>Description</th> + </tr> + <tr> + <td>Content tree</td> + <td><a href="/en/XPCOM_Interface_Reference/nsITreeView" title="en/nsITreeView">nsITreeView</a>, <a href="/en/XPCOM_Interface_Reference/NsITreeContentView" title="en/NsITreeContentView">nsITreeContentView</a></td> + <td>Yes</td> + <td>This tree has <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> elements placed within the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> element. In this situation, a content view (which implements the interface <a href="/en/XPCOM_Interface_Reference/NsITreeContentView" title="en/NsITreeContentView">nsITreeContentView</a>) which is a more specialized type of view, uses the <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> elements and their descendants to determine the data to display in the tree. However, the treeitems are not displayed directly; they are used only as data to the content view. However, the content view will automatically update the tree if treeitems are changed.</td> + </tr> + <tr> + <td>RDF tree</td> + <td><a href="/en/XPCOM_Interface_Reference/nsITreeView" title="en/nsITreeView">nsITreeView</a>, <a href="/en/NsIXULTreeBuilder" title="en/NsIXULTreeBuilder">nsIXULTreeBuilder</a></td> + <td>No</td> + <td>This tree is generated from an RDF datasource. It is used when a tree has a <code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute, and has <code>dont-build-content</code> in its <code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code> attribute. For this tree, the data comes directly from the RDF datasource. DOM <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code>s are not created. Even though the template uses treeitem elements to define the content, DOM nodes for these elements are not created. This is the type that should be used for RDF generated trees with lots of rows.</td> + </tr> + <tr> + <td>RDF content tree</td> + <td><a href="/en/XPCOM_Interface_Reference/nsITreeView" title="en/nsITreeView">nsITreeView</a>, <a href="/en/NsIXULTreeBuilder" title="en/NsIXULTreeBuilder">nsIXULTreeBuilder</a>, <a href="/en/XPCOM_Interface_Reference/NsITreeContentView" title="en/NsITreeContentView">nsITreeContentView</a></td> + <td>Yes</td> + <td>This tree is generated from an RDF datasource. It is similar to the previous type but is used when the tree does not have <code>dont-build-content</code> in its <code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code> attribute. DOM <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code>s are created, so you can access the data using RDF functions or DOM functions. This type is suitable for RDF generated trees with a fairly small number of rows.</td> + </tr> + <tr> + <td>Custom tree view</td> + <td><a href="/en/XPCOM_Interface_Reference/nsITreeView" title="en/nsITreeView">nsITreeView</a></td> + <td>No</td> + <td>For this tree you implement the <a href="/en/XPCOM_Interface_Reference/nsITreeView" title="en/nsITreeView">nsITreeView</a> interface yourself. The tree's data is retrieved from this custom view. The custom view should be attached to the tree by setting its <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/view">view</a></span></code> property.</td> + </tr> + </tbody> +</table> + +<p>More information is available in the <a href="/en/XUL_Tutorial/Trees" title="en/XUL_Tutorial/Trees">XUL tutorial</a>. Also <a href="/en/Tree_Widget_Changes" title="en/Tree_Widget_Changes">Tree Widget Changes</a>.</p> + +<table style="background: #eeeeee none repeat scroll 0% 0%; border: 1px solid #cccccc; margin: 0px 0px 10px 10px; padding: 0px 10px;"> + <tbody> + <tr> + <td><strong><a href="/en/XUL_accessibility_guidelines#Trees" title="en/XUL_accessibility_guidelines#Trees">Relevant accessbility guidelines</a></strong><small> </small> + + <ul> + <li><small>Provide alternative access (e.g., via menus) to column picker and for header behaviors like sorting (these have no default keyboard access).</small></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<dl> + <dt>Attributes</dt> + <dd><a href="#a-disableKeyNavigation">disableKeyNavigation</a>, <a href="#a-disabled">disabled</a>, <a href="#a-tree.editable">editable</a>, <a href="#a-enableColumnDrag">enableColumnDrag</a>, <a href="#a-flags">flags</a>, <a href="#a-hidecolumnpicker">hidecolumnpicker</a>, <a href="#a-tree.onselect">onselect</a>, <a href="#a-rows">rows</a>, <a href="#a-seltype">seltype</a>, <a href="#a-statedatasource">statedatasource</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-treelines">treelines</a></dd> +</dl> + +<dl> + <dt>Properties</dt> + <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-builderView">builderView</a>, <a href="#p-columns">columns</a>, <a href="#p-contentView">contentView</a>, <a href="#p-currentIndex">currentIndex</a>, <a href="#p-disableKeyNavigation">disableKeyNavigation</a>, <a href="#p-disabled">disabled</a>, <a href="#p-editingColumn">editingColumn</a>, <a href="#p-editingRow">editingRow</a>, <a href="#p-enableColumnDrag">enableColumnDrag</a>, <a href="#p-firstOrdinalColumn">firstOrdinalColumn</a>, <a href="#p-tree.inputField">inputField</a>, <a href="#p-selType">selType</a>, <a href="#p-selstyle">selstyle</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-treeBoxObject">treeBoxObject</a>, <a href="#p-view">view</a></dd> +</dl> + +<h3 id="Examples" name="Examples">Examples</h3> + +<h4 id="A_tree_with_several_columns">A tree with several columns</h4> + +<pre class="script"><tree flex="1" rows="2"> + + <treecols> + <treecol id="sender" label="Sender" flex="1"/> + <treecol id="subject" label="Subject" flex="2"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="joe@somewhere.com"/> + <treecell label="Top secret plans"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="mel@whereever.com"/> + <treecell label="Let's do lunch"/> + </treerow> + </treeitem> + </treechildren> + +</tree> +</pre> + +<div><img alt="Image:trees1.png" class="internal" src="/@api/deki/files/899/=Trees1.png"></div> + +<h4 id="A_tree_with_several_columns_and_nested_items">A tree with several columns and nested items</h4> + +<pre class="script"><tree id="myTree" flex="1" hidecolumnpicker="false" seltype="single" class="tree" + rows="5"> + <treecols id="myTree2-treeCols"> + <treecol id="myTree2-treeCol0" primary="true" flex="2" label="Column A" + persist="width" ordinal="1"/> + <splitter class="tree-splitter" ordinal="2"/> + <treecol id="myTree2-treeCol1" flex="1" label="Column B" + persist="width" ordinal="3"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="1"/> + <treecell label="a"/> + </treerow> + </treeitem> + <!-- Make sure to set container="true" --> + <treeitem container="true" open="true"> + <treerow> + <treecell label="2"/> + <treecell label="b"/> + </treerow> + <treechildren> + <treeitem> + <treerow> + <treecell label="2a"/> + <treecell label="ba"/> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> +</tree> +</pre> + +<h3 id="Attributes" name="Attributes">Attributes</h3> + +<p> </p><div id="a-disabled"> + + +<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> </dd> + <dd> + <h5 id="类型boolean">类型:<em>boolean</em></h5> + </dd> + <dd> + <h5 id="表示元素是被禁用的。">表示元素是被禁用的。</h5> + + <p>如果这个元素的disabled属性被设置为true，表示元素被禁用，被禁用的属性在页面上通常会显示灰色文本，它无法响应用户的操作，它也无法得到光标。</p> + + <p>然而，这个元素仍然能够响应鼠标事件，如果要启用这个元素，把disabled设置为false</p> + </dd> +</dl> + +<h4 id="示例：">示例：</h4> + +<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png" src="https://mdn.mozillademos.org/files/1742/XUL_ref_attr_disabled.png"></div> + +<pre><code>// Disabling an element +document.getElementById('buttonRemove').setAttribute("disabled", "true"); + +// Enabling back an element by removing the "disabled" attribute +document.getElementById('buttonRemove').removeAttribute("disabled");</code></pre> + +<p></p><div class="blockIndicator standardNote standardNoteBlock"> + <p><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p> + <p style="font-weight: 400;">For <a href="https://developer.mozilla.org/en-US/docs/XUL/keyset" title="en/XUL/Keyset"><code>keyset</code></a> elements, support for this attribute was added in Firefox 3.5.</p> +</div><p></p> +</div> <div id="a-disableKeyNavigation"> + + +<dl> + <dt><code id="a-disableKeyNavigation"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. This is done incrementally, so typing more letters with select more specific items. This feature may be disabled by setting this attribute to <code>true</code>.</dd> +</dl> +</div> <div id="a-tree.editable"> + + +<dl> + <dt><code id="a-tree.editable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tree.editable">editable</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Indicates that the cells of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> may be edited.</dd> +</dl> +</div> <div id="a-enableColumnDrag"> + + +<dl> + <dt><code id="a-enableColumnDrag"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/enableColumnDrag">enableColumnDrag</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>When set to <code>true</code>, the user may drag the column headers around to change the order in which they are displayed.</dd> +</dl> +</div> <div id="a-flags"> + + +<dl> + <dt><code id="a-flags"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code></dt> + <dd>Type: <em>space-separated list of the values below</em></dd> + <dd>A set of flags used for miscellaneous purposes. Two flags are defined, which may be the value of this attribute. + <ul> + <li><code>dont-test-empty</code>: For template generated content, the builder will not check that a container is empty.</li> + <li><code>dont-build-content</code>: This flag may be used on a tree to indicate that content elements should not be generated. This results in a performance enhancement, but you will not be able to use the DOM functions to retrieve the tree rows.</li> + </ul> + </dd> +</dl> +</div> <div id="a-hidecolumnpicker"> + + +<dl> + <dt><code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>When set to <code>false</code>, a drop-down will appear in the upper right corner of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code>, which the user may use to show and hide columns. When set to <code>true</code>, the column picker will be hidden. The default value is <code>false</code>.</dd> +</dl> +</div> <div id="a-tree.onselect"> + + +<dl> + <dt><code id="a-tree.onselect"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tree.onselect">onselect</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>This event is sent to a <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> when a row is selected, or whenever the selection changes. The user can select multiple rows by holding down Shift or Control and clicking on a row. The <code>onselect</code> event will be sent for each item added to or removed from the selection.</dd> +</dl> + + +</div> <div id="a-rows"> + +<dl> + <dt> + <code id="a-rows"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + The number of rows to display in the element. If the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. To get the actual number of rows in the element, use the <span id="m-getRowCount"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getRowCount">getRowCount</a></code></span> method.</dd> +</dl> +</div> <div id="a-seltype"> + + +<dl> + <dt><code id="a-seltype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Used to indicate whether multiple selection is allowed.</dd> + <dd> + <dl> + <dt><code>single</code></dt> + <dd>Only one row may be selected at a time. (Default in <code>listbox</code> and <code>richlistbox</code>.)</dd> + <dt><code>multiple</code></dt> + <dd>Multiple rows may be selected at once. (Default in <code>tree</code>.)</dd> + </dl> + </dd> + <dd> + <p>For trees, you can also use the following values:</p> + + <dl> + <dt><code>cell</code></dt> + <dd>Individual cells can be selected </dd> + <dt><code>text</code></dt> + <dd>Rows are selected; however, the selection highlight appears only over the text of the primary column.</dd> + </dl> + + <p>For <code>richlistbox</code>, this is new in Firefox 3.5.</p> + </dd> +</dl> +</div> <div id="a-statedatasource"> + + +<dl> + <dt><code id="a-statedatasource"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/statedatasource">statedatasource</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>Chrome XUL may specify an RDF datasource to use to store <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> state information. This is used to hold which tree items are open and which items are collapsed. This information will be remembered for the next time the XUL file is opened. If you do not specify this attribute, state information will be stored in the local store (<code>rdf:local-store</code>).</dd> +</dl> +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type:<em>integer</em></dd> + <dd>当用户按下 "<kbd>tab</kbd>" 键时焦点移动到元素上的顺序。<code>tabindex</code> 数字越大，顺序越靠后。</dd> +</dl> + + + +<p></p> +</div> <div id="a-treelines"> + +<dl><dt> <code id="a-treelines"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/treelines">treelines</a></code> <br> +</dt><dd> Type: <em>boolean</em> </dd><dd> When set to <code>true</code>, lines are drawn connecting the lines in the tree; when <code>false</code>, the lines are not drawn. This is <code>false</code> by default.<br> +</dd></dl> +</div><p></p> + +<h3 id="Properties" name="Properties">Properties</h3> + +<p> </p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> + +<p></p></div> <div id="p-builderView"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/builderView">builderView</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXULTreeBuilder" title="">nsIXULTreeBuilder</a></code></em></dd> + <dd>A reference to the tree builder which constructed the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> data. The builder provides access to the RDF resources for each row in the tree, and allows sorting the data by column. In newer versions of Mozilla, the <code>builderView</code> property is actually a synonym for the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/view">view</a></span></code> property, since the two interfaces are flattened together into a single interface in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>. This property is read-only.</dd> +</dl></div> <div id="p-columns"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/columns">columns</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeColumns" title="">nsITreeColumns</a></code></em></dd> + <dd> + Returns the columns for the tree as an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeColumns" title="">nsITreeColumns</a></code> object.</dd> +</dl></div> <div id="p-contentView"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contentView">contentView</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeContentView" title="">nsITreeContentView</a></code></em></dd> + <dd> + For trees built with a content builder - that is, those that do not have <code id="a-flags"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code> set -- the <code>contentView</code> will be a reference to the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeContentView" title="">nsITreeContentView</a></code> for the tree. This interface lets you retrieve the DOM element corresponding to a given a row index and vice versa. For trees that are not built with a content builder, the functions of <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeContentView" title="">nsITreeContentView</a></code> will not be available, since there are no DOM nodes to retrieve. In newer versions of Mozilla, the <code>contentView</code> property is actually a synonym for the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/view">view</a></span></code> property, since the two interfaces are flattened together into a single interface in <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. This property is read-only.</dd> +</dl></div> <div id="p-currentIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/currentIndex">currentIndex</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + <p>Set to the row index of the tree caret in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code>. For trees with focus, the caret's position is indicated by the focus ring, but unfocused trees won't show a focus ring, naturally. For unfocused trees, the (undrawn) caret's position can still be obtained by this property. If the caret isn't present for any row (for example, because the tree has never been focused), the value will be <code>-1</code>.</p> + <p><strong>You cannot rely on this property to change or determine a tree selection</strong>, except for trees with <code><code id="a-seltype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code>="single"</code>. (All trees have <code>seltype="multiple"</code> by default.) To reliably change or determine a selection, instead use the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeSelection" title="">nsITreeSelection</a></code> interface methods available via <code>tree.view.selection</code>.</p> + </dd> +</dl> +</div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: + <i> + boolean</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-disableKeyNavigation"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disableKeyNavigation">disableKeyNavigation</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets or sets the value of the <code id="a-disableKeyNavigation"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></code> attribute.</dd> +</dl></div> <div id="p-editingColumn"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/editingColumn">editingColumn</a></span></code> </dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeColumn" title="">nsITreeColumn</a></code></em></dd> + <dd>The column of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> cell currently being edited, or <code>null</code> if there is no cell being edited.</dd> +</dl></div> <div id="p-editingRow"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/editingRow">editingRow</a></span></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>The row index of the <a href="/en/XUL/tree" title="en/XUL/tree">tree</a> cell currently being edited, or <code>-1</code> if there is no cell currently being edited.</dd> +</dl></div> <div id="p-enableColumnDrag"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/enableColumnDrag">enableColumnDrag</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>When set to <code>true</code>, the user may drag the column headers around to change the order in which they are displayed.</dd> +</dl></div> <div id="p-firstOrdinalColumn"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/firstOrdinalColumn">firstOrdinalColumn</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> element</em></dd> + <dd>A reference to the first <code><a href="/en-US/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> element, which or may not be the first column displayed in the tree.</dd> +</dl></div> <div id="p-tree.inputField"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/tree.inputField">inputField</a></span></code></dt> + <dd>Type: <em>textbox element</em></dd> + <dd>Read-only property that holds the <code><a href="/en-US/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code> that is used for editing.</dd> +</dl></div> <div id="p-selType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selType">selType</a></span></code> </dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-seltype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code> attribute.</dd> +</dl> +<p> </p></div> <div id="p-selstyle"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/selstyle">selstyle</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + If set to the value <code>primary</code>, only the label of the primary column will be highlighted when an item in the tree is selected. Otherwise, the entire row will be highlighted. To see the difference, compare the selection style in the folder list and the message list in Mozilla mail.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: + <i> + integer</i> + </dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl> + +<p></p></div> <div id="p-treeBoxObject"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/treeBoxObject">treeBoxObject</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeBoxObject" title="">nsITreeBoxObject</a></code></em></dd> + <dd>The box object is responsible for rendering the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> on the window. This object implements the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeBoxObject" title="">nsITreeBoxObject</a></code> interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree. This property is equivalent to the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/boxObject">boxObject</a></span></code> property.</dd> +</dl></div> <div id="p-view"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/view">view</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView" title="">nsITreeView</a></code></em></dd> + <dd> + The view for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code>, which is the object which generates the data to be displayed. You can assign an object which implements <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView" title="">nsITreeView</a></code> to this property. Trees built from RDF or those which use <code><a href="/en-US/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code>s directly will already have a view. Functions available in the view allow one to retrieve the data within the cells, and determine which rows are nested within others. For a complete list of view functions, see the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView" title="">nsITreeView</a></code> interface.</dd> +</dl></div><p></p> + +<h3 id="Methods" name="Methods">Methods</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table> <dl> + <dt><span id="m-startEditing"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/startEditing">startEditing( row, column )</a></code></span> </dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Activates user editing of the given cell, which is specified by row index number and the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeColumn" title="">nsITreeColumn</a></code> in which it is located. The tree view's <code><a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsITreeView#getCellText()">nsITreeView.getCellText()</a></code> method is called to obtain the cell contents.</dd> +</dl> <dl> + <dt><span id="m-stopEditing"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/stopEditing">stopEditing( shouldaccept )</a></code></span> </dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Stops editing the cell currently being edited. If the <code>shouldAccept</code> parameter is <code>true</code>, the cell's label is changed to the edited value (the tree view's <code><a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsITreeView#setCellText()">nsITreeView.setCellText()</a></code> method is called to change the cell contents). Otherwise the cell label is reverted to the value it had prior to editing.</dd> +</dl><p></p> + +<h3 id="Related" name="Related">Related</h3> + +<dl> + <dt>Elements</dt> + <dd><a href="/en/XUL/treecols" title="en/XUL/treecols">treecols</a>, <a href="/en/XUL/treecol" title="en/XUL/treecol">treecol</a>, <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a>, <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a>, <a href="/en/XUL/treerow" title="en/XUL/treerow">treerow</a>, <a href="/en/XUL/treecell" title="en/XUL/treecell">treecell</a> and <a href="/en/XUL/treeseparator" title="en/XUL/treeseparator">treeseparator</a>.</dd> + <dt>Interfaces</dt> + <dd><a href="/en/XPCOM_Interface_Reference/nsIAccessibleProvider" title="en/nsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/en/NsIDOMXULTreeElement" title="en/NsIDOMXULTreeElement">nsIDOMXULTreeElement</a>, <a href="/en/NsIDOMXULMultiSelectControlElement" title="en/NsIDOMXULMultiSelectControlElement">nsIDOMXULMultiSelectControlElement</a></dd> +</dl> + +<h3 id="Script_Examples" name="Script_Examples">Script Examples</h3> + +<p>To have alternating colors for each row, use the style rules like the following: <small>pma at daffodil dot uk dot com</small></p> + +<pre class="script">treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; } +treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; } +treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; } +treechildren::-moz-tree-cell-text(selected) { color: #000000; } +treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } +</pre> + +<p>If using a content tree view, use the following to get the value of the id attribute for each of the selected rows of a tree: <small>tcooper_mont at yahoo dot com</small></p> + +<pre class="script">var idList = []; +var rangeCount = tree.view.selection.getRangeCount(); +for (var i = 0; i < rangeCount; i++) +{ + var start = {}; + var end = {}; + tree.view.selection.getRangeAt(i, start, end); + for(var c = start.value; c <= end.value; c++) + { + idList.push(tree.view.getItemAtIndex(c).firstChild.id); + } +} +</pre> + +<p>The following returns a array of the indicies of the rows where the value is checked in a checkbox type column: <small>jfabre at ismans dot fr</small></p> + +<pre class="script">function getCellChecked(tree, columnid) +{ + var arr = []; + var column = tree.columns.getNamedColumn(columnid); + for (var i = 0; i < tree.view.rowCount; i++){ + if (tree.view.getCellValue(i, column) == 'true') + arr.push(i); + } + return arr; +} +</pre> + +<p>To get the text value for a specific column (e.g. column 'age') from the currently focused row in the tree:</p> + +<pre class="script">var t = document.getElementById('mytree'); +document.title = t.view.getCellText(t.currentIndex,t.columns.getNamedColumn('age')); +</pre> + +<p></p> 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 new file mode 100644 index 0000000000..607e4d0abc --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/adding_buttons/index.html @@ -0,0 +1,98 @@ +--- +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 new file mode 100644 index 0000000000..ef85e01bd1 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/adding_event_handlers/index.html @@ -0,0 +1,161 @@ +--- +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 new file mode 100644 index 0000000000..6e1f8c38c6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/adding_html_elements/index.html @@ -0,0 +1,113 @@ +--- +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 new file mode 100644 index 0000000000..e3850373fc --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/adding_labels_and_images/index.html @@ -0,0 +1,40 @@ +--- +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 new file mode 100644 index 0000000000..9af4cc954f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/adding_more_elements/index.html @@ -0,0 +1,115 @@ +--- +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 new file mode 100644 index 0000000000..630627f941 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/adding_style_sheets/index.html @@ -0,0 +1,10 @@ +--- +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 new file mode 100644 index 0000000000..6362be89f6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/anonymous_content/index.html @@ -0,0 +1,166 @@ +--- +title: XUL_教程/匿名内容 +slug: Mozilla/Tech/XUL/Tutorial/Anonymous_Content +translation_of: Archive/Mozilla/XUL/Tutorial/Anonymous_Content +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/zh-CN/docs/Introduction_to_XBL" style="float: left;">« 上一页</a><a href="/zh-CN/docs/<a_href=">Anonymous_Content</a>">下一页 »</p> +</div><p></p> +<p>在这一节，我们将讲解用XBL创建content。</p> +<h3 id="XBL_Content" name="XBL_Content">XBL Content</h3> +<p>XBL被用来自动在另一个元素中添加一组元素。当内部元素用XBL描述时，XUL文件只需要指定外部元素。对于创建由其它控件构成的单独的控件来说这是很有用的，但只被认为是单独的控件。这里讲解了向由外部元素指定的内部元素添加属性的机理。</p> +<h4 id="Declaring_Scrollbar_Example" name="Declaring_Scrollbar_Example">Declaring Scrollbar Example</h4> +<p>以下的例子指出了滚动条是怎么声明的（从实例简化1bit）</p> +<pre><bindings xmlns="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <binding id="scrollbarBinding"> + <content> + <xul:scrollbarbutton type="decrement"/> + <xul:slider flex="1"> + <xul:thumb/> + </xul:slider> + <xul:scrollbarbutton type="increment"/> + </content> + </binding> +</bindings> +</pre> +<p>这个文件包含一个用binding元素声明的单独的binding。ID属性应该设置为binding的标识符。这会在css文件中设置-moz-binding属性时用到。</p> +<p>content标签被用来声明将被增进滚动条的anonymous content。content标签里的所有元素将被添加进被绑定界面元素内部。这种 binding将被绑定到滚动条，虽然没必要这样。将CSS -moz-binding 属性的设置为binding的URI的任何元素都将使用它。</p> +<p>使用上述 binding会导致下面的XUL的行会如下扩展，假设滚动条与上述的XBL相关联：</p> +<pre class="eval"><scrollbar/> + +<strong>expands to:</strong> + +<scrollbar> + <xul:scrollbarbutton type="decrement"/> + <xul:slider flex="1"> + <xul:thumb/> + </xul:slider> + <xul:scrollbarbutton type="increment"/> +</scrollbar> +</pre> +<p>含有content标签的元素被无记录的添加到滚动条。虽然无记录内容被显示在屏幕上，但在正常方式下，不能通过脚本得到它。对于XUL，就像只有一个元素，尽管它实际上由大量元素构成。</p> +<p>检查 Mozilla窗口中的滚动条，就会发现它由一个arrow按钮、一个slider、内部thumb和一个末尾的second arrow 按钮组成。它们都是XBL上面出现过的元素。这些元素将依次绑定在运用基础XUL元素的其它bindings上。请注意 content元素需要XUL姓名空间（他们出现在XUL之前：），因为他们是XUL元素，而且在XBL中无效。这个命名空间声明在bindings标签内。如果您不想使用XUL元素的命名空间， Mozilla将假定元素都是XBL，不理解这里，您的元素可能不会正常工作。</p> +<h4 id="Filename_Input_Field_Example" name="Filename_Input_Field_Example">Filename Input Field Example</h4> +<p>另一个例子是关于输入一个文件名的域：</p> +<pre><binding id="fileentry"> + <content> + <textbox/> + <button label="Browse..."/> + </content> +</binding> +</pre> +<p>连接这个元素的binding将会导致输入浏览按钮之后的文本时它包含一个域。这个内部内容被匿名的创建了，而且用DOM不能查看到。</p> +<h3 id="Override_the_Bound_Element" name="Override_the_Bound_Element">Override the Bound Element</h3> +<p>Anonymous content被匿名的创建在 binding连接到一个元素的任何地方。如果您在XUL里放置子元素，他们将覆盖由binding提供的元素。例如XUL段，假设它早期与滚动条XBL绑定：(如果在xul文件中，给被绑定界面元素添加子元素，那么会覆盖掉binding中的元素。例如下面的xul片断，假设它被绑定到了前面的scrollbar的binding上)</p> +<pre><scrollbar/> + +<scrollbar> + <button label="Overridden"/> +</scrollbar> +</pre> +<p>第一个滚动条，因为它没有自己的内容，它将从在XBL文件里声明的binding来生成它的内容。第二个滚动条有它自己的内容，因此它将不会运用XBL内容，这产生了不完全是滚动条的产品。请注意比如滚动条这样的内建元素，从toolkit包的bindings目录得到它们的XBL。</p> +<p>这只应用于在content标签内定义的元素。不论content是否从XBL而来或不论XUL是否提供自己的content，XBL的属性、方法和其它方面仍然可用。</p> +<h3 id="Using_the_Children_Element" name="Using_the_Children_Element">Using the Children Element</h3> +<p>当您想将XBL的内容和由XUL文件提供的内容一起都显示出来，可能需要重复几次。您能运用children元素来实现。在XUL中添加的子元素被添加来替代children元素。当创建自定义菜单控件时，这是很容易操作的。例如，一个简单的可编辑的menulist元素，可能如下创建：</p> +<pre class="eval"><strong>XUL:</strong> + +<menu class="dropbox"> + <menupopup> + <menuitem label="1000"/> + <menuitem label="2000"/> + </menupopup> +</menu> + +<strong>CSS:</strong> + +menu.dropbox { + -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#dropbox'</a>); +} + +<strong>XBL:</strong> + +<binding id="dropbox"> + <content> + <children/> + <xul:textbox flex="1"/> + <xul:button src="<a class="external" rel="freelink">chrome://global/skin/images/dropbox.jpg</a>"/> + </content> +</binding> +</pre> +<p>这个例子用旁边的按钮创建了一个输入域，menupopup将添加到由children元素指定位置。请注意对DOM结构来说，这些内容将与在XUL文件中显示的一样，因此menupopup将成为menu的一个子元素。对于开发者来说xbl的内容是看不到的，所以也没必要知道它的位置。</p> +<p>结果内容应该是：</p> +<pre><menu class="dropbox"> + <menupopup> + <menuitem label="1000"/> + <menuitem label="2000"/> + </menupopup> + <textbox flex="1"/> + <button src="chrome://global/skin/images/dropbox.jpg"/> +</menu> +</pre> +<h4 id="includes_Attribute" name="includes_Attribute"><code>includes</code> Attribute</h4> +<p>某些情况下，您可能希望只包括特定类型的内容。或者您只希望在不同的位置放置不同类型的内容。includes属性能够用来使只有某些元素才能在children的内容里出现。它的值应该设定到一个单独的标签名。或者到一个由“|”分隔的标签列表</p> +<pre><children includes="button"/> +</pre> +<p>所有的button将会被添加到被绑定元素的children所指明的位置。其它元素将不会与这个标签匹配。您能够放置多个children 元素到一个binding中，来在不同的地方放置不同类型的内容。如果XUL中一个元素没有匹配任何children元素，那个元素（和其他任何不匹配的元素）将会被用来替代这个绑定的内容。</p> +<p>这里有另一个例子。让我们来介绍一下创建一个控件，并用两边的zoom in 和zoom out 按钮显示图象的方法。这将用一个box来创建，它包含图象和两个按钮。因为每个用法不同，这个图象元素得放置在XBL外部。</p> +<pre class="eval"><strong>XUL:</strong> + +<box class="zoombox"> + <image src="images/happy.jpg"/> + <image src="images/angry.jpg"/> +</box> + +<strong>XBL:</strong> + +<binding id="zoombox"> + <content> + <xul:box flex="1"> + <xul:button label="Zoom In"/> + <xul:box flex="1" style="border: 1px solid black"> + <children includes="image"/> + </xul:box> + <xul:button label="Zoom Out"/> + </xul:box> + </content> +</binding> +</pre> +<p>XUL文件中详述的子元素将放置在children标签位置。有两幅图象，因此两个都将被添加到彼此的旁边。显示结果等价如下：</p> +<pre><binding id="zoombox"> + <content> + <xul:box flex="1"> + <xul:button label="Zoom In"/> + <xul:box flex="1" style="border: 1px solid black"> + <xul:image src="images/happy.jpg"/> + <xul:image src="images/angry.jpg"/> + </xul:box> + <xul:button label="Zoom Out"/> + </xul:box> + </content> +</binding> +</pre> +<p>从 DOM的观点来看，子元素仍然在初始的存储单元。这就是说，外部的XUL box有两个子元素，它们是这两幅图像。里边带边框的box有一个子元素，就是children 标签。当使用带XBL的DOM时，这是一个重要的区别。这也可以应用于CSS选择器规则。</p> +<h4 id="Multiple_Children_Elements" name="Multiple_Children_Elements">多个子元素</h4> +<p>您也能够使用多个children元素而且可以把某些元素放置在一个地方，其它元素放置在其它地方，通过添加一个includes属性和将它设置成标签的垂直的bar-separated列表，您能够使得只有在那个列表里的元素被放置在那个地方。例如，下面的XBL将导致文本标签和按钮出现在与其他元素不同的地方。</p> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblcontent_1.xml.txt">Source</a></p> +<pre><binding id="navbox"> + <content> + <xul:vbox> + <xul:label value="Labels and Buttons"/> + <children includes="label|button"/> + </xul:vbox> + <xul:vbox> + <xul:label value="Other Elements"/> + <children/> + </xul:vbox> + </content> +</binding> +</pre> +<p>第一个children元素只含有标签和按钮元素，正如它的includes属性指示的一样。第二个children元素因为它没有includes属性，它将包含所有的剩余的元素。</p> +<p>See also <a href="/en/XBL/XBL_1.0_Reference/Anonymous_Content" title="en/XBL/XBL_1.0_Reference/Anonymous_Content">Anonymous Content</a> section of the XBL reference.</p> +<p>(Next)在下一节，我们将研究属性如何被继承到 anonymous content中.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/zh-CN/docs/Introduction_to_XBL" style="float: left;">« 上一页</a><a href="/zh-CN/docs/<a_href=">Anonymous_Content</a>">下一页 »</p> +</div><p></p> 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 new file mode 100644 index 0000000000..7b647957ba --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/box_model_details/index.html @@ -0,0 +1,6 @@ +--- +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 new file mode 100644 index 0000000000..b2909f9a05 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/content_panels/index.html @@ -0,0 +1,63 @@ +--- +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 new file mode 100644 index 0000000000..4fabb4c388 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_skin/index.html @@ -0,0 +1,177 @@ +--- +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 new file mode 100644 index 0000000000..5a7329bac3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/creating_a_window/index.html @@ -0,0 +1,116 @@ +--- +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 new file mode 100644 index 0000000000..aef43ec39b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/creating_an_installer/index.html @@ -0,0 +1,98 @@ +--- +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 new file mode 100644 index 0000000000..1b3dbb2fab --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/creating_dialogs/index.html @@ -0,0 +1,6 @@ +--- +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 new file mode 100644 index 0000000000..15112d1cc7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/document_object_model/index.html @@ -0,0 +1,220 @@ +--- +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 new file mode 100644 index 0000000000..df6c75dee6 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/element_positioning/index.html @@ -0,0 +1,254 @@ +--- +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 new file mode 100644 index 0000000000..cae533b206 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/features_of_a_window/index.html @@ -0,0 +1,6 @@ +--- +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 new file mode 100644 index 0000000000..47201b797c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html @@ -0,0 +1,175 @@ +--- +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 new file mode 100644 index 0000000000..c62dd0f004 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/groupboxes/index.html @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..a164d16f7f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/index.html @@ -0,0 +1,171 @@ +--- +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 new file mode 100644 index 0000000000..d901c50eeb --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/input_controls/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..5e80393d30 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/introduction/index.html @@ -0,0 +1,70 @@ +--- +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 new file mode 100644 index 0000000000..03e0c64a88 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/introduction_to_rdf/index.html @@ -0,0 +1,109 @@ +--- +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 new file mode 100644 index 0000000000..27486e030b --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/list_controls/index.html @@ -0,0 +1,133 @@ +--- +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 new file mode 100644 index 0000000000..ffa7dd99de --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/localization/index.html @@ -0,0 +1,296 @@ +--- +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 new file mode 100644 index 0000000000..10dcc5a2dd --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/manifest_files/index.html @@ -0,0 +1,113 @@ +--- +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 new file mode 100644 index 0000000000..3ee3d691e0 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/modifying_a_xul_interface/index.html @@ -0,0 +1,118 @@ +--- +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 new file mode 100644 index 0000000000..5bf9abae27 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/modifying_the_default_skin/index.html @@ -0,0 +1,63 @@ +--- +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 new file mode 100644 index 0000000000..a5dc1c3a54 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/more_button_features/index.html @@ -0,0 +1,216 @@ +--- +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 new file mode 100644 index 0000000000..efb14f298f --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/more_event_handlers/index.html @@ -0,0 +1,183 @@ +--- +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 new file mode 100644 index 0000000000..30cc1b3046 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/more_menu_features/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..48648bb971 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/more_wizards/index.html @@ -0,0 +1,64 @@ +--- +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 new file mode 100644 index 0000000000..310abf97a4 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/numeric_controls/index.html @@ -0,0 +1,78 @@ +--- +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 new file mode 100644 index 0000000000..026ec62f83 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/popup_menus/index.html @@ -0,0 +1,6 @@ +--- +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 new file mode 100644 index 0000000000..bacf39b352 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/progress_meters/index.html @@ -0,0 +1,58 @@ +--- +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 new file mode 100644 index 0000000000..a5800e69f9 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/property_files/index.html @@ -0,0 +1,97 @@ +--- +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 new file mode 100644 index 0000000000..b4d4c51238 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/rdf_datasources/index.html @@ -0,0 +1,267 @@ +--- +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 new file mode 100644 index 0000000000..ea21fc9535 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/scroll_bars/index.html @@ -0,0 +1,9 @@ +--- +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 new file mode 100644 index 0000000000..e484aba178 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/scrolling_menus/index.html @@ -0,0 +1,45 @@ +--- +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 new file mode 100644 index 0000000000..a9179852f7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/simple_menu_bars/index.html @@ -0,0 +1,159 @@ +--- +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 new file mode 100644 index 0000000000..172190858c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/splitters/index.html @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..40712df82e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html @@ -0,0 +1,30 @@ +--- +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 new file mode 100644 index 0000000000..39aa1762a1 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/stacks_and_decks/index.html @@ -0,0 +1,71 @@ +--- +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 new file mode 100644 index 0000000000..7574e792b7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/styling_a_tree/index.html @@ -0,0 +1,12 @@ +--- +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 new file mode 100644 index 0000000000..c8c3e527c7 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html @@ -0,0 +1,125 @@ +--- +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 new file mode 100644 index 0000000000..01b1eb0cf4 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/templates/index.html @@ -0,0 +1,77 @@ +--- +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 new file mode 100644 index 0000000000..be0bf1832c --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/the_box_model/index.html @@ -0,0 +1,39 @@ +--- +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 new file mode 100644 index 0000000000..817869f2d2 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/the_chrome_url/index.html @@ -0,0 +1,74 @@ +--- +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 new file mode 100644 index 0000000000..4ba0a4e2e3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/toolbars/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..6162b31e6a --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/trees/index.html @@ -0,0 +1,8 @@ +--- +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 new file mode 100644 index 0000000000..7501f87216 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/using_spacers/index.html @@ -0,0 +1,111 @@ +--- +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 new file mode 100644 index 0000000000..04c8ab7123 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/using_xbl_from_stylesheets/index.html @@ -0,0 +1,223 @@ +--- +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 new file mode 100644 index 0000000000..6b6ef8288e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/xbl介绍/index.html @@ -0,0 +1,104 @@ +--- +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 new file mode 100644 index 0000000000..fb2dbb3699 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/xpcom_接口/index.html @@ -0,0 +1,179 @@ +--- +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 new file mode 100644 index 0000000000..5983802be3 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/xul_structure/index.html @@ -0,0 +1,43 @@ +--- +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 new file mode 100644 index 0000000000..4a72667660 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/更多的按钮特性/index.html @@ -0,0 +1,68 @@ +--- +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> diff --git a/files/zh-cn/mozilla/tech/xul/vbox/index.html b/files/zh-cn/mozilla/tech/xul/vbox/index.html new file mode 100644 index 0000000000..eb23c89d10 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/vbox/index.html @@ -0,0 +1,130 @@ +--- +title: vbox +slug: Mozilla/Tech/XUL/vbox +tags: + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/vbox +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> + +<p>A container element which can contain any number of child elements. This is equivalent to the <code><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> element, except it defaults to vertical orientation.<br> + 一个可以包含任何子元素的容器元素。这相当于默认为垂直方向的<code style="font-style: normal;"><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 元素。</p> + +<p>More information is available in the <a href="en/XUL_Tutorial/The_Box_Model">XUL tutorial</a>.<br> + 更多信息参考<a href="en/XUL_Tutorial/The_Box_Model">XUL tutorial</a>。</p> + +<h3 id="Example" name="Example">Example</h3> + +<h3 id="示例">示例</h3> + +<p><img alt="vbox example" src="https://mdn.mozillademos.org/files/7213/example.png" style="width: 94px; height: 46px;"></p> + +<pre><!-- Two labels at bottom --> +<vbox> + <spacer flex="1"/> + <label value="One"/> + <label value="Two"/> +</vbox> +</pre> + +<h3 id="Attributes" name="Attributes">Attributes</h3> + +<h3 id="属性">属性</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> + +<h3 id="Properties" name="Properties">Properties</h3> + +<h3 id="特性">特性</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> + +<h3 id="Methods" name="Methods">Methods</h3> + +<h3 id="方法">方法</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> + +<h3 id="Related" name="Related">Related</h3> + +<h3 id="相关">相关</h3> + +<dl> + <dt>Elements<br> + 元素</dt> + <dd><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></dd> +</dl> + +<p> </p> + +<div class="noinclude"> </div> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/window/index.html b/files/zh-cn/mozilla/tech/xul/window/index.html new file mode 100644 index 0000000000..f748259648 --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/window/index.html @@ -0,0 +1,281 @@ +--- +title: window +slug: Mozilla/Tech/XUL/window +translation_of: Archive/Mozilla/XUL/window +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/zh-CN/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">示例</a> | + <a href="#Attributes">属性</a> | + <a href="#Properties">特性</a> | + <a href="#Methods">方法</a> | + <a href="#Related">相关</a> ] +</span></div> + +<p>window标签用来描述一个窗口的顶级结构，在 XUL文档中，他是一个根节点。默认情况下，它里面的控件是水平排列的。作为一个box容器， <a class="internal" href="/en/XUL/box" title="en/XUL/box">box</a>的属性都可以被使用. 默认的, 窗口将有一个特定于平台的框架围绕着他。</p> + +<p>如果需要给窗口添加一个图标，你需要首先创建一个 icon 文件，也就是例如 <var><windowid></var><code>.ico</code> 和 <var><windowid></var><code>.xpm</code> ，然后将他们放置到 <var>项目文件夹的</var><code>/chrome/icons/default/</code> 目录下. 这里所说的的 <var><windowid></var> 是此窗口内window标签的id. 这样，您就能为每个窗口设置不同的图标了。</p> + +<p>如果没有将 "<span class="nowiki">chrome://global/skin/</span>"下的指定css文件引用进来, 此窗口将不能正常加载 ，有可能看不见 或者被打开的时候出现漏洞.</p> + +<div class="note"> +<p><strong>注意:</strong> 通过<span title="(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)">Gecko 1.9.2</span>标记, 当一个窗口通过查看动作引起的“激活”或“失活”事件被“激活”或“失活”时，你可以侦测到。这方面的信息，请查看 <a href="/en/XUL/Events#Window_activation_events" title="https://developer.mozilla.org/en/XUL/Events#Window_activation_events">窗口激活事件</a>.</p> +</div> + +<p>更多的信息请查看 <a href="/en/XUL_Tutorial/Creating_a_Window" title="en/XUL_Tutorial/Creating_a_Window">XUL tutorial</a>.</p> + +<dl> + <dt>标记属性</dt> + <dd><a href="#a-accelerated">accelerated</a>, <a href="#a-chromemargin">chromemargin</a>, <a href="#a-disablechrome">disablechrome</a>, <a href="#a-disablefastfind">disablefastfind</a>, <a href="#a-drawintitlebar">drawintitlebar</a>, <a href="#a-fullscreenbutton">fullscreenbutton</a>, <a href="#a-height">height</a>, <a href="#a-hidechrome">hidechrome</a>, <a href="#a-id">id</a>, <a href="#a-lightweightthemes">lightweightthemes</a>, <a href="#a-lightweightthemesfooter">lightweightthemesfooter</a>, <a href="#a-screenX">screenX</a>, <a href="#a-screenY">screenY</a>, <a href="#a-sizemode">sizemode</a>, <a href="#a-title">title</a>, <a href="#a-width">width</a>, <a href="#a-windowtype">windowtype</a></dd> +</dl> + +<h3 id="Examples" name="Examples">实例</h3> + +<pre class="brush: xml"><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<!-- Extremely recommended to keep this css include!! --> +<window id="rootWnd" title="Register Online!" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox> + <hbox> + <image src="application_form.png"/> + <description>Register Online!</description> + </hbox> + <groupbox align="start"> + <caption label="Your Information"/> + <radiogroup> + <vbox> + <hbox> + <label control="your-fname" value="Enter first name:"/> + <textbox id="your-fname" value="Johan"/> + </hbox> + <hbox> + <label control="your-lname" value="Enter last name:"/> + <textbox id="your-lname" value="Hernandez"/> + </hbox> + <hbox> + <button oncommand="alert('save!')"> + <description>Save</description> + </button> + </hbox> + </vbox> + </radiogroup> + </groupbox> + </vbox> +</window> +</pre> + +<h3 id="Attributes" name="Attributes">标记属性</h3> + +<p></p><div id="a-accelerated"> +<dl><dt><code id="a-accelerated"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/accelerated">accelerated</a></code> </dt><dd>Type: <em>boolean</em></dd><dd>Set this attribute to <code>true</code> to allow hardware layer managers to accelerate the window.</dd></dl> +</div><div id="a-activetitlebarcolor"> + +<dl> + <dt> + <code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt> + <dd> + Type: <em>color string</em></dd> + <dd> + Specify background color of the window's titlebar when it is active (foreground). Moreover this hides separator between titlebar and window contents. <em>This only affects Mac OS X.</em></dd> +</dl> + +<p> </p> +</div><div id="a-chromemargin"> + +<dl> <dt><code id="a-chromemargin"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/chromemargin">chromemargin</a></code> </dt> <dd>Type: <em>margin string</em></dd> <dd>Controls the amount of chrome that should be visible on each side of the window. The specified string should contain four numbers, separated by commas, indicating the margin in pixels for the top, right, bottom, and left edges of the window, respectively. This value may be -1 to use the default margin for that side on the current platform, 0 to have no system border (that is, to extend the client area to the edge of the window), or a value greater than zero to indicate how much less than the default default width you wish the margin on that side to be. If this value turns out to be less than 0, 0 is used.</dd> +</dl> +</div><div id="a-disablechrome"> + +<dl> <dt><code id="a-disablechrome"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disablechrome">disablechrome</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd>Set this attribute to <code>true</code> to disable chrome in the window. This is used to hide chrome when showing in-browser UI such as the <code>about:addons</code> page, and causes the toolbars to be hidden, with only the tab strip (and, if currently displayed, the add-on bar) left showing.</dd> <div class="note"><strong>Note:</strong> This has no effect if the tabs on top preference is turned off.</div> +</dl> +</div><div id="a-disablefastfind"> +<dl><dt><code id="a-disablefastfind"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disablefastfind">disablefastfind</a></code></dt><dd>Type: <em>boolean</em></dd><dd>Put <code>disablefastfind="true"</code> on the root element of a XUL document, which is intended to be loaded in a tab, to disable the find bar for the tab with this document. This is used to prevent the find bar from being displayed when it's not supported by the content (such as in the Add-ons manager tab).</dd></dl> +</div><div id="a-drawintitlebar"> + +<dl> <dt><code id="a-drawintitlebar"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/drawintitlebar">drawintitlebar</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd>If this attribute is <code>true</code>, the top of the window's content area will begin at the top edge of the title bar, instead of below the title bar. This allows the window to draw in the title bar. This is supported only from <code><a href="/en-US/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> elements, and is ignored on platforms that don't support drawing into the title bar.</dd> +</dl> +</div><div id="a-fullscreenbutton"> + +<dl> <dt><code id="a-fullscreenbutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/fullscreenbutton">fullscreenbutton</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd>Set this attribute to <code>true</code> to display a button in the window chrome to allow the user to switch the window into full screen mode. Supported on Mac OS X 10.7 Lion and later and on Windows. The window receives a "fullscreen" event once the change has been made.</dd> +</dl> +</div><div id="a-height"> + + +<dl> + <dt><code id="a-height"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.</dd> +</dl> +</div><div id="a-hidechrome"> + + +<dl> + <dt><code id="a-hidechrome"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidechrome">hidechrome</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set this attribute to <code>true</code> to have the chrome including the titlebar hidden.</dd> +</dl> +</div><div id="a-id"> + +<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> + 类型: <em>元素的ID，在主窗口中必须唯一</em></dd> + <dd> + 一个唯一的标识一边开发者能够定义. 你可以使用方法 <code><a href="/cn/DOM/document.getElementById" title="cn/DOM/document.getElementById">getElementById()</a></code> 或者其他 DOM 的函数并在样式表中添加对元素的引用。</dd> +</dl> + +<p></p> +</div><div id="a-inactivetitlebarcolor"> + + +<dl> + <dt><code id="a-inactivetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a></code> </dt> + <dd>Type: <em>color string</em></dd> + <dd>Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. <em>This affects only on Mac OS X.</em></dd> +</dl> +</div><div id="a-lightweightthemes"> + +<dl> <dt><code id="a-lightweightthemes"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/lightweightthemes">lightweightthemes</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd><code>true</code> if the window supports <a href="/en/Themes/Lightweight_themes" title="en/Themes/Lightweight themes">lightweight themes</a>, otherwise <code>false</code>.</dd> +</dl> +</div><div id="a-lightweightthemesfooter"> + +<dl> <dt><code id="a-lightweightthemesfooter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/lightweightthemesfooter">lightweightthemesfooter</a></code> </dt> <dd>Type: <em>id</em></dd> <dd>Specifies the ID of an element to which a <a href="/en/Themes/Lightweight_themes" title="en/Themes/Lightweight themes">lightweight theme</a>'s footer image will be applied.</dd> +</dl> +</div><div id="a-screenX"> + + +<dl> + <dt><code id="a-screenX"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/screenX">screenX</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>The horizontal position at which the window appears on the screen.</dd> +</dl> +</div><div id="a-screenY"> + + +<dl> + <dt><code id="a-screenY"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/screenY">screenY</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>The vertical position at which the window appears on the screen.</dd> +</dl> +</div><div id="a-sizemode"> + + +<dl> + <dt><code id="a-sizemode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sizemode">sizemode</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The state of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/window" title="window">window</a></code>. It can have one of the following values:</dd> + <dd> + <dl> + <dt><code>maximized</code></dt> + <dd>The window is maximized, and occupies the full size of the screen.</dd> + <dt><code>normal</code></dt> + <dd>The window appears in a normal state at the desired size.</dd> + </dl> + </dd> +</dl> + +<p>This attribute is used to save and restore the state of a window (together with the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/persist">persist</a></span></code> attribute) and for CSS styles (e.g. to hide the resizer grippy on maximized windows).</p> + +<div class="note"><strong>Note:</strong> When a window is minimized, the <code>sizemode</code> attribute is not updated. This is done so that if a window is closed while minimized, its persisted <code>sizemode</code> attribute wouldn't be <code>minimized</code>.</div> + +<p>Setting this attribute does not change the window state. Use <a href="/en-US/docs/Web/API/Window/maximize" title="The documentation about this has not yet been written; please consider contributing!"><code>window.maximize()</code></a>, <a href="/en-US/docs/Web/API/Window/restore" title="This method is currently not working, but you can use:"><code>window.restore()</code></a>, or <a href="/en-US/docs/Web/API/Window/minimize" title="The Window.minimize() method sets the window to a minimized state."><code>window.minimize()</code></a> to change the window state.</p> + +<p>To get the window state from JavaScript code, use <a href="/en-US/docs/Web/API/Window/windowState" title="The windowState read-only property of the Window interface returns the window's current state."><code>window.windowState</code></a>. Listen to the <a href="/en/XUL/Events#Window_events" title="en/XUL/Events#Window_events"><code>sizemodechange</code> event</a> dispatched to the DOM window to get notified when the window state changes.</p> + + +</div><div id="a-title"> + + +<dl> + <dt><code id="a-title"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The text to appear in the title bar of the window.</dd> +</dl> +</div><div id="a-width"> + + +<dl> + <dt><code id="a-width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.</dd> +</dl> + + +</div><div id="a-windowtype"> + +<dl> + <dt> + <code id="a-windowtype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/windowtype">windowtype</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Set to a string which can be used to identify the type of window. This might be used, for example, to distinguish between a browser window and an editor window. Some of Mozilla's window handling functions use this attribute to group windows of the same type together.</dd> +</dl> +<div class="note"> + <p>Values for window type as found on MXR: <a href="http://mxr.mozilla.org/mozilla-release/search?string=windowtype">http://mxr.mozilla.org/mozilla-release/search?string=windowtype</a></p> + <p><strong>navigator:browser </strong>- Looks like if window has gBrowser it has this window type</p> + <p><strong>devtools:scratchpad </strong>- Scratchpad windows</p> + <p><strong>navigator:view-source</strong> - The view source windows</p> +</div> + +<p> </p> +</div><p></p> + +<h3 id="Properties" name="Properties">属性</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited Properties</strong><br> <small> <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/zh-CN/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> + +<h3 id="Methods" name="Methods">方法</h3> + +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Inherited from XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Inherited from DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> + +<p>另请参阅: <a href="/en/DOM/window#Methods" title="en/DOM/window#Methods">DOM <code>window</code> object methods</a><strong> </strong></p> + +<h3 id="Note" name="Note">请注意</h3> + +<p>DTD文件如果丢失或者不可访问，而XUL文件中却引用了其中的内容，将会引起 "XML Parsing Error: undefined entity...<window" 的错误。DOCTYPE声明中系统关键字后如果含有文件名，将会引起没有提示的加载失败， 而唯一的错误提示将会是在下一个XUL元素加载时出现未定义实体的错误。</p> + +<h3 id="Related" name="Related">关联元素</h3> + +<dl> + <dd><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code>, <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/dialogheader" title="dialogheader">dialogheader</a></code></dd> +</dl> + +<h3 id="相关的话题">相关的话题</h3> + +<dl> +</dl> + +<h4 id="用户注意事项">用户注意事项</h4> + +<p>如果要更改窗口标题栏中的图标， 请参考这里： <a href="/en/Window_icons" title="en/Window_icons">Window icons</a>.</p> + +<p>如果要将小图标添加到地址栏和浏览器选项卡(即对话框不是弹出)，请使用下面的代码片段来使用html名称空间和链接。</p> + +<pre class="brush: xml"><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + +<!-- Icon from chrome --> +<html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png"/> + +<!-- From a remote site --> +<html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> +</pre> + +<p>由于Firefox3.6之前的代码不能正常工作 ——会出现以下提示: "Warning: XUL box for box element contained an inline link child, forcing all its children to be wrapped in a block". 如果这段代码放在window标签之间， 它将会使窗口内的所有其他控件都变得乱七八糟.而如果放在 <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/box" title="box">box</a></code> 标签之间, 窗口控件呈现反而很不错, 但是依然会引起错误。 这一问题可以如下解决:</p> + +<pre class="brush: xml"><html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png" style="display:none"/> +</pre> + +<p>or</p> + +<pre class="brush: xml"><html:head> + <html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png"/> +</html:head> +</pre> + +<p></p> diff --git a/files/zh-cn/mozilla/tech/xul/xul_reference/index.html b/files/zh-cn/mozilla/tech/xul/xul_reference/index.html new file mode 100644 index 0000000000..829a2a260e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/xul_reference/index.html @@ -0,0 +1,20 @@ +--- +title: XUL Reference +slug: Mozilla/Tech/XUL/XUL_Reference +tags: + - XUL + - XUL Reference +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +<p>« <a href="/en-US/docs/XUL" title="en-US/XUL">XUL Reference</a> «</p> +<table class="fullwidth-table"> <tbody> <tr> <th colspan="3">全部 XUL 元素 (按英文字母顺序排列)</th> </tr> <tr> <td> <p><a href="/zh-cn/XUL/action" title="zh-cn/XUL/action">action</a><br> <a href="/ja/XUL/arrowscrollbox" title="ja/XUL/arrowscrollbox">arrowscrollbox</a><br> <a href="/ja/XUL/assign" title="ja/XUL/assign">assign</a><br> <a href="/ja/XUL/bbox" title="ja/XUL/bbox">bbox</a><br> <a href="/ja/XUL/binding" title="ja/XUL/binding">binding</a><br> <a href="/ja/XUL/bindings" title="ja/XUL/bindings">bindings</a><br> <a href="/ja/XUL/box" title="ja/XUL/box">box</a><br> <a href="/ja/XUL/broadcaster" title="ja/XUL/broadcaster">broadcaster</a><br> <a href="/ja/XUL/broadcasterset" title="ja/XUL/broadcasterset">broadcasterset</a><br> <a href="/ja/XUL/button" title="ja/XUL/button">button</a><br> <a href="/ja/XUL/browser" title="ja/XUL/browser">browser</a><br> <a href="/ja/XUL/checkbox" title="ja/XUL/checkbox">checkbox</a><br> <a href="/ja/XUL/caption" title="ja/XUL/caption">caption</a><br> <a href="/ja/XUL/colorpicker" title="ja/XUL/colorpicker">colorpicker</a><br> <a href="/ja/XUL/column" title="ja/XUL/column">column</a><br> <a href="/ja/XUL/columns" title="ja/XUL/columns">columns</a><br> <a href="/ja/XUL/commandset" title="ja/XUL/commandset">commandset</a><br> <a href="/ja/XUL/command" title="ja/XUL/command">command</a><br> <a href="/ja/XUL/conditions" title="ja/XUL/conditions">conditions</a><br> <a href="/ja/XUL/content" title="ja/XUL/content">content</a><br> <a href="/ja/XUL/datepicker" title="ja/XUL/datepicker">datepicker</a><br> <a href="/ja/XUL/deck" title="ja/XUL/deck">deck</a><br> <a href="/ja/XUL/description" title="ja/XUL/description">description</a><br> <a href="/ja/XUL/dialog" title="ja/XUL/dialog">dialog</a><br> <a href="/ja/XUL/dialogheader" title="ja/XUL/dialogheader">dialogheader</a><br> <a href="/ja/XUL/dropmarker" title="ja/XUL/dropmarker">dropmarker</a><br> <a href="/ja/XUL/editor" title="ja/XUL/editor">editor</a><br> <a href="/ja/XUL/grid" title="ja/XUL/grid">grid</a><br> <a href="/ja/XUL/grippy" title="ja/XUL/grippy">grippy</a><br> <a href="/ja/XUL/groupbox" title="ja/XUL/groupbox">groupbox</a><br> <a href="/ja/XUL/hbox" title="ja/XUL/hbox">hbox</a><br> <a href="/ja/XUL/iframe" title="ja/XUL/iframe">iframe</a><br> <a href="/ja/XUL/image" title="ja/XUL/image">image</a><br> <a href="/ja/XUL/key" title="ja/XUL/key">key</a><br> <a href="/ja/XUL/keyset" title="ja/XUL/keyset">keyset</a><br> <a href="/ja/XUL/label" title="ja/XUL/label">label</a><br> <a href="/ja/XUL/listbox" title="ja/XUL/listbox">listbox</a><br> <a href="/ja/XUL/listcell" title="ja/XUL/listcell">listcell</a><br> <a href="/ja/XUL/listcol" title="ja/XUL/listcol">listcol</a><br> <a href="/ja/XUL/listcols" title="ja/XUL/listcols">listcols</a><br> <a href="/ja/XUL/listhead" title="ja/XUL/listhead">listhead</a><br> <a href="/ja/XUL/listheader" title="ja/XUL/listheader">listheader</a><br> <a href="/ja/XUL/listitem" title="ja/XUL/listitem">listitem</a></p> </td> <td> <p><a href="/ja/XUL/member" title="ja/XUL/member">member</a><br> <a href="/ja/XUL/menu" title="ja/XUL/menu">menu</a><br> <a href="/ja/XUL/menubar" title="ja/XUL/menubar">menubar</a><br> <a href="/ja/XUL/menuitem" title="ja/XUL/menuitem">menuitem</a><br> <a href="/ja/XUL/menulist" title="ja/XUL/menulist">menulist</a><br> <a href="/ja/XUL/menupopup" title="ja/XUL/menupopup">menupopup</a><br> <a href="/ja/XUL/menuseparator" title="ja/XUL/menuseparator">menuseparator</a><br> <a href="/ja/XUL/notification" title="ja/XUL/notification">notification</a><br> <a href="/ja/XUL/notificationbox" title="ja/XUL/notificationbox">notificationbox</a><br> <a href="/ja/XUL/observes" title="ja/XUL/observes">observes</a><br> <a href="/ja/XUL/overlay" title="ja/XUL/overlay">overlay</a><br> <a href="/ja/XUL/page" title="ja/XUL/page">page</a><br> <a href="/ja/XUL/panel" title="ja/XUL/panel">panel</a><br> <a href="/ja/XUL/param" title="ja/XUL/param">param</a><br> <a href="/ja/XUL/popupset" title="ja/XUL/popupset">popupset</a><br> <a href="/ja/XUL/preference" title="ja/XUL/preference">preference</a><br> <a href="/ja/XUL/preferences" title="ja/XUL/preferences">preferences</a><br> <a href="/ja/XUL/prefpane" title="ja/XUL/prefpane">prefpane</a><br> <a href="/ja/XUL/prefwindow" title="ja/XUL/prefwindow">prefwindow</a><br> <a href="/ja/XUL/progressmeter" title="ja/XUL/progressmeter">progressmeter</a><br> <a href="/ja/XUL/query" title="ja/XUL/query">query</a><br> <a href="/ja/XUL/queryset" title="ja/XUL/queryset">queryset</a><br> <a href="/ja/XUL/radio" title="ja/XUL/radio">radio</a><br> <a href="/ja/XUL/radiogroup" title="ja/XUL/radiogroup">radiogroup</a><br> <a href="/ja/XUL/resizer" title="ja/XUL/resizer">resizer</a><br> <a href="/ja/XUL/richlistbox" title="ja/XUL/richlistbox">richlistbox</a><br> <a href="/ja/XUL/richlistitem" title="ja/XUL/richlistitem">richlistitem</a><br> <a href="/ja/XUL/row" title="ja/XUL/row">row</a><br> <a href="/ja/XUL/rows" title="ja/XUL/rows">rows</a><br> <a href="/ja/XUL/rule" title="ja/XUL/rule">rule</a><br> <a href="/ja/XUL/scale" title="ja/XUL/scale">scale</a><br> <a href="/ja/XUL/script" title="ja/XUL/script">script</a><br> <a href="/ja/XUL/scrollbar" title="ja/XUL/scrollbar">scrollbar</a><br> <a href="/ja/XUL/scrollbox" title="ja/XUL/scrollbox">scrollbox</a><br> <a href="/ja/XUL/scrollcorner" title="ja/XUL/scrollcorner">scrollcorner</a><br> <a href="/ja/XUL/separator" title="ja/XUL/separator">separator</a><br> <a href="/ja/XUL/spacer" title="ja/XUL/spacer">spacer</a><br> <a href="/ja/XUL/spinbuttons" title="ja/XUL/spinbuttons">spinbuttons</a><br> <a href="/ja/XUL/splitter" title="ja/XUL/splitter">splitter</a><br> <a href="/ja/XUL/stack" title="ja/XUL/stack">stack</a><br> <a href="/ja/XUL/statusbar" title="ja/XUL/statusbar">statusbar</a></p> </td> <td> <p><a href="/ja/XUL/statusbarpanel" title="ja/XUL/statusbarpanel">statusbarpanel</a><br> <a href="/ja/XUL/stringbundle" title="ja/XUL/stringbundle">stringbundle</a><br> <a href="/ja/XUL/stringbundleset" title="ja/XUL/stringbundleset">stringbundleset</a><br> <a href="/ja/XUL/tab" title="ja/XUL/tab">tab</a><br> <a href="/ja/XUL/tabbrowser" title="ja/XUL/tabbrowser">tabbrowser</a> (Firefox 3/Gecko 1.9 开始只用于Firefox本身)<br> <a href="/ja/XUL/tabbox" title="ja/XUL/tabbox">tabbox</a><br> <a href="/ja/XUL/tabpanel" title="ja/XUL/tabpanel">tabpanel</a><br> <a href="/ja/XUL/tabpanels" title="ja/XUL/tabpanels">tabpanels</a><br> <a href="/ja/XUL/tabs" title="ja/XUL/tabs">tabs</a><br> <a href="/ja/XUL/template" title="ja/XUL/template">template</a><br> <a href="/ja/XUL/textnode" title="ja/XUL/textnode">textnode</a><br> <a href="/ja/XUL/textbox" title="ja/XUL/textbox">textbox</a><br> <a href="/ja/XUL/textbox_(Firefox_autocomplete)" title="ja/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br> <a href="/ja/XUL/textbox_(Mozilla_autocomplete)" title="ja/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br> <a href="/ja/XUL/timepicker" title="ja/XUL/timepicker">timepicker</a><br> <a href="/ja/XUL/titlebar" title="ja/XUL/titlebar">titlebar</a><br> <a href="/ja/XUL/toolbar" title="ja/XUL/toolbar">toolbar</a><br> <a href="/ja/XUL/toolbarbutton" title="ja/XUL/toolbarbutton">toolbarbutton</a><br> <a href="/ja/XUL/toolbargrippy" title="ja/XUL/toolbargrippy">toolbargrippy</a><br> <a href="/ja/XUL/toolbaritem" title="ja/XUL/toolbaritem">toolbaritem</a><br> <a href="/ja/XUL/toolbarpalette" title="ja/XUL/toolbarpalette">toolbarpalette</a><br> <a href="/ja/XUL/toolbarseparator" title="ja/XUL/toolbarseparator">toolbarseparator</a><br> <a href="/ja/XUL/toolbarset" title="ja/XUL/toolbarset">toolbarset</a><br> <a href="/ja/XUL/toolbarspacer" title="ja/XUL/toolbarspacer">toolbarspacer</a><br> <a href="/ja/XUL/toolbarspring" title="ja/XUL/toolbarspring">toolbarspring</a><br> <a href="/ja/XUL/toolbox" title="ja/XUL/toolbox">toolbox</a><br> <a href="/ja/XUL/tooltip" title="ja/XUL/tooltip">tooltip</a><br> <a href="/ja/XUL/tree" title="ja/XUL/tree">tree</a><br> <a href="/ja/XUL/treecell" title="ja/XUL/treecell">treecell</a><br> <a href="/ja/XUL/treechildren" title="ja/XUL/treechildren">treechildren</a><br> <a href="/ja/XUL/treecol" title="ja/XUL/treecol">treecol</a><br> <a href="/ja/XUL/treecols" title="ja/XUL/treecols">treecols</a><br> <a href="/ja/XUL/treeitem" title="ja/XUL/treeitem">treeitem</a><br> <a href="/ja/XUL/treerow" title="ja/XUL/treerow">treerow</a><br> <a href="/ja/XUL/treeseparator" title="ja/XUL/treeseparator">treeseparator</a><br> <a href="/ja/XUL/triple" title="ja/XUL/triple">triple</a><br> <a href="/ja/XUL/vbox" title="ja/XUL/vbox">vbox</a><br> <a href="/ja/XUL/where" title="ja/XUL/where">where</a><br> <a href="/ja/XUL/window" title="ja/XUL/window">window</a><br> <a href="/ja/XUL/wizard" title="ja/XUL/wizard">wizard</a><br> <a href="/ja/XUL/wizardpage" title="ja/XUL/wizardpage">wizardpage</a></p> </td> </tr> </tbody> +</table> +<h1 id="XUL_参考">XUL 参考</h1> +<p>« <a href="/en-US/docs/XUL" title="en-US/XUL">XUL Reference</a> «</p> +<table class="fullwidth-table"> <tbody> <tr> <th colspan="3">XUL 要素 (按类别排序)</th> </tr> <tr> <td> <p><u><strong>WINDOWS</strong></u></p> <p><a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a><br> <a href="/en/XUL/overlay" title="en/XUL/overlay">overlay</a><br> <a href="/en/XUL/page" title="en/XUL/page">page</a><br> <a href="/en/XUL/window" title="en/XUL/window">window</a><br> <a href="/en/XUL/wizard" title="en/XUL/wizard">wizard</a><br> <a href="/en/XUL/wizardpage" title="en/XUL/wizardpage">wizardpage</a><br> <a href="/en/XUL/preference" title="en/XUL/preference">preference</a><br> <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a><br> <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a><br> <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a></p> <p><u><strong>WINDOW STRUCTURE</strong></u></p> <p><a href="/en/XUL/browser" title="en/XUL/browser">browser</a><br> <a href="/en/XUL/tabbrowser" title="en/XUL/tabbrowser">tabbrowser</a><br> <a href="/en/XUL/editor" title="en/XUL/editor">editor</a><br> <a href="/en/XUL/iframe" title="en/XUL/iframe">iframe</a><br> <a href="/en/XUL/titlebar" title="en/XUL/titlebar">titlebar</a><br> <a href="/en/XUL/resizer" title="en/XUL/resizer">resizer</a><br> <a href="/en/XUL/statusbar" title="en/XUL/statusbar">statusbar</a><br> <a href="/en/XUL/statusbarpanel" title="en/XUL/statusbarpanel">statusbarpanel</a><br> <a href="/en/XUL/dialogheader" title="en/XUL/dialogheader">dialogheader</a><br> <a href="/en/XUL/notification" title="en/XUL/notification">notification</a><br> <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a></p> <p><u><strong>MENUS AND POPUPS</strong></u></p> <p><a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a><br> <a href="/en/XUL/menu" title="en/XUL/menu">menu</a><br> <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a><br> <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a><br> <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a><br> <a href="/en/XUL/panel" title="en/XUL/panel">panel</a><br> <a href="/en/XUL/tooltip" title="en/XUL/tooltip">tooltip</a><br> <a href="/en/XUL/popupset" title="en/XUL/popupset">popupset</a></p> <p><u><strong>TOOLBARS</strong></u></p> <p><a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a><br> <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a><br> <a href="/en/XUL/toolbargrippy" title="en/XUL/toolbargrippy">toolbargrippy</a><br> <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a><br> <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a><br> <a href="/en/XUL/toolbarseparator" title="en/XUL/toolbarseparator">toolbarseparator</a><br> <a href="/en/XUL/toolbarset" title="en/XUL/toolbarset">toolbarset</a><br> <a href="/en/XUL/toolbarspacer" title="en/XUL/toolbarspacer">toolbarspacer</a><br> <a href="/en/XUL/toolbarspring" title="en/XUL/toolbarspring">toolbarspring</a><br> <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a></p> <p><u><strong>TABS AND GROUPING</strong></u></p> <p><a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a><br> <a href="/en/XUL/tabs" title="en/XUL/tabs">tabs</a><br> <a href="/en/XUL/tab" title="en/XUL/tab">tab</a><br> <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanels</a><br> <a href="/en/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a><br> <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a><br> <a href="/en/XUL/caption" title="en/XUL/caption">caption</a><br> <a href="/en/XUL/separator" title="en/XUL/separator">separator</a><br> <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a></p> </td> <td> <p><u><strong>CONTROLS</strong></u></p> <p><a href="/en/XUL/button" title="en/XUL/button">button</a><br> <a href="/en/XUL/checkbox" title="en/XUL/checkbox">checkbox</a><br> <a href="/en/XUL/colorpicker" title="en/XUL/colorpicker">colorpicker</a><br> <a href="/en/XUL/datepicker" title="en/XUL/datepicker">datepicker</a><br> <a href="/en/XUL/menulist" title="en/XUL/menulist">menulist</a><br> <a href="/en/XUL/progressmeter" title="en/XUL/progressmeter">progressmeter</a><br> <a href="/en/XUL/radio" title="en/XUL/radio">radio</a><br> <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup">radiogroup</a><br> <a href="/en/XUL/scale" title="en/XUL/scale">scale</a><br> <a href="/en/XUL/splitter" title="en/XUL/splitter">splitter</a><br> <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a><br> <a href="/En/XUL/Textbox_(Toolkit_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br> <a href="/En/XUL/Textbox_(XPFE_autocomplete)" title="en/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br> <a href="/en/XUL/timepicker" title="en/XUL/timepicker">timepicker</a></p> <p><u><strong>TEXT AND IMAGES</strong></u></p> <p><a href="/en/XUL/description" title="en/XUL/description">description</a><br> <a href="/en/XUL/label" title="en/XUL/label">label</a><br> <a href="/en/XUL/image" title="en/XUL/image">image</a></p> <p><u><strong>LISTS</strong></u></p> <p><a href="/en/XUL/listbox" title="en/XUL/listbox">listbox</a><br> <a href="/en/XUL/listitem" title="en/XUL/listitem">listitem</a><br> <a href="/en/XUL/listcell" title="en/XUL/listcell">listcell</a><br> <a href="/en/XUL/listcol" title="en/XUL/listcol">listcol</a><br> <a href="/en/XUL/listcols" title="en/XUL/listcols">listcols</a><br> <a href="/en/XUL/listhead" title="en/XUL/listhead">listhead</a><br> <a href="/en/XUL/listheader" title="en/XUL/listheader">listheader</a><br> <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a><br> <a href="/en/XUL/richlistitem" title="en/XUL/richlistitem">richlistitem</a></p> <p><u><strong>TREES</strong></u></p> <p><a href="/en/XUL/tree" title="en/XUL/tree">tree</a><br> <a href="/en/XUL/treecell" title="en/XUL/treecell">treecell</a><br> <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a><br> <a href="/en/XUL/treecol" title="en/XUL/treecol">treecol</a><br> <a href="/en/XUL/treecols" title="en/XUL/treecols">treecols</a><br> <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a><br> <a href="/en/XUL/treerow" title="en/XUL/treerow">treerow</a><br> <a href="/en/XUL/treeseparator" title="en/XUL/treeseparator">treeseparator</a></p> <p> </p> </td> <td> <p><u><strong>LAYOUT</strong></u></p> <p><a href="/en/XUL/box" title="en/XUL/box">box</a><br> <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a><br> <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a><br> <a href="/en/XUL/bbox" title="en/XUL/bbox">bbox</a><br> <a href="/en/XUL/deck" title="en/XUL/deck">deck</a><br> <a href="/en/XUL/stack" title="en/XUL/stack">stack</a><br> <a href="/en/XUL/grid" title="en/XUL/grid">grid</a><br> <a href="/en/XUL/columns" title="en/XUL/columns">columns</a><br> <a href="/en/XUL/column" title="en/XUL/column">column</a><br> <a href="/en/XUL/rows" title="en/XUL/rows">rows</a><br> <a href="/en/XUL/row" title="en/XUL/row">row</a><br> <a href="/en/XUL/scrollbox" title="en/XUL/scrollbox">scrollbox</a></p> <p><u><strong>TEMPLATES</strong></u></p> <p><a href="/en/XUL/action" title="en/XUL/action">action</a><br> <a href="/en/XUL/assign" title="en/XUL/assign">assign</a><br> <a href="/en/XUL/binding" title="en/XUL/binding">binding</a><br> <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a><br> <a href="/en/XUL/conditions" title="en/XUL/conditions">conditions</a><br> <a href="/en/XUL/content" title="en/XUL/content">content</a><br> <a href="/en/XUL/member" title="en/XUL/member">member</a><br> <a href="/en/XUL/param" title="en/XUL/param">param</a><br> <a href="/en/XUL/query" title="en/XUL/query">query</a><br> <a href="/en/XUL/queryset" title="en/XUL/queryset">queryset</a><br> <a href="/en/XUL/rule" title="en/XUL/rule">rule</a><br> <a href="/en/XUL/template" title="en/XUL/template">template</a><br> <a href="/en/XUL/textnode" title="en/XUL/textnode">textnode</a><br> <a href="/en/XUL/triple" title="en/XUL/triple">triple</a><br> <a href="/en/XUL/where" title="en/XUL/where">where</a></p> <p><u><strong>SCRIPTING</strong></u></p> <p><a href="/en/XUL/script" title="en/XUL/script">script</a><br> <a href="/en/XUL/commandset" title="en/XUL/commandset">commandset</a><br> <a href="/en/XUL/command" title="en/XUL/command">command</a><br> <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a><br> <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a><br> <a href="/en/XUL/observes" title="en/XUL/observes">observes</a><br> <a href="/en/XUL/key" title="en/XUL/key">key</a><br> <a href="/en/XUL/keyset" title="en/XUL/keyset">keyset</a><br> <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a><br> <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a></p> <p><u><strong>HELPER ELEMENTS</strong></u></p> <p><a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">arrowscrollbox<br> </a><a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br> <a href="/en/XUL/grippy" title="en/XUL/grippy">grippy</a><br> <a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">scrollbar</a><br> <a href="/en/XUL/scrollcorner" title="en/XUL/scrollcorner">scrollcorner</a><br> <a href="/en/XUL/spinbuttons" title="en/XUL/spinbuttons">spinbuttons</a></p> </td> </tr> </tbody> +</table> +<h3 id="Other XUL lists" name="Other XUL lists">更多XUL相关列表</h3> +<ul> <li><a href="/ja/XUL/Attribute" title="ja/XUL/Attribute">全部XUL属性</a></li> <li><a href="/ja/XUL/Property" title="ja/XUL/Property">全部XUL特性</a></li> <li><a href="/ja/XUL/Method" title="ja/XUL/Method">全部XUL方法</a></li> <li><a href="/ja/XUL_element_attributes" title="ja/XUL_element_attributes">Attributes defined for all XUL elements</a></li> <li><a href="/de/XUL/Style" rel="internal" title="de/XUL/Style">Style Klassen</a></li> <li><a href="/ja/XUL/Events" title="ja/XUL/Events">Event handlers</a></li> <li><a href="/Ja/XUL/Deprecated//Defunct_Markup" title="Ja/XUL/Deprecated//Defunct_Markup">Deprecated/Defunct Markup</a></li> +</ul> +<div class="noinclude"> <p></p> +</div> |