功能 features
- 支持給textarea或可編輯div加上表情功能，自動識別元素類型。
Support for adding emoji into textarea or editable div, automatic identification of element types. - 如果是textarea，則選擇表情後插入表情代碼，如果是可編輯div，則直接插入表情圖片。
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
在文本框或可編輯div上初始化emoji
initialize emoji on textarea or editable div
$("#content").emoji(options);參數 options
| 名稱 name | 類型 type | 默認值 default | 說明 desc |
|---|---|---|---|
| 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
