• 1
• 2
• 3
• 4
• 5

add background bar body border closewidget color container content create div dom dynamically element family font function height id javascript left part px screen size solid table title var wid widget widgets width

Keyword Cloud Navigation Map

The HTML code is simple:

<style>
.widget{
	width: 250px;
	min-height: 50px;
	border: 1px solid #CACACA;
	background-color: #FFFFEA;
</style>
...
<body>
<div id='id1' class='widget' style='width: 250px;'>
	<div id='wdrag' style='width: 100%; height: 16; background-color: #CCCCFF; border-bottom: 1px solid #CACACA;'>
		<table id='d' style='font-family: arial; font-size: 8pt;' width=100% cellpadding=0 cellspacing=0 border=0>

			<tr>
				<td align=left><span id='id1_title' style='padding-left: 5px;'>Widget Title Bar</span></td>
				<td align=right> <span style='padding-right: 5px;'>
				<a href='#' style='text-decoration: none;'><b>X</b></a></span></td>

			</tr>
		</table>
	</div>
	<div id='id1_content' style='padding: 5px; font-family: arial; font-size: 8pt; width: 100%'>
	Widget Body (this is where the widget content is going to be placed)</div>
</div>

Our widgets have two parts, the title bar and the body. The title bar contains an HREF ('X') that we will soon use to trigger the closing of the widget.

Read Full Tutorial...