Foros del Web » Programando para Internet » Javascript » Frameworks JS »

primer plugin

Estas en el tema de primer plugin en el foro de Frameworks JS en Foros del Web. Hola a todos. Estoy en la creacion de mi primer plugin y como imaginareis, me hago lios... El codigo en si es muy sencillo, pero ...
  #1 (permalink)  
Antiguo 28/05/2011, 17:16
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 10 años, 3 meses
Puntos: 11
primer plugin

Hola a todos. Estoy en la creacion de mi primer plugin y como imaginareis, me hago lios...

El codigo en si es muy sencillo, pero no se pq no funciona. creo que es debido a los problemillas de conceptos...

me echais un cable??

Código Javascript:
Ver original
  1. $.fn.validaRegistro = function (mensaje) {
  2.     $(this).each(function() {
  3.         var pos = $(this).position();
  4.         var veloc2 = 1000;
  5.         var nombre = $("#nombre");
  6.         var veloc = 600;
  7.         var c_valido = "silver";
  8.         var c_error = "#FF8B8F";
  9.        
  10.         function error(mensaje){
  11.             $(this).css({border:'2px solid red'});
  12.             $(this).animate({backgroundColor: c_error},veloc);
  13.             var div = "<div class='tooltip-registro'>" + mensaje + "</div>";
  14.             $(this).after(div);
  15.            
  16.             var posLeft = pos.left + $(this).width();
  17.             var posTop = pos.top;
  18.             $(this).next().css({"top": posTop + "px","left": posLeft + "px","position": "absolute"});
  19.         }
  20.        
  21.         function valido(){
  22.             $(this).css({border:'2px solid #000'});
  23.             $(this).animate({backgroundColor: c_valido},veloc);
  24.             $(this).next().fadeOut(veloc2);
  25.         }
  26.        
  27.         function validaNombre(){
  28.             if(nombre.val().length < 4 || nombre.val().length > 15)
  29.                 {error(mensaje);}
  30.             else if(!$(this).val().match(/^[0-9a-zA-Z]+$/))
  31.                 {error(mensaje);}
  32.             else
  33.                 {valido();}
  34.         }
  35.  
  36. $(this).focusin(function(){$(this).next().fadeOut(veloc2);});
  37. $(this).blur(validaNombre);
  38.        
  39. });
  40. }

Código HTML:
Ver original
  1. $(document).ready(function(){
  2. <script language="javascript" type="text/javascript">
  3. $("#nombre").validaRegistro("El nombre solo puede contener letras y numeros. Debe tener entre 4 y 15 caracteres");
  4. });

Gracias!
  #2 (permalink)  
Antiguo 28/05/2011, 17:57
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 14 años, 11 meses
Puntos: 87
Respuesta: primer plugin

Ese no es realmente el html; y solo lo copiaste mal cierto?
  #3 (permalink)  
Antiguo 28/05/2011, 18:03
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 10 años, 3 meses
Puntos: 11
Respuesta: primer plugin

Si. me equivoque

Código HTML:
Ver original
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  2. <script src="../plugins/jquery-1.4.2.min.js" type="text/javascript"></script>
  3. <script src="registro.js" type="text/javascript"></script>
  4. <script language="javascript" type="text/javascript">
  5. $(document).ready(function(){
  6.  
  7. $("#nombre").validaRegistro("El nombre solo puede contener letras y numeros. Debe tener entre 4 y 15 caracteres");
  8.  
  9. });
  10.  
  11.         <div>
  12.             ...
  13.             <label for="nombre">Nombre</label>
  14.             <input type="text" id="nombre" name="usuario" size="22"/>
  15.             ...
  16.         </div>
  17.  
  18. </html>
  #4 (permalink)  
Antiguo 28/05/2011, 18:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.603
Antigüedad: 18 años, 6 meses
Puntos: 1283
Respuesta: primer plugin

Hola:

¿A qué llamas "plugin"...?

No habrás querido decir función o tal vez script...

Deberías comentar qué pretendes con tu código.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 28/05/2011, 18:26
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 12 años, 9 meses
Puntos: 845
Respuesta: primer plugin

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

¿A qué llamas "plugin"...?

