Tag Archives: jqTransform

jqTransform

16 oct

Hoy os vamos a enseñar una librería en jQuery para darle un aspecto distinto y elegante a nuestros formularios.

Para empezar vamos a bajarnos la librería de su página web oficial (dfc-e.com) y añadiremos la librería a nuestro sitio web como en el ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jqtransformplugin/jquery.jqtransform.js"></script>
<link href="../jqtransformplugin/jqtransform.css" rel="stylesheet" type="text/css" />

Añadimos como siempre la librería jQuery, añadimos la librería jqTransform y la hoja de estilos de esta.

Se activa para todas las etiquetas de formulario, input, radio, checkbox, textarea que tengamos entre las etiqueta <form> </form>

Podemos activarlo para todos los formularios que nos encontremos dentro de la página o para un formulario específico como en el siguiente ejemplo, se lo activamos al formulario con id form2:

<script type="text/javascript">
$(document).ready(function(){
	$("#form_2").jqTransform();
});
</script>

<form action="" name="form_2" id="form_2" method="post"></form>

De esta forma, una vez haya cargado la página, se activaría jqTransform para nuestro formulario. Si quisiéramos aplicar el estilo de la librería en algún contenido dinámico cargado vía Ajax, etc. O bien aplicar el estilo más adelante, de forma interactiva, lo podríamos hacer así:

<script type="text/javascript">
$(document).ready(function(){
	$('#formulario_3_act').click(function() {
		$("#form_3").jqTransform();
	});
});
</script>

En este ejemplo utilizamos la función click() de jQuery para aplicar la librería jqTransform, una vez que hayamos hecho click sobre el botón formulario_3_act que podéis ver en el ejemplo final: