mjcarrascosa.com » jQuery http://mjcarrascosa.com Desarrollo web y otras hierbas Fri, 08 Jul 2011 07:41:10 +0000 en hourly 1 Hacer visible un campo password con jQuery http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/ http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/#comments Mon, 26 Apr 2010 00:20:06 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=597 Los campos de tipo password no muestran el contenido que tecleamos, evidentemente para evitar que alguien pueda ver nuestras contraseñas. Pero en ocasiones, por ejemplo cuando estamos en casa y no hay nadie cerca, nos puede interesar mostrar el contenido de estos. Usando la librería jQuery podemos hacer esto de forma muy sencilla.

Vamos a ver primero el código de nuestro formulario:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Login</title>
      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="login.js"></script>
   </head>
   <body>
      <form onsubmit="return false;">
         <label for="user">Usuario:</label><input type="text" name="user" id="user"/><br/>
         <label for="password">Password:</label><input type="password" name="password" id="password"/><br/>
         <input type="checkbox" id="show"/> <label for="show">Mostrar password.</label><br/>
         <input type="submit" value="login"/>
      </form>
   </body>
</html>

Es un formulario muy sencillo, ni siquiera envia datos, pero nos sirve como ejemplo. Podemos ver que añadimos dos scripts a la página, el de jQuery y el que contendrá el código para mostrar el campo password. También observamos que hay un campo checkbox que tendremos que seleccionar para ver el contenido de campo password.

Ahora vamos con el código para mostrar el valor del campo, que está en el archivo login.js:

$(document).ready( function(){

   $('#show').attr('checked', false);

   $('#show').click(function(){

      name = $('#password').attr('name');
      value = $('#password').attr('value');
      if($(this).attr('checked'))
      {
         html = '<input type="text" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
      else
      {
         html = '<input type="password" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
   });
});

Básicamente lo que hacemos es añadir un evento click al campo checkbox. Cuando se hace click sobre el checkbox este comprueba su valor y sustituye el campo, por otro igual del tipo que corresponda, password cuando no está seleccionando y text cuando lo está, dándole el mismo valor a los atributos de este.

Podéis ver una demo en el siguiente enlace:

Demostración de como hacer visible un campo password con jQuery

Y también podéis descargar los archivos de la demo:

Archivos para hacer visibe un campo password con jQuery

]]> http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/feed/ 1 Los efectos especiales de jQuery http://mjcarrascosa.com/los-efectos-especiales-de-jquery/ http://mjcarrascosa.com/los-efectos-especiales-de-jquery/#comments Sat, 18 Jul 2009 23:36:06 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=284 Ya he hablado anteriormente del framework jQuery. Hoy vamos a comentar los efectos especiales que implementa el framework.

Efectos básicos:

Efecto Descripción
Show() Muestra los elementos seleccionados.
Show(speed, callback) Muestra los elementos seleccionados a la velocidad indicada y al final lanza un callback si se ha indicado.
hide() Oculta los elementos seleccionados.
hide(speed, callback) Oculta los elementos seleccionados a la velocidad indicada y al final lanza un callback si se ha indicado.
toggle() Conmuta la visibilidad de los elementos seleccionados.
toggle(switch) Conmuta la visibilidad de los elementos seleccionados en función del valor del parámetro switch. Si es true lo muestra, si es false lo oculta.
toggle(speed, callback) Conmuta la visibilidad de los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicado.

Efectos móviles:

Efecto Descripción
slideDown(speed, callback) Despliega los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicado.
slideUp(speed, callback) Encoge los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicada.
slideToggle(speed, callback) Muestra u oculta el elemento mediante despliegue dependiendo de como estuviera. Al final lanza un callback si se ha indicado.

Efectos de fundido:

Efecto Descripción
fadeIn(speed, callback) Muestra mediante un fundido los elementos seleccionados. Al final lanza un callback si se ha indicado.
fadeOut(speed, callback) Oculta mediante un fundido los elementos seleccionados. Al final lanza un callback si se ha indicado.
fadeTo(speed, opacity, callback) Realiza un fundido de los elementos seleccionados hasta la opacidad indicada. La opacidad es un número entre 0 (transparente) y 1 (opaco). Al final lanza un callback si se ha indicado.

En todos los métodos en los que se puede indicar la velocidad esta tomara los valores ‘slow’, ‘normal’, ‘fast’ o el número de milisegundos que durará la animación.

Después de esto vamos a ver un pequeño ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Efectos especiales con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<style>
 .cuadro {
 	background-color:#4682b4;
 	color: #fff;
 	padding: 5px;
 	width: 400px;
 	border-width: 2px;
 	border-color: #000;
 	border-style: solid;
 }
