tema7 + ejercicios del tema 7

redradix-school · Dec 20, 2012 · a2ae71e · a2ae71e
1 parent 1135822
commit a2ae71e
Show file tree

Hide file tree

Showing 15 changed files with 626 additions and 0 deletions.
diff --git a/js-maquetadores-7.pdf b/js-maquetadores-7.pdf
diff --git a/tema7/ejercicio1/codigo.js b/tema7/ejercicio1/codigo.js
@@ -0,0 +1,5 @@
+$(function() {
+
+  // ???
+
+});
diff --git a/tema7/ejercicio1/index.html b/tema7/ejercicio1/index.html
@@ -0,0 +1,35 @@
+<html>
+
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>js maquetadores - tema 7 - ej. 1</title>
+    <link rel="stylesheet" href="../../lib/stylesheets/foundation.min.css" type="text/css" media="screen" charset="utf-8">
+    <script src="../../lib/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
+
+    <script src="codigo.js" type="text/javascript" charset="utf-8"></script>
+
+    <style type="text/css" media="screen">
+      .air { margin-top: 100px; }
+    </style>
+
+  </head>
+
+  <body>
+    <div id="container">
+
+      <div class="air" />
+
+      <div class="row">
+        <div class="eight columns offset-by-two">
+          <div class="panel">
+            <input id="mensaje" type="text" placeholder="Mensaje aquí" />
+            <a id="alert" class="button primary" href="#">Alert</a>
+            <a id="borrar" class="button alert" href="#">Borrar</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </body>
+
+</html>
diff --git a/tema7/ejercicio2/codigo.js b/tema7/ejercicio2/codigo.js
@@ -0,0 +1,5 @@
+$(function() {
+
+  // ???
+
+});
diff --git a/tema7/ejercicio2/index.html b/tema7/ejercicio2/index.html
@@ -0,0 +1,66 @@
+<html>
+
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>js maquetadores - tema 7 - ej. 2</title>
+    <link rel="stylesheet" href="../../lib/stylesheets/foundation.min.css" type="text/css" media="screen" charset="utf-8">
+    <script src="../../lib/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
+
+    <script src="codigo.js" type="text/javascript" charset="utf-8"></script>
+
+    <style type="text/css" media="screen">
+      .air { margin-top: 100px; }
+      select { font-size: 16px; height: 36px; border: 1px solid #999; }
+      .jumbotron { background-color: #111; color: #fff; border-radius: 5px; border: 2px solid grey; }
+      .jumbotron h1 { color: #fff; }
+    </style>
+
+  </head>
+
+  <body>
+    <div id="container">
+
+      <div class="air">
+      </div>
+
+      <div class="row">
+        <div id="panel" class="eight columns offset-by-two jumbotron">
+          <h1 id="salida"> Mensaje aquí </h1>
+        </div>
+      </div>
+
+      <div class="air">
+      </div>
+
+      <div class="row">
+        <div class="eight columns offset-by-two">
+          <div class="panel">
+            <div class="row">
+              <div class="twelve columns">
+                <input id="mensaje" type="text" placeholder="Mensaje aquí" />
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="four columns">
+                <select id="color" class="inline">
+                  <option> Negro </option>
+                  <option> Rojo </option>
+                  <option> Verde </option>
+                </select>
+              </div>
+
+              <div class="eight columns">
+                <a id="alert" class="button primary" href="#">Mostrar</a>
+                <a id="borrar" class="button alert" href="#">Borrar</a>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </body>
+
+</html>
diff --git a/tema7/ejercicio3/codigo.js b/tema7/ejercicio3/codigo.js
@@ -0,0 +1,5 @@
+$(function() {
+
+  // ???
+
+});
diff --git a/tema7/ejercicio3/index.html b/tema7/ejercicio3/index.html
@@ -0,0 +1,54 @@
+<html>
+
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>js maquetadores - tema 7 - ej. 3</title>
+    <link rel="stylesheet" href="../../lib/stylesheets/foundation.min.css" type="text/css" media="screen" charset="utf-8">
+    <script src="../../lib/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
+
+    <script src="codigo.js" type="text/javascript" charset="utf-8"></script>
+
+    <style type="text/css" media="screen">
+      .air { margin-top: 100px; }
+    </style>
+
+  </head>
+
+  <body>
+    <div id="container">
+
+      <div class="air">
+      </div>
+
+      <div class="row">
+
+        <div class="four columns offset-by-two">
+          <label> Email </label>
+          <input type="text">
+          <small class="error" style="display:none"> Introduce un email válido </small>
+        </div>
+
+        <div class="two columns">
+          <label> No vacío </label>
+          <input type="text">
+          <small class="error" style="display:none"> Introduce algo </small>
+        </div>
+
+        <div class="two columns end">
+          <label> Numérico </label>
+          <input type="text">
+          <small class="error" style="display:none"> No es un número </small>
+        </div>
+
+      </div>
+
+      <div class="row">
+        <div class="two columns offset-by-two">
+          <a class="button success" href="#"> Validar </a>
+        </div>
+      </div>
+
+    </div>
+  </body>
+
+</html>
diff --git a/tema7/ejercicio4/codigo.js b/tema7/ejercicio4/codigo.js
@@ -0,0 +1,5 @@
+$(function() {
+
+  // ???
+
+});
diff --git a/tema7/ejercicio4/index.html b/tema7/ejercicio4/index.html
@@ -0,0 +1,70 @@
+<html>
+
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>js maquetadores - tema 7 - ej. 4</title>
+    <link rel="stylesheet" href="../../lib/stylesheets/foundation.min.css" type="text/css" media="screen" charset="utf-8">
+    <script src="../../lib/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
+
+    <script src="codigo.js" type="text/javascript" charset="utf-8"></script>
+
+    <style type="text/css" media="screen">
+      .air { margin-top: 100px; }
+      input { padding: 18px 10px; }
+      .cerrar { font-size: 24px !important; }
+      div.alert-box { padding: 10px; }
+    </style>
+
+  </head>
+
+  <body>
+    <div id="container">
+
+      <div class="air">
+      </div>
+
+      <div class="row">
+        <div class="eight columns offset-by-two">
+          <h2>Tareas</h2>
+          <hr />
+        </div>
+      </div>
+
+      <div class="row">
+        <div id="lista" class="eight columns offset-by-two">
+
+          <!-- Utiliza el contendio de #template como plantilla -->
+
+          <div id="template" style="display:none">
+            <div class="alert-box secondary">
+              <span class="tarea"> Texto de la tarea </span>
+              <a href="#" class="close cerrar">&times;</a>
+            </div>
+          </div>
+
+          <!-- Aquí van las tareas -->
+
+        </div>
+      </div>
+
+      <hr />
+
+      <div class="row">
+
+        <div class="six columns offset-by-two">
+          <input type="text">
+          <small class="error" style="display:none"> No puede estar vacío </small>
+        </div>
+
+        <div class="two columns end">
+
+          <a id="anadir" class="button success twelve columns radius" href="#"> Añadir </a>
+
+        </div>
+
+      </div>
+
+    </div>
+  </body>
+
+</html>
diff --git a/tema7/ejercicio5/codigo.js b/tema7/ejercicio5/codigo.js
@@ -0,0 +1,18 @@
+$(function() {
+
+  var info = $("#info");
+  var boton = $("#boton");
+  var input = $("#input")
+
+  info.hide();
+
+  boton.mouseover(function (e) {
+    info.html("Ratón sobre botón!");
+    info.stop().slideDown();
+  });
+  boton.mouseleave(function (e) {
+    info.html("El ratón ha salido del botón...");
+    info.stop().slideUp();
+  });
+
+});
diff --git a/tema7/ejercicio5/index.html b/tema7/ejercicio5/index.html
@@ -0,0 +1,48 @@
+<html>
+
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>js maquetadores - tema 7 - ej. 5</title>
+    <link rel="stylesheet" href="../../lib/stylesheets/foundation.min.css" type="text/css" media="screen" charset="utf-8">
+    <script src="../../lib/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
+
+    <script src="codigo.js" type="text/javascript" charset="utf-8"></script>
+
+    <style type="text/css" media="screen">
+      .air { margin-top: 100px; }
+      input { padding: 18px 10px !important; }
+    </style>
+
+  </head>
+
+  <body>
+    <div id="container">
+
+      <div class="air">
+      </div>
+
+      <div class="row">
+        <div class="eight columns offset-by-two">
+          <div class="panel">
+            <p id="info">
+              Info sobre el evento
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="four columns offset-by-two">
+          <a id="boton" class="button twelve columns" href="#"> Botón </a>
+        </div>
+
+        <div class="four columns end">
+          <input type="text" name="" id="input" value="" placeholder="Eventos del teclado aquí"/>
+        </div>
+
+      </div>
+
+    </div>
+  </body>
+
+</html>
diff --git a/tema7/ejercicio6/codigo.js b/tema7/ejercicio6/codigo.js
@@ -0,0 +1,17 @@
+$(function() {
+
+  $(".boton > a").click(function (e) {
+    var boton = $(e.currentTarget);
+    var mensaje = boton.parent().parent().find("h3");
+
+    boton.toggleClass("alert");
+    if (boton.hasClass("alert")) {
+      boton.html("Muéstrate");
+    } else {
+      boton.html("Ocúltate");
+    }
+
+    mensaje.fadeToggle();
+  });
+
+});