pcjs/docs/pcjs/panel

layout	title	permalink
page	PCjs <panel> Element	/docs/pcjs/panel/

PCjs Control Panel Component

Format

<panel>...</panel>

Purpose

Creates an instance of the Control Panel component, which simply acts as a container for controls that the machine wants to bind to the Computer, CPU, Keyboard and/or Debugger components.

Attributes

None.

Bindings

Refer to available bindings in the Computer, CPU, Keyboard and Debugger components.

Example

<panel id="panel" pos="center" width="900px" padleft="8px">
	<name>Control Panel</name>
	<control type="container" width="500px" pos="left" padbottom="10px">
		<control type="textarea" class="output" binding="print" width="480px" height="200px"/>
		<control type="container">
			<control type="text" class="input" binding="debugInput" width="360px"/>
			<control type="button" class="input" binding="debugEnter">Enter</control>
			<control type="button" class="input" binding="clear">Clear</control>
		</control>
	</control>
</panel>

See /devices/pc/panel/default.xml for a more complete example.

Output

<div id="..." class="pc-panel pc-component">
	<div class="pc-container">
		<div class="pcjs-panel" data-value="id:'...',name:'...'"></div>
	</div>
</div>

Also, if any controls are defined, another <div> of class="pc-controls" is created in the container <div>, with each control inside a <div> of class="pc-control".

[Return to PCjs Documentation]