jquery.emoji.js 是一款基于jquery的qq表情包贴吧表情包gif动画表情插件-BFW插件库

jquery.emoji.js 是一款基于jquery的qq表情包贴吧表情包gif动画表情插件

功能

支持给textarea或可编辑div加上表情功能，自动识别元素类型。
如果是textarea，则选择表情后插入表情代码，如果是可编辑div，则直接插入表情图片。
支持自定义表情代码的格式。
支持将表情代码转换为表情图片。
支持多组表情并提供tab切换。
示例已带有百度贴吧和qq高清2套表情。
同一页面支持多个表情实例。

使用方式：

第一步引入bfwone 加载依赖项jquery、jquery.mCustomScrollbar、jquery.mousewheel

第二步use插件及css和主题css

第三步配置参数

名称 name	类型 type	默认值 default	说明 desc
button	String		触发表情面板的按钮的选择器，如"#btn1"，若指定则将表情选择面板绑定到该按钮，若未指定，则自动创建一个按钮。 button selector, such as "#btn1", if has value, bind it to the emoji panel. If it is empty, thenautomatically creates a button.
showTab	Boolean	true	当只有一组表情时，是否仍然显示Tab。 if show tab when only one emoji group.
animation	String	'fade'	表情面板动画效果，可能的值：'fade':淡入淡出，'slide':滚动，'none':无动画。 the animation effect for emoji panel, possible values: 'fade':fade-in fade-out, 'slide':slide up & down,'none':no animation.
icons	Array	[]	表情组。 icons group.
icons:{ name }	String	group(n)	该组表情名称。 the name of the icons group.
icons:{ path }	String		必填。该组表情路径（表情文件必须是1,2,3...命名）。 required.the path of the icons group(icon file must named as 1 ,2 ,3...).
icons:{ maxNum }	Number		必填。该组表情文件名的最大数。 required.the max number of the icons group file name.
icons:{ excludeNums }	Array	[]	要排除的表情文件集合。 the exclude icon files.
icons:{ file }	String	'.jpg'	表情文件的后缀名。 the icon file extension.
icons:{ placeholder }	String	'#em(n)_{alias}#'	该组表情插入文本框后的占位标识，必须包含'{alias}'部分，'{alias}'会被自动替换成每个表情的标识。 the placeholder for the icon group, must contains '{alias}' in it, it will be replaced with the code of each emoji.
icons:{ alias }	String		每个表情对应的标识，若未指定，则为表情文件名（1,2,3...），若指定为一个对象，则会根据对象属性名（1,2,3...）查找属性的值作为表情标识。 the flag for each emoji, if undefined, it refers the name of emoji file (1,2,3...), else if specify an object, it will look for the value of the attribute as the emoji flag according to the attribute name (1,2,3...).
icons:{ title }	Object		每个表情指上去显示的文字，格式：fileName:title, 如：1:'good'。 the shows title for each emoji, format: fileName:title, such as: 1:'good'.

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <script id="bfwone" data="dep=jquery.17|jquery.mCustomScrollbar.min|jquery.mousewheel-3.0.6.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.emoji.min", "jquery.emoji"], function() {
                $("#editor").emoji({
                    icons: [{
                        name: "表情",
                        path: "http://repo.bfw.wiki/bfwrepo/img/tieba/",
                        maxNum: 50,
                        excludeNums: [41, 45, 54],
                        file: ".jpg",
                        placeholder: "[{alias}]",
                        alias: {
                            1: "呵呵",
                            2: "哈哈",
                            3: "吐舌",
                            4: "啊",
                            5: "哭",
                            6: "发怒",
                            7: "开心",
                            8: "汗",
                            9: "累",
                            10: "害羞",
                            11: "鄙视",
                            12: "不高兴",
                            13: "真棒",
                            14: "钱",
                            15: "疑问",
                            16: "阴笑",
                            17: "吐",
                            18: "yi",
                            19: "委屈",
                            20: "花心",
                            21: "呼",
                            22: "笑脸",
                            23: "能",
                            24: "太开心",
                            25: "滑稽",
                            26: "勉强",
                            27: "狂喊",
                            28: "怪",
                            29: "睡觉",
                            30: "惊恐",
                            31: "神奇",
                            32: "惊讶",
                            33: "喷",
                            34: "爱心",
                            35: "心碎",
                            36: "玫瑰",
                            37: "礼物",
                            38: "彩虹",
                            39: "月亮",
                            40: "太阳",
                            41: "钱币",
                            42: "灯泡",
                            43: "餐杯",
                            44: "蛋糕",
                            45: "音乐",
                            46: "哈哈哈",
                            47: "胜利",
                            48: "点赞",
                            49: "衰",
                            50: "OK"
                        },
                    }]
                });


            });
        });
    </script>
    <style>
 body {
            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            line-height: 1.5;
            color: #606c71;
        }

        .page-header {
            color: #fff;
            text-align: center;
            background-color: #159957;
            background-image: linear-gradient(120deg, #155799, #159957);
            padding: 96px 80px;
            margin: 0;
            border: none;
        }

        .project-name {
            margin-top: 0;
            margin-bottom: 35px;
            font-size: 52px;
        }

        .project-tagline {
            margin-bottom: 32px;
            font-weight: normal;
            opacity: 0.7;
            font-size: 20px;
        }

        .page-header a {
            color: #1e6bb8;
            text-decoration: none;
        }

        .page-header a:hover {
            text-decoration: underline;
        }

        .page-header .btn {
            display: inline-block;
            margin-bottom: 16px;
            color: rgba(255, 255, 255, 0.7);
            background-color: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
            border-style: solid;
            border-width: 1px;
            border-radius: 4.8px;
            transition: color 0.2s, background-color 0.2s, border-color 0.2s;
            padding: 12px 16px;
            font-size: 16px;
        }

        .page-header .btn + .btn {
            margin-left: 16px;
        }

        .page-header .btn:hover {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .main-content {
            padding-top: 32px;
        }

        .main-content h2 {
            color: #156987;
            font-weight: normal;
            margin-top: 50px;
            margin-bottom: 16px;
        }

        #editor {
            height: 91px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
            color: #555;
            display: block;
            font-size: 14px;
            line-height: 1.42857;
            padding: 6px 12px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
            width: 100%;
        }

        #editor:focus {
            border-color: #66afe9;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
            outline: 0 none;
        }

        #btn {
            margin-top: 10px;
        }

        .m-t-20 {
            margin-top: 20px;
        }

        .m-t-70 {
            margin-top: 70px;
        }

        .site-footer {
            padding-top: 32px;
            margin-top: 32px;
            margin-bottom: 32px;
            border-top: solid 1px #eff0f1;
        }

        .site-footer-owner {
            display: block;
            font-weight: bold;
        }

        .site-footer-credits {
            color: #819198;
        }

        hr {
            margin-top: 32px;
            margin-bottom: 32px
        }

        pre {
            padding: 0;
            border: 0;
        }

    </style>
</head>
<body>
    <textarea id="editor">

    </textarea>
</body>
</html>