Comunidad de diseño web y desarrollo en internet online

CREAR EVENTO ¡¡DOS VECES CLICK !! UTILIZANDO JQUERY http://foros.crist

Citar            
MensajeEscrito el 03 Jul 2013 03:56 am
RESULTADO FINAL : http://www.youtube.com/watch?v=sr_RCfPk-dg&feature=youtu.be

^^ VAMOS A CREAR UN NUEVO EVENTO PARA JAVASCRIPT
Los eventos son algo muy importante al momento de desarrollar nuestros proyectos en js y existen muchos y muy variados en sus propiedades como :
-mousemove
-mousedown
-mouseup
-click
-dblclick


bla bla bla.....

Pero que pasa cuando necesitamos un evento en especifico para nuestro proyecto
como : twoclicks sencillamente no existe :shock: pero que necesitamos desesperará mente en este tutorial te voy a enseñar a crear un evento en especifico que he bautizado como " TWOCLICKS " que considero no se denota como muy útil al inicio pero que a largo plazo vas a amar ["por que tu lo creaste " ] y por su practicad para el usuario


1-DOCUMENTO HTML 5 "DE TODA LA VIDA "

Código HTML :

<!DOCTYPE html>
<html>
<lang ="es"></lang>
<meta charset="utf-8">
<title > ¡NUEVO EVENTO JQUERY! </title>
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<link[html][/html] rel="stylesheet" type="text/css" href="estilo.css">

</head>

<body>

<script src="main.js"></script>
</body>
</html>


NOTE que el documento js esta enlazado en el final de !body¡ para que no interfiera con el render de la pagina , también el importante recordar cargar el jquery y el css3 en el !head¡

Código HTML :

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<link[html][/html] rel="stylesheet" type="text/css" href="estilo.css">


2-EN EL DOCUMENTO JAVASCRIPT

Código Javascript :

$(document).on('ready',function()
{


});


"NOTE que lo primero que hacemos es cargar a jquery"


3-CREAMOS 2 VARIABLES

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

});


NOTE. que el valor de las variables es distinto por el factor de 1 es decir que una es mayor que la otra por 1



4-LE ASIGNAMOS EL EVENTO CLICK A UN DIV
el evento click de toda la vida en jquery y tambien agregamos un incremento con el ++ a las dos varibles

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

});


NOTE que como va incrementando cada vez que se le da click y pero la variable [b]"y" siempre va hacer mayor por el factor de 1 [/b].


5-EVALUAMOS LAS VARIABLES
condicionamos con un

Código Javascript :

if
y declaramos que la variables "x" debe ser menor a la de "y"
y ponemos un

Código Javascript :

else
para decir que en caso de que pase ejecute el codigo de el else
y almacenamos el valor de las variables en la consola con

Código Javascript :

 console.log

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

if( x < y)
{       
 
   console.log( x +" " +" es menor que  " + y);
  
}


else
{
   console.log(x +" " +" es mayor que " + y);
}

});


NOTE que como va incrementando cada vez que se le da click y pero la variable "y" siempre va hacer mayor por el factor de 1 y por eso el codigo del else nunca se va ha ejecutar.






6-OK OK OK ¡AQUI OCURRE LA MAGIA ! :lol:
Declaramos un if dentro del primero condicional es decir el codigo que se va a ejecutar es otra evaluación o condición y lo que dice que si la variables (x) para que la examine sin ninguna condición entonces va decrementar el valor a la variable "y" con --

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

if( x < y)
{       
    if(x)
   {
     --y
   console.log( x +" " +" es igual a " + y);
   }

}


else
{
   console.log(x +" " +" es mayor que " + y);
}

});


RECUERDE que la variable "y" vale uno y lo que queremos hacer es que la condiciones alternen el valor de esta misma volviendo la falsa en un caso y verdadera en otro todo dentro del mismo evento "click"







7-¡ALTERNAR!