No habrás querido decir función o tal vez script...

Deberías comentar qué pretendes con tu código.

Saludos
Es un plugin para jQuery, un validator
__________________
http://es.phptherightway.com/
thats us riders :)
  #6 (permalink)  
Antiguo 28/05/2011, 18:28
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 10 años, 3 meses
Puntos: 11
Respuesta: primer plugin

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

¿A qué llamas "plugin"...?
Creia que a esto:

Código Javascript:
Ver original
  1. $.fn.validaRegistro = ...

Lo que quiero es que aparezca y desaparezca el div tras ejecutar la funcion de validacion. Se trata de un tooltip de validacion para un formulario.
  #7 (permalink)  
Antiguo 29/05/2011, 17:45
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 10 años, 3 meses
Puntos: 11
Respuesta: primer plugin

Lo he modificado un poco, pero sin llegar a funcionar bien.

Código Javascript:
Ver original
  1. $.fn.validaRegistro = function (tipo) {
  2.     $(this).each(function() {
  3.         var pos = $(this).position();
  4.         var veloc2 = 800;
  5.         var nombre = $("#nombre");
  6.         var clave = $("#clave");
  7.         var veloc = 600;
  8.         var mensaje = "";
  9.  
  10.         function error(mensaje){
  11.             $(tipo).css({borderColor:'#FF0000'});
  12.  
  13.             var posLeft = pos.left + $(tipo).width() +15;
  14.             var posTop = pos.top -5;
  15.             var div = "<div class='tooltip-registro'>" + mensaje + "</div>";
  16.             $(tipo).after(div);
  17.             $(tipo).next().css({"top": posTop + "px","left": posLeft + "px","position": "absolute"});
  18.             return false;
  19.         }
  20.  
  21.         function valido(){
  22.             $(tipo).css({borderColor:'#FFF'});
  23.         }
  24.  
  25.         function validaNombre(){
  26.             if(nombre.val().length < 4 || nombre.val().length > 15) {
  27.                 mensaje = 'El nombre debe tener entre 4 y 15 carácteres.';
  28.                 error(mensaje);
  29.             }
  30.             else if(!(nombre.val().match(/^[0-9a-zA-Z]+$/))) {
  31.                 mensaje = 'El nombre sólo puede contener letras y números.';
  32.                 error(mensaje);
  33.             }
  34.             else
  35.                 {valido();}
  36.         }
  37.  
  38.         function validaClave(){
  39.             if(clave.val().length < 6 || clave.val().length > 15) {
  40.                 mensaje = 'La clave debe tener entre 4 y 15 carácteres.';
  41.                 error(mensaje);
  42.             }
  43.             else if(!(clave.val().match(/^[0-9a-zA-Z]+$/))) {
  44.                 mensaje = 'La clave sólo puede contener letras y números.';
  45.                 error(mensaje);
  46.             }
  47.             else
  48.                 {valido();}
  49.         }
  50.  
  51. $(this).focusin(function(){
  52.     $(this).next(".tooltip-registro").fadeOut(veloc2);
  53.     $(this).css({borderColor:'#FFFF00'});
  54. });
  55.  
  56. nombre.focusout(validaNombre);
  57. clave.focusout(validaClave);
  58.        
  59. });
  60. }

Código HTML:
Ver original
  1. <script language="javascript" type="text/javascript">
  2. $(document).ready(function(){
  3. $("#nombre").validaRegistro("#nombre");
  4. $("#clave").validaRegistro("#clave");
  5. });

Se ejecuta sobre los 2 divs a la vez...

alguien me puede decir como modificarlo??
  #8 (permalink)  
Antiguo 29/05/2011, 20:36
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 14 años, 11 meses
Puntos: 87
Respuesta: primer plugin

Si ya esta en este nivel de javascript ya debería poder identificar que partes "no funcionan bien" haciendo uso de alerts y quitando partes para ver cual es la que tiene problemas.
  #9 (permalink)  
Antiguo 30/05/2011, 17:35
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 10 años, 3 meses
Puntos: 11
Respuesta: primer plugin

Ok. Creo q ya se por donde iban los tiros.
Muchas gracias.

Etiquetas: javascript, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:57.