Plugin jquery jqtransform, errores

Embellecer formularios es una tarea bastante dura con HTML, actualmente hay innumerables plugins para hacer este tipo de tareas pero el que he encontrado más sencillo de implementar y utilizar es jqtransform para jquery, aunque no está exento de fallos o de deficiencias notables, por ejemplo:

  • al cargarse los estilos de los formularios si un select es modificado por ajax los nuevos option no se muestran, hay que crear un código especial para agregar los nuevos option de manera que sean compatibles (yo no lo he hecho)
  • el plugin autocomplete de jquery ui no muestra la imagen de carga al procesar los datos, esto supongo que sea porque sobre escribe los estilos y no muestra la imagen.
  • el mismo plugin anterior no redimensiona correctamente el tamaño del input dejándolo más pequeño, a un tamaño de 16 px por lo que antes de escribir debemos utilizar el método width de jquery para cambiar el tamaño del input a uno más grande.

Para solucionar el punto 1 intenté primero modificar el plugin jqtransform para que no me modificara los select lo cual es bastante sencillo pero entonces se me descuadraba todo el formulario por lo que opté por crear una clase y los elementos que tengan esta clase no son transformados y así puedo ubicar estos en una parte distinta del código quedando visualmente bonitos, para ello debemos ubicar en el código javascript la línea:

if($select.hasClass('jqTransformHidden')) {return;}

Y agregar delante lo siguiente:

if($select.hasClass('jqTransformNoStyle')) {return;}

Donde jqTransformNoStyle es la clase de los elementos a los cuales no queremos aplicarle los estilos.

Comentarios

Unknown ha dicho que…
Hola mi buen amigo, esta excellente tu post, aunque quisiera objetarte, en primer lugar hacerte mencion que estoy creando una plantilla dinamica para aplicacion web 2.0 (cms webservice), full jquery,webservice,json,ajax y php, en fin me tope en el camino con este plugin (jqtransform), el cual no me respondia a eventos y tras revisar bien el codigo del desarrollador me tope, que no hay nada malo en su codigo, si no que no invoca a los eventos sobre cada control, sea el caso de los select al tratar de invocar su evento $.change no respondia, el unico cambio que hay que hacer es adicionarle estos metodos al plugin.

El plugin separa sus eventos por funciones, nos hubicamos en el evento select
ubicar:
/***************************
Select
***************************/
asi es el comentario

dentro de el ubicar la siguiente linea

$ul.find('a').click(function(){
$('a.selected', $wrapper).removeClass('selected');

y justo despues de esta linea
$select[0].selectedIndex = $(this).attr('index');

adicionar
$select.trigger('change');

el $.trigger obliga al control a ejecutarse en el evento que le indiquemos de esta forma fuera de nuestro plugin podemos hacer los que necesitamos

$('#tipo_llamada').change(function(){
if($('#tipo_llamada').val()==0) $('#fila01').fadeIn();
if($('#tipo_llamada').val()==1) $('#fila01').fadeOut();
if($('#tipo_llamada').val()==2) $('#fila01').fadeIn();
if($('#tipo_llamada').val()==3) $('#fila01').fadeOut();
});

justamente queria validar el tipo de dato que escogiamos y mostrar/ocultar un tr

antes de irme dejo el link de mi proyecto http://plantiweb.zobyhost.com/

un saludo espero haber ayudado
Reynier ha dicho que…
Muy buen comentario Luis por supuesto que has ayudado mucho con este post, creo que es lo que le faltaba, muchas gracias pro tu colaboración