FaceMocion jQuery, emociones estilo facebook emoticons



FaceMocion jQuery, emociones estilo facebook emoticons, este plugin esta inspirado en la funcionalidad que tiene facebook que nos permite seleccionar el estado que provoca una publicación, este plugin convierte un elemento input en un icono que al pasar el ratón nos muestra un contenedor de emociones en el cual podemos seleccionarlo .

En el siguiente enlace puedes ver el ejemplo funcionando: http://oscaruhp.github.io/FaceMocion/

Este plugin te puede servir para implementar en algún sistema en donde necesites recolectar información del estado de animo del usuario, la implementación es como se indica a continuación.

1.- Primero tienes que incluir los archivos que necesita el plugin:

 <!-- Bootstrap and JQuery -->
 <link rel="stylesheet" href="bootstrap.min.css"> <!-- Optional -->
 <script src="jquery.min.js"> </script>
 
 <!-- Plugin --> 
 <link href="faceMocion.css" rel="stylesheet" type="text/css" />
 <script src="faceMocion.js"></script> 

2.- Posterior a eso tienes que crear tus campos input que estarán en tu formulario.

<input type="hidden" value="amo" class="facemocion"/>
 <input type="hidden" value="asombro" class="facemocion"/>     

3.- Por último llamar al plugin de la siguiente forma:

$(".facemocion").faceMocion();

4.- Puedes agregar opciones al plugin, para poder crear interesantes emociones (las que desees)

$(".facemocion").faceMocion({emociones:[
         {"emocion":"amo","TextoEmocion":"I love"},
         {"emocion":"molesto","TextoEmocion":"It bothers me"},
         {"emocion":"asusta","TextoEmocion":"it scares"},
         {"emocion":"divierte","TextoEmocion":"I enjoy"},
         {"emocion":"gusta","TextoEmocion":"I like"},
         {"emocion":"triste","TextoEmocion":"It saddens"},
         {"emocion":"asombro","TextoEmocion":"It amazes me"},
         {"emocion":"alegre","TextoEmocion":"I am glad"}
         ]});

You may also like...