A box is a special soft of window that has graphics border around the client area (the box body). The box is a resizable window, for this reason the graphics elements for the edges must be tiles. Unlike the edges, the corners are fix-sized elements. Optionally an image can be provided for tilling of the client area.

QBox class is derived from QWndCtrl and inherits all its properties and methods. In many respects box control is similar to window control. Like a window, a box can be either a fix-sized or can set the height automatically to fit the content. As a window, a box can be assigned by optional set of effects and transitions.

The content must be provided either as a string or as a function (or method). The first way is preferable when you need to fill a box with HTML code you already have. Functional content is useful when other QLIB controls are created in the box (i.e. buttons, labels, nested windows etc.).

Additionally to window properties, the box requires a resource. The resource defines graphical representation and serves as a holder of the preloaded images shared by all boxes of the same style. Refer to QBoxRes class for more details.

For details of cross-browser support refer to Implementation Notes to QWndCtrl class.

QBoxRes, QBoxCtrl, QWndCtrl, Windowing

QBox(parent, name, res, x, y, width, heightopt, body, visibleopt, effectsopt, opacityopt, zindexopt)

Creates new box instance. If the box is created as a child control, valid parent object must be specified. If the box is assigned to global variable, parent should be null. The name should be the same as the name of variable or property that has been assigned by newly created object. Parameters parent - Parent control (if any, null otherwise). name - The object reference name. res - The resource (refer to QBoxRes for details). x, y - Coordinates of the top left corner in pixels. If the box is created in document context, it gets positioned in absolute page coordinates. If this box is nested in another one, it's positioned in relative coordinates of the parent. width - The outer width in pixels. height - The outer height in pixels. If you want the box to select the height automatically, set this parameter to null. body - The box content provided either as a HTML code or by a function (see the example). visible - Optional initial visibility. By default the box appears visible. effects - Optional effects mask. By default the box is created with no effects. For complete list of effects refer to QWndCtrl. opacity - Optional opacity from 0 to 100. Default value is 100 that corresponds to 100% opaqueness. zindex - Optional stacking order. If you need the browser to select it automatically let this parameter be null.

Property	Access	Description
Properties inherited from QBoxCtrl
res	R	The box resource (see QBoxRes).
body	R	The box content (is either a string or a function).
cwidth	R	Width in pixels of the box client area.
cheight	R	Height in pixels of the box client area (is null if box is an auto-sized).
Properties inherited from QWndCtrl
x	R	X coordinate of the top left corner (pixels).
y	R	Y coordinate of the top left corner (pixels).
width	R	Width in pixels of the surrounding window.
height	R	Height in pixels of the surrounding window (is null if box is an auto-sized).
visible	R	Visibility state.
effects	R	Effects mask (can be a mix of effects).
opacity	R	The window opacity from 0 (transparent) to 100 (opaque).
zindex	R	The window stacking order. Can be null for auto-stack.
Properties inherited from QControl
name	R	Name of the control. Serves as a direct reference to this object when evaluated.
id	R	Alphanumerical unique identifier of the control.
parent	R	Reference to the parent control (if any, null otherwise).
tag	R / W	Can refer any value or object, tag is always passed to all event handlers as the last parameter.
window	R	This property is a reference to JavaScript window object in which the control exists.
document	R	Refers to document object in which the corresponding HTML elements exist. Normally all elements of a DOM2 compatible browser are children of the top document object. If the control creates new document scope (i.e. printing tags like <IFRAME>, <LAYER>), it should assign this document to this property.

show(show)
Shows or hides the box. "IN" and "OUT" transitions can be assigned to show and hide actions respectively (see setEffects method). In this case the window does not show/hide promptly, instead the window smoothly changes its visibility through animation. Parameters show - Desirable state as follows: true - make it visible, false - hide the window.

focus()
Gives the focus to the box. This brings it to the top of the stacking order.

center()
Centers the box on page.

moveTo(x, y)
Moves the window to specified position. If the window has been created in document context, it gets positioned in absolute page coordinates. If the window is nested in another one, it's positioned in relative coordinates of the parent window (see CSS positon property for more details). Parameters x - X coordinate in pixels. y - Y coordinate in pixels.

setSize(w, hopt)
This method has no effect for this control, see Implementation Notes.

setZIndex(z)
Changes the stacking order of the window. Window with higher index appear on the screen first obscuring underlying windows with lower indices. Parameters z - Desirable stacking index (starting from 1).

setOpacity(op)
Changes the window opacity. See Implementation Notes for details and how this method is supported. Parameters op - Desirable opacity as follows: 0 - transparent, 100 - opaque.

setEffects(fx)

Sets effects mask. There're two kinds of effects: static and dynamic. Static effects change the default appearance of the window (for example, a window casts shadow when it's set by QWndCtrl.SHADOW). On the other hand, dynamic effects are transitions that get activated when window changes its visibility state. A dynamic effect can be either "IN" or "OUT". The first type is played when a window appears. The second one is activated on the hiding. Effects of all types can be mixed together to bring up a composite effect (example: "QWndCtrl.SHADOW + QWndCtrl.BOXIN + QWndCtrl.FADEOUT" - makes a window to cast shadow, it appears with "box" effect, hides itself fading out from view). Parameters fx - Mix of effects to apply.

onShow(visible, tag)
This handler is fired when the window becomes visible or vanishes. When transitions are enabled, the handler is fired after the animation completes. Parameters visible - Visibility state of the window. tag - Tag is commonly used to parameterize the event handler. Each control can be optionally assigned by a tag. Returns The return value is ignored.

CSS Class	Description	Example (defined in a CSS file)
TABLE.qbox	Defines style of the box TABLE element.	TABLE.qbox { margin: 10px } /* sets margins around the box. */
TABLE TD.body	Defines style of the body cell.	TABLE TD.body { text-align: center } /* sets center alignment of the body. */