rendered paste body<html>
<head>
<script src="http://static.daytradercanada.com/js/lib/jquery.js"></script>
<script src="http://static.daytradercanada.com/js/lib/form.js"></script>
<script src="http://static.daytradercanada.com/js/lib/interface.js"></script>
<script>
box = function( options ){
this.options = {
header: 'Box Header!'
};
for( key in options )
{
this.options[ key ] = options[ key ];
}
this.node =$.DIV(
{ class:'box', id: this.options['id'] },
$.DIV(
{ class:'boxHeader', id: 'boxHeader_' + this.id },
this.options[ 'header' ]
),
$.DIV(
{ class:'boxContent', id: 'boxContent_' + this.id }
),
$.DIV(
{ class:'boxCommands', id:'boxCommands_' + this.id },
$.IMG( {src:'http://static.daytradercanada.com/images/icons/silk/icons/application_side_boxes.png', class:'command' } ),
$.IMG( {src:'http://static.daytradercanada.com/images/icons/silk/icons/anchor.png', class:'command' } ),
$.IMG( {src:'http://static.daytradercanada.com/images/icons/silk/icons/asterisk_orange.png', class:'command' } ),
$.IMG( {src:'http://static.daytradercanada.com/images/icons/silk/icons/attach.png', class:'command' } ),
$.IMG( {src:'http://static.daytradercanada.com/images/icons/silk/icons/cancel.png', class:'command' } )
)
);
return this.node;
}
$( document ).ready( function(){
boxInst = new box( { id:'testBox' } );
$('body').append( boxInst );
$( '.box' ).find( 'div.boxHeader' ).bind( 'dblclick', function(){ $( 'div.box' ).find( '.boxContent' ).toggle(); $( 'div.box' ).find( '.boxCommands' ).toggle(); } );
}
);
</script>
<style>
/*
body
{
border-style: dashed;
border-width: 1px;
border-color: green;
}
*/
div.box
{
width: 200px;
}
div.box div.boxHeader
{
background-image: url( 'bar.gif' );
padding: 2px;
padding-left: 5px;
margin-bottom: 1px;
font-family: arial;
color: white;
}
div.box div.boxContent
{
height: 300px;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px 1px 0px 1px;
background-color: #f0f0f0;
padding: 5px;
}
div.box div.boxCommands
{ text-align: right;
padding: 1px;
border-color: #CCCCCC;
border-style: solid;
border-width: 0px 1px 1px 1px;
background-color: #f0f0f0;
}
div.box div.boxCommands img
{
margin-left: 2px;
}
.command
{
cursor: pointer;
}
</style>
</head>
<body>
<!---
<div class="box">
<div class="boxHeader"></div>
<div class="boxContent"></div>
</div>
--->
</body>
</html>