溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-08-10 11:02:52 來(lái)源：億速云 閱讀：286 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“jQuery-emoji表情插件的使用方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

功能 features

支持給textarea或可編輯p加上表情功能，自動(dòng)識(shí)別元素類型。 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.支持將表情代碼轉(zhuǎn)換為表情圖片。 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.同一頁(yè)面支持多個(gè)表情實(shí)例。 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此頁(yè)面下載

引入文件 首先在頁(yè)面上引用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>

調(diào)用 invoke 在文本框或可編輯p上初始化emoji initialize emoji on textarea or editable p

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

參數(shù) options

button  String    觸發(fā)表情面板的按鈕的選擇器，如”#btn1”，若指定則將表情選擇面板綁定到該按鈕，若未指定，則自動(dòng)創(chuàng)建一個(gè)按鈕。showTab  Boolean  true  當(dāng)只有一組表情時(shí)，是否仍然顯示Tab。animation  String  ‘fade’  表情面板動(dòng)畫效果，可能的值：’fade’:淡入淡出，’slide’:滾動(dòng)，’none’:無(wú)動(dòng)畫。icons  Array  []  表情組。icons:{ name }  String  group(n)  該組表情名稱。icons:{ path }  String    必填。該組表情路徑（表情文件必須是1,2,3…命名）。icons:{ maxNum }  Number    必填。該組表情文件名的最大數(shù)。icons:{ excludeNums }  Array  []  要排除的表情文件集合。icons:{ file }  String  ‘.jpg’  表情文件的后綴名。icons:{ placeholder }  String  ‘#em(n)_{alias}#’  該組表情插入文本框后的占位標(biāo)識(shí)，必須包含’{alias}’部分，’{alias}’會(huì)被自動(dòng)替換成每個(gè)表情的標(biāo)識(shí)。icons:{ alias }  String    每個(gè)表情對(duì)應(yīng)的標(biāo)識(shí)，若未指定，則為表情文件名（1,2,3…），若指定為一個(gè)對(duì)象，則會(huì)根據(jù)對(duì)象屬性名（1,2,3…）查找屬性的值作為表情標(biāo)識(shí)。icons:{ title }  Object    每個(gè)表情指上去顯示的文字，格式：fileName:title, 如：1:’good’。

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

最終效果

名稱 name類型 type默認(rèn)值 default說(shuō)明 desc

“jQuery-emoji表情插件的使用方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手