labels.html #1

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • labels.html
  • View
  • Commits
  • Open Download .zip Download (3 KB)
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Move and Animate elements containing terminals</title>
  
<!-- Libs -->
<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>

<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/inputex.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/Field.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/widgets/Button.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/StringField.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/InPlaceEdit.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/Visus.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/mixins/choice.js"></script>
<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/SelectField.js"></script>

<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />

<link rel="stylesheet" type="text/css" href="../plugins/inputex/lib/inputex/css/inputEx.css" />

<style>

div.blockBox {
	/* WireIt */
	position: absolute;
	z-index: 5;
	opacity: 0.8;
	
	/* Others */
	width: 100px;
	height: 100px;
	background-color: rgb(255,200,200);
	cursor: move;
}

</style>

<script>
window.onload = function() {
	
	// Create 2 terminals into Block1
	var block1 = YAHOO.util.Dom.get('block1');
	var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), 
							new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})];
	
	// Make the block1 draggable
	new WireIt.util.DD(terminals1,block1); 
	
	// Create 2 terminals into Block2
	var block2 = YAHOO.util.Dom.get('block2');
	var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), 
							new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})];
	
	// Make the block2 draggable
	new WireIt.util.DD(terminals2,block2);
	
	// Create a wire between some terminals
	var w1 = new WireIt.BezierWire(terminals1[0], terminals2[0], document.body, {label: "Hello world !", labelStyle: {fontSize: "16pt", fontWeight: "bold", color: "yellow", backgroundColor: "black", border: "2px solid red"} });
	w1.redraw();
	
	var w2 = new WireIt.BezierWire(terminals1[1], terminals2[1], document.body, {
		
		label: 'test',
		labelEditor: /*{type: 'string', value: "Testst"}*/
		{ 
			        type:'select',  
			        name: 'pagerank', 
			        choices: ['0','1','2','3','4','5','6','7','8','9','10'] 
		    }
		
	});
	w2.redraw();
	
};


</script>

 </head>
 <body>
	
	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
	<p style="margin: 15px;">Show usage of WireIt.util.DD to make terminal containers draggable</p>
	
	<div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div>
	
	<div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div>
	
 </body>
</html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s)
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/labels.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop.