Tag Archive for jquery

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

Reordanar listas con Drag and Drop usando Jquery ui Sortable

El metodo sortable de jQuery UI, nos hace la vida mas facil cuando queremos convertir esas listas comunes y corrientes en algo que podamos reordenar utilizando un simple drag and drop. Es una forma muy interactiva de manipular el DOM, y su uso es el siguiente.

Uso .sortable() en jquery UI

Seleccionamos una lista como una lista desordenada, ya una vez cargado el dom basta con mandarla a llamar via jQuery y listo solo usamos el metodo .sortable()

JQUERY UI:

$('#lista').sortable();

HTML:

<ul id="lista">
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>

 

En este ejemplo manejamos una lista reordenable una vez cargado el DOM, lo que se hace es ligar 2 listas con la propiedad “connectWith” que nos permite ligar dos listas y hacerlas “reordenables”.

Propiedades y eventos:

.sortable() también cuenta con una serie de parametros para configurar la funcionalidad del mismo, una de las propiedades mas usadas es “connectWith” que se utiliza para conectar 2 o mas listas entre sí y reordanar los elementos de manera que podemos trasladar elementos de una lista a otra.

También cuenta con eventos como “start” y “stop” que te permiten ejecutar codigo mientras sortable esta en ejecución.

Revisa una implementación muy basica en el siguiente ejemplo y video.

Codigo fuente (Solo copia y pega este codigo en un archivo html para ver el ejemplo):

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function()

			{
				$("#sortable,#sortable2").sortable(
					{
						connectWith:".s1",
						start:function(){
							//alert("Estas utilizando Drag and Drop");
						},
						stop:function(){
							//alert("Terminando de reorganizar");
						}
					})
				;

			}

			);

	</script>
</head>

<body>
	<ul id="sortable" class="s1">
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li>Elemento 4</li>
	</ul>
	<ul id="sortable2" class="s1">
		<li>Elemento 1s2</li>
		<li>Elemento 2s2</li>
		<li>Elemento 3s2</li>
		<li>Elemento 4s2</li>
	</ul>

</body>
</html>

 

Video tutorial:
En este video te explicaré exactamente como hicimos el ejercicio de arriba.

 

Efecto Parallax HTML5

Uno de los trends de diseño más importante en los últimos meses o el último año es el efecto Parallax. Muchas grandes agencias de diseño han construido sitios dignos de un awwward basados en este patrón.

El efecto Parallax, en general, se refiere a elementos dentro de un objeto visible que se mueven a distinta velocidad, así pues, es posible que el ejemplo más claro de Parallax lo hayamos visto jugando, por lo general, en un juego el fondo se mueve más lento que los personajes y/o assets, eso es Parallax. En diseño esto se ha aplicado en efectos vistosos, para ejemplo ésta página de Nike que muestra una aplicación que usa javascript para construir un efecto muy vistoso con elementos moviéndose y mostrándose en el foco a distintas velocidades.

Por lo general, el efecto se construye utilizando javascript, si bien puedes logar esa clase de resultados utilizando “javascript crudo”, es decir, sin plugins, en la web ya hay gente que ha pasado por esto y ha decidido regalarnos algunos plugins, entre los más populares:

Stellar.js: Échale un vistazo porque es la librería que utilizamos en el tutorial.

Scrollorama: Esta librería me parece genial, y un ejemplo de lo que puedes hacer con ella, lo encuentras en éste enlace.

Pasemos al código.

El código del tutorial es bastante sencillo, deduciendo que ya tienes la estructura de tu HTML, de la página a la que le aplicarás el efecto, vamos a enlazar un par de scripts, el primero es jQuery y el segundo Stellar.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src='https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.js'></script>

 

Ahora que tenemos listas las librerías, queda ejecutar la función de stellar para que ejecute los efectos correspondientes:

<script>
$(function(){
$(window).stellar();
});
</script>

 

Una vez hecho esto, stellar tomará una serie de atributos para definir el movimiento de los elementos al hacer el scroll, estos atributos son atributos data de HTML5, los valores de estos atributos van desde el 0 que significa sin movimiento, hasta cualquier valor entero, donde el 1 significa moverse a velocidad normal, y el 2 moverse al doble de velocidad que el resto de la página. Los atributos son:

  • data-stellar-ratio: Que define el movimiento de un elemento
  • data-stellar-background-ratio: Que define el movimiento del fondo de un elemento.

Existen más atributos para modificar el comportamiento de la página, y puedes checarlos en la documentación del plugin.

Sin más, quiero dejarte con un enlace para el vídeo tutorial en mi canal sobre este post.