Encantadora biblioteca de selector de Emoji-OωO

Vista prévia

Descripción

O Ï & #137; O es una biblioteca JavaScript muy pequeña y libre de dependencia que anexa un selector de Emoji a su campo de texto o de entrada. Todos los iconos Emoji & descripciones se almacenan en un archivo JSON y se capturan por O Ï & #137; O a través de una solicitud AJAX.

Funcionamiento

Agregue referencias a OwO. min. CSS y OwO. min. js a su página web.

<link rel="stylesheet" href="OwO.min.css">
<script src="OwO.min.js"></script>

Cree un elemento TEXTAREA en la Página Web.

<textarea class="OwO-textarea" style="width: 100%; height: 50px; margin-bottom: 10px; padding: 10px;"></textarea>

Cree un contenedor vacío para el selector de Emoji.

<div class="OwO"></div>

Agregue sus iconos Emoji personalizados, caras de texto en un archivo JSON de la siguiente manera:

{

"Faces": {



"type": "emoticon",



"container": [







{









"icon": "OωO",









"text": "Author: DIYgod"







},







{









"icon": "|´・ω・)ノ",









"text": "Hi"







},







{









"icon": "(๑•̀ㅁ•́ฅ)",









"text": "Hi"







}



]

},

"Emoji": {



"type": "emoji",



"container": [





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "???? ",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "???? ",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





},





{







"icon": "????",







"text": ""





}



]

},
}

Cree un nuevo objeto OwO y especifique la ruta de acceso al archivo JSON.

var OwO_demo = new OwO({


logo: 'OωO',


container: document.getElementsByClassName('OwO')[0],


target: document.getElementsByClassName('OwO-textarea')[0],


api: 'OwO.json'
});

Más opciones.

var OwO_demo = new OwO({


logo: 'OωO',


container: document.getElementsByClassName('OwO')[0],


target: document.getElementsByClassName('OwO-textarea')[0],


api: 'OwO.json',


position: 'down',


width: '100%',


maxHeight: '250px',
});