16 - Evento dblclick.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <div id="recuadro">
    <h1>Doble clic para redimensionar</h1>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>
let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#recuadro");
  x.dblclick(dobleClic);
}

let estado = "grande";
function dobleClic() {
  let x = $(this);
  if (estado == "grande") {
    $(this).css("width", "250px");
    $(this).css("height", "250px");
    estado = "chico";
  }
  else {
    $(this).css("width", "800px");
    $(this).css("height", "70px");
    estado = "grande";
  }
}
#recuadro {
  color:#aa0;
  background-color:#ff0;
  position:absolute;
  text-align:center;
  left:40px;
  top:30px;
  width:800px;
  height:70px;
}

Disponer un div de 800x70 píxeles. Al hacer doble clic redimensionarlo a 250x250 píxeles y si se hace doble clic nuevamente retornar al tamaño 800x70.


Ver solución

pagina1.html





funciones.js




estilos.css



Retornar