FaceMocion Plugin jQuery (Simulando los botones nuevos de Facebook)

FaceMocion plugin jQuery  . Este plugin  simula los nuevo botones de facebook. Su peso es de 2 kb y  convierte un campo de entrada en un selector de emoji , utiliza un sprite PNG  y para simular el efecto solo tienes que darle clic en el emoji  .

Su utilización es muy sencilla y constará de pocos archivos además que su configuración es cosa de niños..

facemocion plugin jquery

1.- Incluimos sus principales librerías faceMocion.css y faceMocion.js y la ibrería jQuery y  bootstrap.min.css es opcional.

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

2.-Creamos el elmento html con (inputs type:hidden)

 <input type="hidden" value="asombro" class="demo"/>       

3.-Llamamos al plugin desde un contenedor tal cual como lo hemos nombrado.

$(".demo").faceMocion();

4.-Cambiamos las opciones de cada botón como mas nos convenga.

$(".demo").faceMocion({
 emociones:[
  {"emocion":"amo","TextoEmocion":"Lo amo"},
  {"emocion":"molesto","TextoEmocion":"Me molesta"},
  {"emocion":"asusta","TextoEmocion":"Me asusta"},
  {"emocion":"divierte","TextoEmocion":"Me divierte"},
  {"emocion":"gusta","TextoEmocion":"Me gusta"},
  {"emocion":"triste","TextoEmocion":"Me entristece"},
  {"emocion":"asombro","TextoEmocion":"Me asombra"},
  {"emocion":"alegre","TextoEmocion":"Me alegra"}
  ]
});

Espero les guste este articulo y no se olviden de compatir…

Demostración