Inicio JavaScript JQuery Como crear un plugin para jquery

Como crear un plugin para jquery

Lunes, 11-05-2015 10:23 - Leer comentarios - Comentar

Asi crearemos nuestro plugin para jquery Este seria el codigo base necesario , donde 'miFuncion' seria el nombre de la funcion que queremos crear y dentro tendriamos que poner el codigo que queremos que realice nus¡estra funcion
JavaScript
   
jQuery.fn.extend(  
        miFuncion: function(){  
            /*Código aquí*/  
        };  
    );
Con el código anterior ya podremos hacer cosas como esta: $("body>div").miFuncion();
En esta funcion que veremos a continuacion lo que hacemos es que recorra todo el body y busque todos los div y les de el color que le hemos puesto
JavaScript
    
jQuery.fn.extend({  
            red: function(){  
                /*Recorre todos los elementos encapsulados*/  
                this.each(function(){  
                    /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento DOM por el que se está pasando*/  
                    jQuery(this).css("color","#F00");  
                });  
            }  
    }); 
 $("body>div").red();
Otro ejemplo seria
JavaScript
    jQuery.fn.extend({  
            fijarTexto: function(texto,activeColor,disabledColor){  
                /*Recorre todos los elementos encapsulados*/  
                this.each(function(){  
                    /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento 
                    DOM por el que se está pasando*/  
                    var $this = jQuery(this); //Convertimos a jQuery  
                    /*Esto es para la primera vez*/  
                    $this.css("color",disabledColor).val(texto);  
                    /*Cuando recibe el foco, si está el texto por defecto, lo borra y cambia el color*/  
                    $this.focus(function(){  
                        if($this.val() == texto){  
                            $this.val("").css("color",activeColor);  
                        }  
                    });  
                    /*Cuando pierde el foco, si está vacío, pone el texto por defecto y cambia el color*/  
                    $this.blur(function(){  
                        if(jQuery.trim($this.val()).length==0){  
                            $this.css("color",disabledColor).val(texto);  
                        }  
                    });  
                });  
           }  
    });
LLamaremos a la funcion
JavaScript
$(document).ready(function(){  
        $("#login").fijarTexto("Usuario","#000","#BCBCBC");  
        $("#password").fijarTexto("Contraseña", "#000","#BCBCBC");  
});

Tags

crear, plugin, jquery

Comentarios

No se permiten comentarios en este momento.