</style>
</head>
<body>
<h1>Efectos especiales con jQuery</h1>
<a href="#" onclick="$('#c1').show();">[show]</a> <a href="#" onclick="$('#c1').hide();">[hide]</a> <a href="#" onclick="$('#c1').toggle();">[toggle]</a><br/>
<a href="#" onclick="$('#c1').slideDown('slow');">[slideDown]</a> <a href="#" onclick="$('#c1').slideUp('slow');">[slideUp]</a> <a href="#" onclick="$('#c1').slideToggle('slow');">[slideToggle]</a><br/>
<a href="#" onclick="$('#c1').fadeIn('slow');">[fadeIn]</a> <a href="#" onclick="$('#c1').fadeOut('slow');">[fadeOut]</a><br/>
<a href="#" onclick="$('#c1').fadeTo('slow', 0);">[fadeTo 0%]</a> <a href="#" onclick="$('#c1').fadeTo('slow', 0.25);">[fadeTo 25%]</a>
<a href="#" onclick="$('#c1').fadeTo('slow', 0.5);">[fadeTo 50%]</a> <a href="#" onclick="$('#c1').fadeTo('slow', 0.75);">[fadeTo 75%]</a>
<a href="#" onclick="$('#c1').fadeTo('slow', 1);">[fadeTo 100%]</a><br/>
<div id="c1" class="cuadro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mauris risus.
Duis ornare euismod fringilla. Etiam nec ante sem, a cursus massa. Duis rutrum
metus blandit tellus rhoncus quis sodales lacus porttitor. Quisque posuere,
metus eu imperdiet egestas, diam justo ornare est, quis lacinia enim eros id massa.
Curabitur volutpat porta iaculis. Proin vitae elit sodales leo lacinia tincidunt.
</div>
</body>
</html>

Podéis ver este ejemplo en acción aquí. También podéis descargar el código con los ejemplos, algo recomendado para poder tocar si queréis:

Ejemplo de efectos con jQuery

]]> http://mjcarrascosa.com/los-efectos-especiales-de-jquery/feed/ 2 Breve tutorial de AJAX con jQuery http://mjcarrascosa.com/breve-tutorial-de-ajax-con-jquery/ http://mjcarrascosa.com/breve-tutorial-de-ajax-con-jquery/#comments Thu, 11 Jun 2009 20:56:07 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=121 Hace unos días se explicaba como utilizar AJAX con Prototype. Hoy le toca el turno a jQuery. Vamos a verlo con un pequeño ejemplo idéntico al que hicimos para Prototype.

ejemploAJAXconjQuery.html:

<html>
<head>
<title>Ejemplo de AJAX con jQuery</title>
<script src="./jquery.js" type="text/javascript"></script>
<script src="./ejemploAJAXconjQuery.js" type="text/javascript"></script>
</head>
<body>
<div>
  <ul>
    <li><a href="javascript:ejemploAJAX(1);">Obtener texto 1.</a></li>
    <li><a href="javascript:ejemploAJAX(2);">Obtener texto 2.</a></li>
    <li><a href="javascript:ejemploAJAX(3);">Obtener texto 3.</a></li>
  </ul>
</div>
<div id="resultado">
</div>
</body>
</html>

Con estro creamos una lista con tres enlaces. Al hacer click sobre cada uno de ellos se llama a la función ejemploAJAX y le pasamos un valor numérico. En la cuarta linea podemos observar como se añade el archivo jquery.js. Este es el archivo que contiene la librería.

Veamos ahora nuestra función ejemploAJAX:

ejemploAJAXconjQuery.js:

function ejemploAJAX(textID)
{
	var params = "textid=" + textID;
	$.ajax({
		type: "get",
		url: "ejemploAJAXconjQuery.php",
		data: params,
		success: function(respuesta) {
			$('#resultado').html(respuesta);
		}
	}
	);
}

Como se puede apreciar se crea una variable llamada params con los parámetros que tendrá la llamada al script que nos devolverá el resultado. Con $.ajax accedemos a la función encargada de realizar el manejo AJAX. A esta función se le pasan varios parámetros para controlar a donde debemos ir a por la información y como realizar la petición. En este caso le pasamos cuatro parámetros, que son el tipo (type), en este caso le indicamos que use el método get, la url del script, los parámetros y la función que se ejecutará cuando la petición se haya realizado correctamente. Como se puede apreciar los parámetros van encerrados entre los corchetes { y } y en el formato parámetro : valor, y separadas por comas.

La función que se ejecuta cuando se realiza correctamente la petición se define, en este caso, en el propio valor del parámetro success. Esta función recibe un parámetro (html) que es la respuesta de nuestro script. En el cuerpo de la función lo único que hacemos es seleccionar el elemento cuyo id es resultado. Para eso usamos la función $ y le pasamos ‘#resultado’ para acceder al elemento. Llamamos al método html pasándole el parámetro respuesta para hacer que el contenido de ese elemento sea la respuesta de nuestro script.

Vamos a ver ahora el script que nos da la respuesta. Un script muy sencillo, pero útil para un ejemplo.

ejemploAJAXconjQuery.php:

<?php

switch($_GET['textid'])
{
	case 1:
		echo "Texto de ejmplo uno.";
		break;
	case 2:
		echo "Texto de ejmplo dos.";
		break;
	case 3:
		echo "Texto de ejmplo tres.";
		break;
}
?>

Simplemente en función de la variable textid, el parámetro que le pasamos, nos devuelve un texto u otro. Como se puede ver es idéntico al script del tutorial de Prototype.

En este caso, al ser un ejemplo, el texto devuelto es muy simple, pero podríamos haber devuelto la información en formato XML o JSON para luego procesarlo mediante JavaScript en nuestra página.

Con esto termina este tutorial sobre AJAX y jQuery. Es recomendable tener siempre a mano la documentación de jQuery, donde se pueden var algunos ejemplos y donde vienen explicados todas las funciones, métodos, etc, de la librería.

Y como siempre los ficheros con el ejemplo:

Ejemplo de AJAX con jQuery

]]> http://mjcarrascosa.com/breve-tutorial-de-ajax-con-jquery/feed/ 0