jQuery.timepickr fue creado con la intención de mejorar el proceso de selección de hora de la manera más fácil y natural posible.

Está diseñado para ser unobstrusivo, y soporta “jQuery UI theme Switcher“, por lo que es completamente customizable.

Sus objetivos son:

• Ser inobstrusivo
• Uso máximo de 2 clicks.
• Navegación de teclado intuitivo.
• Ser usable en dispositivos táctiles.
• Compatible con browsers nuevos y viejos (Degrade Gracefully)

Requisitos: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/

[Via WebAppers]

Start Slide Show with PicLens Lite

La llamada AJAX

En principio se crea una funcion Multi-Browser, (para los que se preguntan por que multi-browser es simplemente que Microsoft tercamente sigue sin apegarse a los estandares). Pero bueno esa es otra historia.

var xml = {
	pag:
	function(url,id,func) {
		var pag=false;
		if ( window.XMLHttpRequest ) {
			pag = new XMLHttpRequest()
		}
		else if (window.ActiveXObject) {
			try{
				pag = new ActiveXObject("Msxml2.XMLHTTP")
			}
			catch(e) {
				try {
					pag = new ActiveXObject("Microsoft.XMLHTTP")
				}
				catch(e){ }
			}
		}
		else
			return false;
		return pag
	}
}

Una vez creada la llamada AJAX, veamos el primer ejemplo, el cual es enviar datos de un formulario a un arhcivo PHP y obtener respuesta de manera asincrona.

function sendData( nombre_, edad_ )
{
	var capa=document.getElementById(”datos”);

	var nombre = document.getElementById(nombre_).value;
	var edad = document.getElementById(edad_).value;

	// Creo el objeto AJAX

	// Coloco el mensaje “Cargando…” en la capa
	capa.innerHTML=”Enviando datos al servidor…”;

	send = “nombre=”+nombre+”&edad=”+edad;

	pag=xml.pag();
	pag.onreadystatechange=function()
	{
		if (pag.readyState==4)
		{
			// Cargo la respuesta del archivo llamado…

			capa.innerHTML=pag.responseText;
		}
	};

	pag.open(”POST”,”ajax_ej1.php”,true);
	pag.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”);
	pag.send(send);
}

Esta funcion lo que hace es recibir los valores del formulario, procesarlos, y enviarlos al script de lado servidor, de manera asi­ncrona.

El Script de lado servidor (Escrito en PHP, llamado ajax_ej1.php) Recibe los datos, y los procesa dependiendo de la condicion y envia respuesta, la cual es tomada por la funcion anteriormente descrita y a su vez, esta imprime el resultado en la capa (div) “datos”.

Veamos el Script PHP

<?php
	$nombre = $_POST["nombre"];
	$edad = $_POST["edad"];

	if ($edad >= 18)
	{
		echo “Hola “.$nombre.”, Eres Bienvenido.”;
	}
	else
	{
		echo “Lo siento “.$nombre.” No puedes entrar.”;
	}
?>

Para cualquier duda, aclaracion, o cri­tica no duden en enviarme un E-mail, con gusto lo respondere.

Ahora si quieren descargar el ejemplo lo pueden hacer dando clic aqui­, o bien si lo quieren ver funcionando den clic aca.

Tal ves algunos cuantos se dieron cuenta sobre el potencial que tiene este ejemplo para practicas reales, para los que no se dieron cuenta, con unas cuantas modificaciones se puede usar, por ejemplo, para altas de clientes (En un sistema empresarial), solo agregas unos cuantos campos al formulario y los pasas como parametros a la funcion JavaScript, y listo.

Gracias a nocrox, por la llamada AJAX.