OwO-可爱的js表情符号插件

当前位置:主页 > jQuery库 > 表单 > OwO-可爱的js表情符号插件
OwO-可爱的js表情符号插件
分享:

    插件介绍

    OwO是一款可爱且实用的js表情符号插件。OwO表情符号插件可以在文本域或输入框中输入表情符号,它支持颜文字、Emoji、图片等,支持移动端,表情数据从一个可以自定义的json接口读取。

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-04
    阅读:
麦子学院
简要教程

OwO是一款可爱且实用的js表情符号插件。OwO表情符号插件可以在文本域或输入框中输入表情符号,它支持颜文字、Emoji、图片等,支持移动端,表情数据从一个可以自定义的json接口读取。

安装

可以使用npm来安装OwO表情符号插件。

$ npm install owo --save                  
                

使用方法

使用该表情符号插件需要在页面中引入OwO.min.css和OwO.min.js文件。

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

你可以使用<textarea>元素或<input>元素作为目标元素,使用一个<div>元素作为表情符号的容器。

<!-- 目标元素 -->
<textarea class="OwO-textarea"></textarea>
<!-- 表情符号容器 -->
<div class="OwO"></div>                 
                
初始化插件

可以通过下面的方法来对OwO插件进行初始化。

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'
});                
                

配置参数

OwO插件的配置参数如下:

  • logo:按钮上的文本,默认为"OωO表情"。
  • container:OwO表情符号的容器。
  • target:OwO表情符号的目标textarea或input元素。
  • api:OwO表情符号使用的json数据。
  • position:OwO表情符号body的位置。
  • width:OwO表情符号body的宽度。
  • maxHeight:OwO表情符号body的最大高度。

OwO表情符号插件的github地址为:https://github.com/DIYgod/OwO

网友评论