bicomponent.html

在流览器上仿CS界面的JAVASCRIPT脚本

<td class="set-column"></td>
<td>The z index of the
			component. A higher z index means that the component will cover
			components with lower z index and therefore appear to be closer to
			the user.</td>
</tr>
</tbody>
</table>
<h2>Methods</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td><code><a href="#add">add</a></code></td>
<td>Adds a component to the current component. The added
				component becomes a child of the current component. If the component
				is child of another component it is first removed from that component.
				The second, optional, argument can be used to insert the new component
				before an existing child.</td>
</tr>
<tr>
<td><code><a href="#contains">contains</a></code></td>
<td>Returns true if the componenent contains another component.
				This means that the current component is an ancestor of the descendant.
				Note that the current component contains itself so calling
				<code>component.contains(component)</code> will return <code>true</code>.
				</td>
</tr>
<tr>
<td><code><a href="#getHtmlProperty">getHtmlProperty</a></code></td>
<td>Returns the HTML property value for the HTML element
				represented by the component. This should be used with caution since in some cases
				this might give unrespected results.</td>
</tr>
<tr>
<td><code><a href="#getStyleProperty">getStyleProperty</a></code></td>
<td>Returns the CSS style property value for the HTML element
				represented by the component. This should be used with caution since in some cases
				this might give unrespected results.</td>
</tr>
<tr>
<td><code><a href="#hasChildren">hasChildren</a></code></td>
<td>Returns true if the component has any child components</td>
</tr>
<tr>
<td><code><a href="#layoutAllChildren">layoutAllChildren</a></code></td>
<td>
				Calls <code><a href="#layoutComponent">layoutComponent</a></code> on all the <code><a href="#children">children</a></code>.
				Note that this does not call <code><a href="#layoutChildrenX">layoutChildrenX</a></code> or
				<code><a href="#layoutChildrenY">layoutChildrenY</a></code> so if you override this method you
				should also overried <code><a href="#layoutChildrenX">layoutChildrenX</a></code> and
				<code><a href="#layoutChildrenY">layoutChildrenY</a></code> as well.
			</td>
</tr>
<tr>
<td><code><a href="#layoutAllChildrenX">layoutAllChildrenX</a></code></td>
<td>
				Calls <code><a href="#layoutComponentX">layoutComponentX</a></code> on all the <code><a href="#children">children</a></code>.
			</td>
</tr>
<tr>
<td><code><a href="#layoutAllChildrenY">layoutAllChildrenY</a></code></td>
<td>
				Calls <code><a href="#layoutComponentY">layoutComponentY</a></code> on all the <code><a href="#children">children</a></code>.
			</td>
</tr>
<tr>
<td><code><a href="#layoutChild">layoutChild</a></code></td>
<td>
				Handles both the horizontal and verical layout of the child. If
				the child changes its size and it has any children this will also
				call layoutAllChildren on the child.
			</td>
</tr>
<tr>
<td><code><a href="#layoutChildX">layoutChildX</a></code></td>
<td>
				Handles the horizontal layout of the child. If the child changes
				its size and it has any children this will also call layoutAllChildren
				on the child.
				</td>
</tr>
<tr>
<td><code><a href="#layoutChildY">layoutChildY</a></code></td>
<td>
				Handles the vertical layout of the child. If the child changes
				its size and it has any children this will also call layoutAllChildren
				on the child.
			</td>
</tr>
<tr>
<td><code><a href="#layoutComponent">layoutComponent</a></code></td>
<td>
				Handles the size and position of the current component. Most
				components ask their parent to do the actual layout but this can
				be overridden to allow the component to take care of its own size
				and position.
			</td>
</tr>
<tr>
<td><code><a href="#layoutComponentX">layoutComponentX</a></code></td>
<td>
				Handles the horizontal size and position (left, width and right)
				of the current component. Most components ask their parent to do
				the actual layout but this can be overridden to allow the component
				to take care of its own size and position.
			</td>
</tr>
<tr>
<td><code><a href="#layoutComponentY">layoutComponentY</a></code></td>
<td>
				Handles the vertical size and position (top, height and bottom)
				of the current component. Most components ask their parent to do
				the actual layout but this can be overridden to allow the component
				to take care of its own size and position.
			</td>
</tr>
<tr>
<td><code><a href="#pack">pack</a></code></td>
<td>Sets the size to the preferred width and height</td>
</tr>
<tr>
<td><code><a href="#remove">remove</a></code></td>
<td>Removes an existing child from the component.</td>
</tr>
<tr>
<td><code><a href="#removeAll">removeAll</a></code></td>
<td>
				Removes and disposes all children.
			</td>
</tr>
<tr>
<td><code><a href="#removeHtmlProperty">removeHtmlProperty</a></code></td>
<td>Removes the HTML property value for the HTML element
				represented by the component. This should be used with caution since in some cases
				this might give unrespected results.</td>
</tr>
<tr>
<td><code><a href="#removeStyleProperty">removeStyleProperty</a></code></td>
<td>Removes the CSS style property value for the HTML element
				represented by the component. This should be used with caution since in some cases
				this might give unrespected results.</td>
