creating_terminals.html #1 

<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Creating Terminals and Wires.</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" />
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/excanvas.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../build/wireit-min.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />

<style>
div.blockBox {
	/* WireIt */
	position: absolute;
	z-index: 5;
	opacity: 0.8;
	filter: alpha(opacity = 80);
	
	/* Others */
	width: 50px;
	height: 380px;
	background-color: rgb(255,200,200);
}

div.WireIt-Terminal {
	margin: 20px 8px;
}


#blockTop div.WireIt-Terminal, #blockBottom div.WireIt-Terminal {
	margin: 8px;
	float: left;
}

</style>
<script>

window.onload = function() {
	
	var bl = YAHOO.util.Dom.get('blockLeft');
	var br = YAHOO.util.Dom.get('blockRight');
	var bt = YAHOO.util.Dom.get('blockTop');
	var bb = YAHOO.util.Dom.get('blockBottom');
	
	for( var i = 0 ; i < 7 ; i++) {
		new WireIt.Terminal(bl, {direction: [1,0], offsetPosition:[0,i*50] });
		new WireIt.Terminal(br, {direction: [-1,0], offsetPosition:[0,i*50] });
		new WireIt.Terminal(bt, {direction: [0,1], offsetPosition:[i*50,0] });
		new WireIt.Terminal(bb, {direction: [0,-1], offsetPosition:[i*50,0] });
	}
	
};
</script>

 </head>
 <body>
	<p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
	<p style="margin: 30px;">This example demonstrates how to create Terminals.</p>
	<p style="margin: 30px;">Try to create some wires by drag'n drop on the terminals. Click on the scissor to delete them.</p>
	
	<div id='blockLeft' class="blockBox" style="top: 150px; left: 200px;">
	</div>
	
	<div id='blockRight'  class="blockBox"  style="top: 150px; left: 400px;">
	</div>
	
	
	<div id='blockTop' class="blockBox" style="width: 380px; height: 50px; top: 150px; left: 600px;">
	</div>
	
	<div id='blockBottom'  class="blockBox"  style="width: 380px; height: 50px; top: 350px; left: 600px;">
	</div>

 </body>
</html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s)
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/creating_terminals.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop.