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