温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery-emoji表情插件的使用方法

发布时间:2021-08-10 11:02:52 来源:亿速云 阅读:288 作者:chen 栏目:开发技术

本篇内容介绍了“jQuery-emoji表情插件的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

功能 features

支持给textarea或可编辑p加上表情功能,自动识别元素类型。 Support for adding emoji into textarea or editable p, automatic identification of element types.如果是textarea,则选择表情后插入表情代码,如果是可编辑p,则直接插入表情图片。 If it is textarea element,will insert code string of emoji, else, will insert emoji picture directly.支持自定义表情代码的格式。 Support for specifying the code format of emoji.支持将表情代码转换为表情图片。 Support for converting the code string of emoji into emoji picture.支持多组表情并提供tab切换。 Support for multiple groups of emoji and tabs to toggle.示例已带有百度贴吧和qq高清2套表情。 The demo has been with 2 sets of emojis:Baidu tieba emoji & QQ HD emoji.同一页面支持多个表情实例。 Support for multiple instances in one page.

使用示例

$("#editor").emoji({    icons: [{        name: "QQ表情",        path: "img/qq/",        maxNum: 91,        excludeNums: [41, 45, 54],        file: ".gif",        placeholder: "#qq_{alias}#"    }]});

开始使用

安装 install

$ bower install jquery-emoji

或在http://www.jq22.com/jquery-info6363此页面下载

引入文件 首先在页面上引用css文件和js文件,css文件一般在中添加,js文件一般在之前添加。注意要先引用jquery和jquery.mCustomScrollbar,再引用该js。 Firstly reference the css and js file of this plugin, the best location of the css reference is in , and the js is before , make sure the js follows jQuery and jquery.mCustomScrollbar.

<head>    ...    <!--the css for jquery.mCustomScrollbar-->    <link rel="stylesheet" href="lib/css/jquery.mCustomScrollbar.min.css"/>    <!--the css for this plugin-->    <link rel="stylesheet" href="css/jquery.emoji.css"/></head><body>...<!--the js for jquery--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script><!--(Optional) the js for jquery.mCustomScrollbar's addon--><script src="lib/script/jquery.mousewheel-3.0.6.min.js"></script><!--the js for jquery.mCustomScrollbar--><script src="lib/script/jquery.mCustomScrollbar.min.js"></script><!--the js for this plugin--><script src="js/jquery.emoji.js"></script></body>

调用 invoke 在文本框或可编辑p上初始化emoji initialize emoji on textarea or editable p

$("#content").emoji(options);

参数 options

button  String    触发表情面板的按钮的选择器,如”#btn1”,若指定则将表情选择面板绑定到该按钮,若未指定,则自动创建一个按钮。showTab  Boolean  true  当只有一组表情时,是否仍然显示Tab。animation  String  ‘fade’  表情面板动画效果,可能的值:’fade’:淡入淡出,’slide’:滚动,’none’:无动画。icons  Array  []  表情组。icons:{ name }  String  group(n)  该组表情名称。icons:{ path }  String    必填。该组表情路径(表情文件必须是1,2,3…命名)。icons:{ maxNum }  Number    必填。该组表情文件名的最大数。icons:{ excludeNums }  Array  []  要排除的表情文件集合。icons:{ file }  String  ‘.jpg’  表情文件的后缀名。icons:{ placeholder }  String  ‘#em(n)_{alias}#’  该组表情插入文本框后的占位标识,必须包含’{alias}’部分,’{alias}’会被自动替换成每个表情的标识。icons:{ alias }  String    每个表情对应的标识,若未指定,则为表情文件名(1,2,3…),若指定为一个对象,则会根据对象属性名(1,2,3…)查找属性的值作为表情标识。icons:{ title }  Object    每个表情指上去显示的文字,格式:fileName:title, 如:1:’good’。

* n: 分组的次序 index of the group

最终效果

名称 name类型 type默认值 default说明 desc

“jQuery-emoji表情插件的使用方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI