Como hacer un plugin de jquery basico

Cada vez los plugins de jQuery se hacen mas y mas comunes, asi que porque no hacer uno propio?

Hacer un plugin basicamente solo es necesario saber javascript/jquery y manejar una plantilla para extender jQuery con nuestro plugin.

Para ello debemos crear un archivo .js donde crearemos nuestro plugin y usar esta plantilla.

(function( $ ){
    $.fn.miPlugin= function() {
       /*Todo el codigo de tu plugin*/
  };
})( jQuery );

Donde “miPlugin” seria el nombre de la función mediante la cual mandaremos a llamar a nuestro plugin, en este caso para mandar a llamar la función es necesario mandar a llamar un objeto de jQuery y simplemente usar la función.

$('#elemento').miPlugin()

En el siguiente ejemplo tenemos un plugin muy sencillo que sirve para activar una animación personalizada cuando se haga un hover sobre un elemento. Primero dejare la plantilla usada en HTML y luego el plugin

Plantilla HTML

<!DOCTYPE html>
<head>

<style type="text/css">
	div{
		float:left;
		width: 400px;
		height: 200px;
		border-style: outset;
	}
</style>

</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-plug.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('').animar()

})

</script>

<div id="myDiv1"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>

<div id="myDiv2"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>

<div id="myDiv3"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>

</body>

 

El plugin en javascript

/*
* Author: Jorge V
*/
(function( $ ){
    $.fn.animar= function() {

    	$this = $(this)
    	$this.hover(function(){
    		$this.animate({
    			height:'250px',
    			width:'230px'
    		})
    	})

  };
})( jQuery );

Video tutorial de como hacer este plugin basico

Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

One comment

  1. 34t3 says:

    a esa mierda le llamas plugin?? esto no es basico, esto es nivel retrasado mental

    donde mierda estan los metodos publicos, privados, herencia?

Leave a Reply

Your email address will not be published. Required fields are marked *