Usando el plugin Emoji Picker Js

 in Web Development  tagged jquery / plugin by

El plugin emoji-picker.js es un plugin que nos habilita los campos de texto y textarea para ingresar emojis como eh whatsapp u otras aplicaciones.

Para descargar el plugin Emoji Picker vamos a ir a la pagina de Github del plugin y ahi descargaremos el ultimo release, en mi caso la version 1.1.5.

Emoji Picker: https://github.com/OneSignal/emoji-picker

Otros Requisitos

El plugin Emoji Picker requiere tener Font Awesome y JQuery

Una vez descargado vamos a seguir los siguientes, pasos.

Descomprimir el plugin Emoji Picker

Vamos a descomprimir el archivo .zip que descargamos y obtendremos los archivos javascript, css e imágenes que utiliza el plugin.

Código

Ahora que ya tenemos todos los requisitos para echar a andar el plugin vamos a empezar a codificar.

En un documento HTML vamos a ir escribiendo.

Esto va en el head.

Incluir font awesome, jQuery y el Css del emoji picker.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="emoji-picker-1.1.5/lib/css/emoji.css">

Ahora vamos al body.

El emoji picker funcionara con selectores y cada input o textarea deberá estar en un contenedor emoji-picker-container.

Input type normal

<div class="emoji-picker-container">
<input type="email" class="form-control" placeholder="Input " data-emojiable="true" maxlength="10">
</div>

Textarea

<div class="emoji-picker-container">
<textarea class="form-control textarea-control" placeholder="Textarea" data-emojiable="true" rows="10"></textarea>
</div>

El siguiente script sirve para inicializar y cofigurar el plugin.

      $(function() {
        window.emojiPicker = new EmojiPicker({
          emojiable_selector: '[data-emojiable=true]',
          assetsPath: 'emoji-picker-1.1.5/lib/img/',
          popupButtonClasses: 'fa fa-smile-o'
        });
        window.emojiPicker.discover();
      });

Y por ultimo vamos a escribir las librerias que faltan.

	<script type="text/javascript" src="emoji-picker-1.1.5/lib/js/config.js"></script>
	<script type="text/javascript" src="emoji-picker-1.1.5/lib/js/util.js"></script>
	<script type="text/javascript" src="emoji-picker-1.1.5/lib/js/jquery.emojiarea.js"></script>
	<script type="text/javascript" src="emoji-picker-1.1.5/lib/js/emoji-picker.js"></script>

Y listo en la siguiente imagen puedes ver el resultado.

Descargar

En el siguiente link puede descargar el ejemplo completo, codigo fuente + plugin.

Link: https://drive.google.com/file/d/1-f2bhgNUr2MLlNrxk8bNMAP8R4ItIgKI/view

Que otro plugin nos recomiendas para hacer una demostracion ? Escribe tu comentario

Leave a comment