</tr>
<tr>
<td><code><a href="#scrollIntoView">scrollIntoView</a></code></td>
<td>Scrolls the parent component view port so that the
				current component becomes inside the view port if possible. The
				argument can be used to tell what edge of the viewport the component
				should be aligned to.
			</td>
</tr>
<tr>
<td><code><a href="#scrollIntoViewX">scrollIntoViewX</a></code></td>
<td>Scrolls the parent component view port horizontally so that the
				current component becomes inside the view port if possible. The
				argument can be used to tell what edge of the viewport the component
				should be aligned to.
			</td>
</tr>
<tr>
<td><code><a href="#scrollIntoViewY">scrollIntoViewY</a></code></td>
<td>Scrolls the parent component view port vertically so that the
				current component becomes inside the view port if possible. The
				argument can be used to tell what edge of the viewport the component
				should be aligned to.
			</td>
</tr>
<tr>
<td><code><a href="#setBounds">setBounds</a></code></td>
<td>Sets the left and top position as well as the width and height for the component.</td>
</tr>
<tr>
<td><code><a href="#setHtmlProperty">setHtmlProperty</a></code></td>
<td>Adds a certain HTML property (attribute) to the HTML element represented
				by the component. This should be used with caution since in some cases
				this might give unrespected results.</td>
</tr>
<tr>
<td><code><a href="#setLocation">setLocation</a></code></td>
<td>Sets the left and top position for the component.</td>
</tr>
<tr>
<td><code><a href="#setPreferredSize">setPreferredSize</a></code></td>
<td>Sets both the preferred width and preferred height for the component.</td>
</tr>
<tr>
<td><code><a href="#setSize">setSize</a></code></td>
<td>Sets both width and height for the component.</td>
</tr>
<tr>
<td><code><a href="#setStyleProperty">setStyleProperty</a></code></td>
<td>Adds a certain style property to the HTML element represented
				by the component. This should be used with caution since in some cases
				this might give unrespected results.</td>
</tr>
</tbody>
</table>
<h2>Events</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td class="bubbles-header">Bubbles</td>
<td>Descripton</td>
</tr>
</thead>
<tbody>
<tr>
<td><a name="blur"></a><code>blur</code></td>
<td><code class="type"><code><a href="BiEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"></td>
<td></td>
</tr>
<tr>
<td><a name="click"></a><code>click</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="contextmenu"></a><code>contextmenu</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="create"></a><code>create</code></td>
<td><code class="type"><code><a href="BiEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"></td>
<td>
				This event is fired when the component has been created and inserted
				into the document. When it is fired it is quaranteed that the
				component has been inserted into a <code><a href="BiApplication.html">application
				window</a></code> and at that time it has a visual representation.
			</td>
</tr>
<tr>
<td><a name="dblclick"></a><code>dblclick</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="enabledchanged"></a><code>enabledchanged</code></td>
<td><code class="type"><code><a href="BiEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"></td>
<td></td>
</tr>
<tr>
<td><a name="focus"></a><code>focus</code></td>
<td><code class="type"><code><a href="BiEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"></td>
<td></td>
</tr>
<tr>
<td><a name="focusin"></a><code>focusin</code></td>
<td><code class="type"><code><a href="BiEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td>
				This event is fired when the component becomes focused. This event
				is fired before the <code><a href="#focus">focus</a></code> event and unlike the
				<code><a href="#focus">focus</a></code> event it bubbles up to the parent component.
			</td>
</tr>
<tr>
<td><a name="focusout"></a><code>focusout</code></td>
<td><code class="type"><code><a href="BiEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td>
				This event is fired when the component loses focus. This event
				is fired before the <code><a href="#blur">blur</a></code> event and unlike the
				<code><a href="#blur">blur</a></code> event it bubbles up to the parent component.
			</td>
</tr>
<tr>
<td><a name="keydown"></a><code>keydown</code></td>
<td><code class="type"><code><a href="BiKeyboardEvent.html">BiKeyboardEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="keypress"></a><code>keypress</code></td>
<td><code class="type"><code><a href="BiKeyboardEvent.html">BiKeyboardEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="keyup"></a><code>keyup</code></td>
<td><code class="type"><code><a href="BiKeyboardEvent.html">BiKeyboardEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="mousedown"></a><code>mousedown</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="mousemove"></a><code>mousemove</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="mouseout"></a><code>mouseout</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td>
				<code><a href="BiMouseEvent.html#relatedTarget">relatedTarget</a></code> can be used to find the component that was entered.
			</td>
</tr>
<tr>
<td><a name="mouseover"></a><code>mouseover</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td>
				<code><a href="BiMouseEvent.html#relatedTarget">relatedTarget</a></code> can be used to find the component that was left.
			</td>
</tr>
<tr>
<td><a name="mouseup"></a><code>mouseup</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiMouseEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td></td>
</tr>
<tr>
<td><a name="mousewheel"></a><code>mousewheel</code></td>
<td><code class="type"><code><a href="BiMouseEvent.html">BiEvent</a></code></code></td>
<td class="bubbles-column"><img src="check.png" alt="checked"></td>
<td>
				This event is fired when the user scrolls the mouse wheel over the component
			</td>