Ok ahora en como la condición ya no es verdadera va ha ejecutar el codigo de el else
y lo que hacemos nosotros en el else es hacer lo contrario de lo que hicimos en el if
y le devolvemos su atributo a la variable "y" entonces básicamente lo que haces es volverla verdadera entonces cuando el evento se vuelva a dispara x < y

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

if( x < y)
{       
    if(x)
   {
     --y
   console.log( x +" " +" es igual a " + y);
   }

}


else
{
      if(x)
   {
      y++
   console.log(x +" " +" no es igual a " + y);
   }
   
}

});


NOTE que de esa manera logramos que la variables "y" alterne entre verdadera y falsa cada vez que se le da click "es decir cuando se le de el primer click va hacerverdadera y cuando se le vualva a dar click sera falsa"




LISTO YA CREAMOS NUESTRO EVENTO
SOLO RECUERDA LA CLAVE ESTA EN HACER QUE LA VARIABLE ALTERNE

AQUI PUEDES VER http://www.youtube.com/watch?v=sr_RCfPk-dg&feature=youtu.be LA APLICACION EL EVENTO.

PRONTO SUBIRE OTRO TUTORIAL EXPLICANDO COMO HICE EL ESTILO DEL VIDEO Y EN MAS DETALLE TODO LO QUE PARARE EN EL VÍDEO.

SI TIENES DUDAS PONTE EN CONTACTO CONMIGO https://twitter.com/esnene02

Y EL CÓDIGO DE ESTE TUTORIAL ESTA MI CUENTA DE GITHUB https://github.com/Maxtermax/nuevo_evento
JUNTO CON OTRAS "COSILLAS INTERESANTES " :lol:

GRACIAS POR ESTAR HASTA EL FINAL Y SUS COMENTARIOS SON VALIOSOS PARA MI :lol: :lol: :lol: :lol:

Por Esneyder Amin

1 de clabLevel



Genero:Masculino  

Esneyder,js,css3

chrome
Citar            
MensajeEscrito el 05 Jul 2013 10:59 pm

Esneyder Amin escribió:

RESULTADO FINAL : http://www.youtube.com/watch?v=sr_RCfPk-dg&feature=youtu.be

VAMOS A CREAR UN NUEVO EVENTO PARA JAVASCRIPT
Los eventos son algo muy importante al momento de desarrollar nuestros proyectos en js y existen muchos y muy variados en sus propiedades como :
-mousemove
-mousedown
-mouseup
-click
-dblclick


bla bla bla.....

Pero que pasa cuando necesitamos un evento en especifico para nuestro proyecto
como : twoclicks sencillamente no existe pero que necesitamos desesperará mente en este tutorial te voy a enseñar a crear un evento en especifico que he bautizado como " TWOCLICKS " que considero no se denota como muy útil al inicio pero que a largo plazo vas a amar ["por que tu lo creaste " ] y por su practicad para el usuario


1-DOCUMENTO HTML 5 "DE TODA LA VIDA "

Código HTML :

<!DOCTYPE html>
<html>
<lang ="es"></lang>
<meta charset="utf-8">
<title > ¡NUEVO EVENTO JQUERY! </title>
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<link[html][/html] rel="stylesheet" type="text/css" href="estilo.css">

</head>

<body>

<script src="main.js"></script>
</body>
</html>


NOTE que el documento js esta enlazado en el final de !body¡ para que no interfiera con el render de la pagina , también el importante recordar cargar el jquery y el css3 en el !head¡

Código HTML :

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<link[html][/html] rel="stylesheet" type="text/css" href="estilo.css">


2-EN EL DOCUMENTO JAVASCRIPT

Código Javascript :

$(document).on('ready',function()
{


});


"NOTE que lo primero que hacemos es cargar a jquery"


3-CREAMOS 2 VARIABLES

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

});


NOTE. que el valor de las variables es distinto por el factor de 1 es decir que una es mayor que la otra por 1



4-LE ASIGNAMOS EL EVENTO CLICK A UN DIV
el evento click de toda la vida en jquery y tambien agregamos un incremento con el ++ a las dos varibles

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

});


