Loading...
Helix SwarmHelix Swarm
Loading...

labels.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • labels.html #1
  • View
  • Commits
  • Open Download .zip Download (3 KB) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <html>
  3.  <head>
  4.   <title>WireIt Example, Move and Animate elements containing terminals</title>
  5.   
  6. <!-- Libs -->
  7. <link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
  8. <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
  9. <script type="text/javascript" src="../lib/excanvas.js"></script>
  10.  
  11. <!-- WireIt -->
  12. <script type="text/javascript" src="../build/wireit-min.js"></script>
  13.  
  14. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/inputex.js"></script>
  15. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/Field.js"></script>
  16. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/widgets/Button.js"></script>
  17. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/StringField.js"></script>
  18. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/InPlaceEdit.js"></script>
  19. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/Visus.js"></script>
  20. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/mixins/choice.js"></script>
  21. <script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/SelectField.js"></script>
  22.  
  23. <link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
  24.  
  25. <link rel="stylesheet" type="text/css" href="../plugins/inputex/lib/inputex/css/inputEx.css" />
  26.  
  27. <style>
  28.  
  29. div.blockBox {
  30. 	/* WireIt */
  31. 	position: absolute;
  32. 	z-index: 5;
  33. 	opacity: 0.8;
  34. 	
  35. 	/* Others */
  36. 	width: 100px;
  37. 	height: 100px;
  38. 	background-color: rgb(255,200,200);
  39. 	cursor: move;
  40. }
  41.  
  42. </style>
  43.  
  44. <script>
  45. window.onload = function() {
  46. 	
  47. 	// Create 2 terminals into Block1
  48. 	var block1 = YAHOO.util.Dom.get('block1');
  49. 	var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), 
  50. 							new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})];
  51. 	
  52. 	// Make the block1 draggable
  53. 	new WireIt.util.DD(terminals1,block1); 
  54. 	
  55. 	// Create 2 terminals into Block2
  56. 	var block2 = YAHOO.util.Dom.get('block2');
  57. 	var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), 
  58. 							new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})];
  59. 	
  60. 	// Make the block2 draggable
  61. 	new WireIt.util.DD(terminals2,block2);
  62. 	
  63. 	// Create a wire between some terminals
  64. 	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"} });
  65. 	w1.redraw();
  66. 	
  67. 	var w2 = new WireIt.BezierWire(terminals1[1], terminals2[1], document.body, {
  68. 		
  69. 		label: 'test',
  70. 		labelEditor: /*{type: 'string', value: "Testst"}*/
  71. 		{ 
  72. 			        type:'select',  
  73. 			        name: 'pagerank', 
  74. 			        choices: ['0','1','2','3','4','5','6','7','8','9','10'] 
  75. 		    }
  76. 		
  77. 	});
  78. 	w2.redraw();
  79. 	
  80. };
  81.  
  82.  
  83. </script>
  84.  
  85.  </head>
  86.  <body>
  87. 	
  88. 	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
  89. 	<p style="margin: 15px;">Show usage of WireIt.util.DD to make terminal containers draggable</p>
  90. 	
  91. 	<div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div>
  92. 	
  93. 	<div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div>
  94. 	
  95.  </body>
  96. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/labels.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago