problema creacion de plugin jquery

cristhianrios426 · #1 (**permalink**) 12/05/2012, 11:42

bueno este es mi problema. he estado investigando y pues he creado un "plugin" jquery. lo unico que hace el plugin es agregar un div con texto a un elemento (el texto puede ser cambiado en los argumentos) y agrega un evento a este elemento para esconder el padre. todo bien mientras lo ejecuto uno por uno sobre cada objeto con el div, pero cuando uso un selector que encapsule varios objetos deja de funcionar. que estoy haciendo mal?

este es el archivo

Código Javascript:

Ver original(function($){
        $.fn.prueba = function(options)
        {
            defaults={
                texto:'texto default'                       
                };
 
            var options= $.extend(defaults,options);
            var base=this;
            var probador
 
            this.mostrarTexto=function(texto){
                probador=$('<div></div>');//genera el contenedor de texto
                probador.html(texto);//genera el texto en el contenedor
                base.html(probador);
            }
            
 
            this.mostrarTexto(options.texto);
 
            probador.click(function(){
                base.hide('slow');
                });
        }
})(jQuery);

este es el html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="jquery.bxSlider.min.js"></script>
<script src="prueba.js"></script>
<script>

$(document).ready(function(){
		
	$('#div1').prueba();
	
	$('#div2').prueba({
		
		texto:'texto seteado',
		
		});
		
		/*$('.div').prueba();*/
	
});
</script>
</head>

<body>

<div id="div1" class="div" style=" width:200px; height:200px; border:1px #000 solid">
</div>

<div id="div2" class="div" style=" width:200px; height:200px; border:1px #000 solid">
</div>

</body>
</html>

Naahuel · #2 (**permalink**) 12/05/2012, 13:08

Te hago un par de correcciones.

1.- Tratá siempre de usar $(this) en lugar de this. De esta forma convertís el objeto a un objeto jQuery y podés aplicarle sus métodos.

Esto no funciona:

Código Javascript:

Ver originalvar base=this;
base.html(probador);

dado que base no es un objeto jQuery.

2.- Para que tu plugin funcione con todos los elementos que se pasa en el selector, tenés que usar .each(). De esta forma la acción se ejecuta para cada elemento.

Te paso el plugin con esas dos correcciones. Analizalo y fijate cuales son los cambios.

Código Javascript:

Ver original(function($){
        $.fn.prueba = function(options)
        {
            defaults={
                texto:'texto default'                       
                };
 
            var options= $.extend(defaults,options);
           $(this).each(function(){
                var base=$(this);
                var probador;
     
                this.mostrarTexto = function(texto){
                    probador = $('<div></div>');//genera el contenedor de texto
                    probador.html(texto);//genera el texto en el contenedor
                    base.html(probador);
                }
                
     
                this.mostrarTexto(options.texto);
     
                probador.click(function(){
                    base.hide('slow');
                });
           });
        }
})(jQuery);

cristhianrios426 · #3 (**permalink**) 12/05/2012, 16:28

Muchas graaaaaciaas ... funca de maravilla... ahora si a desarrollar plugins se ha dicho...

y solo por si acaso... no tienes un libro de jquery avanzado que me pases?

Naahuel · #4 (**permalink**) 12/05/2012, 16:39

Que bueno que lo solucionaste.

Y fui aprendiendo solo, leyendo la documentación e investigando. Hace unos meses me dí con esto:
http://tutsplus.com/course/30-days-to-learn-jquery/

Ese curso es excelente. Por lejos el mejor que hay disponible gratuitamente.
Son varias lecciones de jQuery. Cuando salió ellos te mandaban una lección por día durante un mes. El único problema es que está en inglés y si no sabés, te las ves negras :P