All pastes #199745 Raw Edit

Something

public text v1 · immutable
#199745 ·published 2006-10-12 18:40 UTC
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>