microbind/index.html at master · pabloppp/microbind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Microbind test</title>

		<script src="microbind.js" type="text/javascript" charset="utf-8"></script>

		<script>
			//PROBEMOS LA LIBRERIA
			$.onLoad("myapp", function(){ //ESPERAMOS A QUE CARGUE EL DOM
				//$.find("#micasa").text("albatros");
				variable1 = "hola <b>amigos</b>";
				variable2 = "s";


				addme = function(val, event){
					variable1 += val || "";

					//if(variable2) variable2 = '';
				}

				dragged = function(event){
					draggedLabel = "dragged";
					//event.dataTransfer.setData("data1", "value1");
				}

				dropped = function(event){
					event.preventDefault();
					draggedLabel = "dropped";
					event.target.innerHTML="yeah!";
				}

				letras = ["A","E","I","O","U"];
				//letras = {a:"A",e:"E",i:"I",o:"O",u:"U"};

				addToArray = function(){
					letras.push("Y");
					letras.splice(2, 0, "Z");
					letras.push("MIPENE")
					letras.pop();
					//console.log(letras);
				}

				classTester = false;


			})


			//$.stop(); //ASI EVITAMOS QUE SE EJECUTE HASTA QUEQUERAMOS INICIARLO


		</script>

		<style>
		.dragme{
			background-color: grey;
			cursor: pointer;
		}
		.class1{
			color: red;
		}
		.class2{
			color: green;
		}
		</style>

	</head>
	<body bind-root="myapp" >
		<h1>MICROBIND</h1>
		<span bind-hide="true"><button onClick="$.run()">START BINDING</button></span> <span bind="'BINDING IN PROGRESS'"><----- CLICK HERE!!!!</span><br><br>
		<i>safe bind ------></i> <span bind="variable1"></span><br>
		<i>unsafe bind ---></i> <span bind-unsafe="variable1"></span><br>
		<span bind-drag bind-drag-start="dragged(event)" class="dragme" >drag me</span> - <span bind="draggedLabel" ></span><br>
		<div bind-drop="dropped(event)"> drop here... </div><br><br>
		<input type="text" bind="variable1"><br>
		<input type="text" bind="variable2"><br>
		<button bind-click="addme(variable2, event)"> Añadir <span bind="variable2 || ''"></span></button><br>
		<span bind-show="variable2"> HIDDEN UNTIL YOU WRITE</span> <---> <span bind-hide="variable2"> HIDDEN IF YOU WRITE</span>
		<br><input type="text" bind="$.p.mydata" placeholder="DATOS PERSISTENTES">
		<br><button onClick="$.reset()">RESET BINDING</button>

		<div bind-foreach="letra in letras">
			Elemento \letra: <span bind="letra"></span> <input bind="letra">
		</div>

		<div bind-class="{'class1' : classTester , 'class2' : !classTester}" bind-click="classTester = !classTester"> BIND-CLASS TEST <--- Click me!</div>

		<button bind-click="addToArray()">ADD ELEMENT TO ARRAY</button>

	</body>
</html>