label_containers.html #1 

<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: Label containers</title>
  
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 

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

<!-- YUI -->
<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-inputex-min.js"></script>

<script type="text/javascript" src="../js/RectLabelContainer.js"></script>
<script type="text/javascript" src="../js/CanvasContainer.js"></script>
<script type="text/javascript" src="../js/EllipseLabelContainer.js"></script>



<style>
body {
	font-size: 10px;
}


div.WireIt-CanvasContainer div.body {
	background-color: transparent;
	border: 0;
	position: relative;
}

div.WireIt-CanvasContainer div.WireIt-Container-closebutton {
	display: none;
}


div.WireIt-CanvasContainer:hover div.WireIt-Container-closebutton {
	display: block;
}


div.WireIt-CanvasContainer:hover div.WireIt-Container-resizehandle {
	border: 1px solid black;
}






div.WireIt-RectLabelContainer div.body {
	background-color: transparent;
	border: 0;
	position: relative;
	background-color: #FDEADA;
	padding: 20px;
}

div.WireIt-RectLabelContainer div.WireIt-Container-closebutton {
	display: none;
}


div.WireIt-RectLabelContainer:hover div.WireIt-Container-closebutton {
	display: block;
}


div.WireIt-RectLabelContainer:hover div.WireIt-Container-resizehandle {
	border: 1px solid black;
}

</style>

</head>
<body>
	
<script>

	var demoLayer;

	YAHOO.util.Event.addListener(window, 'load', function() {
		
		// Layer Demo
	  demoLayer = new WireIt.Layer({layerMap: false});
		
		// You can use a global setWiring method	
		demoLayer.setWiring({
			containers: [
		
			  // ImageContainer
				{
					position:[150,100],
					"xtype":"WireIt.EllipseLabelContainer", 
					label: "http://neyric.github.com/wireit",
					width: 250,
	 				"terminals": [
	 					{"name": "in", direction: [0,-1], offsetPosition: {top: -5, left: 115} },
						{"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 115} }
	 				]
				},
				
				// ImageContainer
				{
					position:[300,300],
					"xtype":"WireIt.RectLabelContainer", 
					label: "Eric Abouaf",
 					"terminals": [
							{"name": "in", direction: [0,-1], offsetPosition: {top: -15, left: 90} }
					]
				}
			],
			
			
			wires: [
				{
					src: {
						moduleId: 0,
						terminal: "out"
					},
					tgt: {
						moduleId: 1,
						terminal: "in"
					},
					width: 1,
					label: "dc:author",
					labelStyle: { fontSize: "150%"},
					labelEditor: {type: 'select', choices: ['dc:title', 'dc:author'] },
					
					xtype: "WireIt.BezierArrowWire"
				}
			]
			
		});

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