NOTE que como va incrementando cada vez que se le da click y pero la variable [b]"y" siempre va hacer mayor por el factor de 1 [/b].


5-EVALUAMOS LAS VARIABLES
condicionamos con un

Código Javascript :

if
y declaramos que la variables "x" debe ser menor a la de "y"
y ponemos un

Código Javascript :

else
para decir que en caso de que pase ejecute el codigo de el else
y almacenamos el valor de las variables en la consola con

Código Javascript :

 console.log

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

if( x < y)
{       
 
   console.log( x +" " +" es menor que  " + y);
  
}


else
{
   console.log(x +" " +" es mayor que " + y);
}

});


NOTE que como va incrementando cada vez que se le da click y pero la variable "y" siempre va hacer mayor por el factor de 1 y por eso el codigo del else nunca se va ha ejecutar.






6-OK OK OK ¡AQUI OCURRE LA MAGIA ! :lol:
Declaramos un if dentro del primero condicional es decir el codigo que se va a ejecutar es otra evaluación o condición y lo que dice que si la variables (x) para que la examine sin ninguna condición entonces va decrementar el valor a la variable "y" con --

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

if( x < y)
{       
    if(x)
   {
     --y
   console.log( x +" " +" es igual a " + y);
   }

}


else
{
   console.log(x +" " +" es mayor que " + y);
}

});


RECUERDE que la variable "y" vale uno y lo que queremos hacer es que la condiciones alternen el valor de esta misma volviendo la falsa en un caso y verdadera en otro todo dentro del mismo evento "click"







7-¡ALTERNAR!

Ok ahora en como la condición ya no es verdadera va ha ejecutar el codigo de el else
y lo que hacemos nosotros en el else es hacer lo contrario de lo que hicimos en el if
y le devolvemos su atributo a la variable "y" entonces básicamente lo que haces es volverla verdadera entonces cuando el evento se vuelva a dispara x < y

Código Javascript :

$(document).on('ready',function()
{
var x = 0;
var y = 1;

$("div").click(function()
{
x++
y++ 

if( x < y)
{       
    if(x)
   {
     --y
   console.log( x +" " +" es igual a " + y);
   }

}


else
{
      if(x)
   {
      y++
   console.log(x +" " +" no es igual a " + y);
   }
   
}

});


NOTE que de esa manera logramos que la variables "y" alterne entre verdadera y falsa cada vez que se le da click "es decir cuando se le de el primer click va hacerverdadera y cuando se le vualva a dar click sera falsa"




LISTO YA CREAMOS NUESTRO EVENTO
SOLO RECUERDA LA CLAVE ESTA EN HACER QUE LA VARIABLE ALTERNE

AQUI PUEDES VER http://www.youtube.com/watch?v=sr_RCfPk-dg&feature=youtu.be LA APLICACION EL EVENTO.

PRONTO SUBIRE OTRO TUTORIAL EXPLICANDO COMO HICE EL ESTILO DEL VIDEO Y EN MAS DETALLE TODO LO QUE PARARE EN EL VÍDEO.

SI TIENES DUDAS PONTE EN CONTACTO CONMIGO https://twitter.com/esnene02

Y EL CÓDIGO DE ESTE TUTORIAL ESTA MI CUENTA DE GITHUB https://github.com/Maxtermax/nuevo_evento
JUNTO CON OTRAS "COSILLAS INTERESANTES " :lol:

GRACIAS POR ESTAR HASTA EL FINAL Y SUS COMENTARIOS SON VALIOSOS PARA MI :lol: :lol: :lol: :lol:

Por Esneyder Amin

1 de clabLevel



Genero:Masculino  

Esneyder,js,css3

chrome
Citar            
MensajeEscrito el 11 Nov 2013 09:56 pm
Debes organizar mejor el contenido del tutorial. Te falta agregar el html y el css asi se puede ver cómo implementar el js. Así no se termina de entender, organizalo un poco mas y pasa a portada :) .

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.