jQuery 基本表情符号评分插件 表情符号评分

  • 源码大小:25.77KB
  • 所需积分:1积分
  • 源码编号:19JP-3706
  • 浏览次数:735次
  • 最后更新:2023年07月13日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

EmojiRating是一个小型但可定制的jQuery产品/帖子/文章评级插件,它使用表情符号来评级符号。

预定义的表情符号:

  • 愤怒:“😠”,
  • 失望:“”,
  • meh: '😐',
  • 快乐:“😊”,
  • 微笑:“😃”,
  • 传情动漫:“😉”,
  • 大笑:“�”,
  • 内侧:'😍',
  • 哭泣:“�”,
  • 星形:“⭐”,
  • 便便:“💩”,
  • 猫:“�”,
  • 如:“👍”,
  • 与“👎”不同,
  • 心脏:'&#x2764',
  • 不喜欢:“👎”,
  • 云:'☁',
  • 黑启动:'★',
  • 彗星:“☄”,
  • 伞形:'☔',
  • 头骨:“☠”,
  • 放射性:“☢”,
  • 生物危害:“☣”,
  • aries: '♈',
  • 牛头怪:“♉”,
  • 双子座:“♊”,
  • 癌症:“♋”,
  • 利奥:“♌”,
  • 处女座:“♍”,
  • libra: '♎',
  • 天蝎座:“♏”,
  • 射手座:“♐”,
  • 摩羯座:“♑”,
  • 宝瓶座:“♒”,
  • 双鱼座:'♓'

如何使用它:

1.插入主JavaScript文件表情符号.js在jQuery库之后,但在关闭body标记之前。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/emoji.js"></script>

2.调用函数表情符号()在容器中生成默认的表情符号评级控件。

  1. $(function(){
  2. $("#emojiContainer").emoji();
  3. });

3.指定要使用的表情符号数组。

  1. var emojis = ['poop','unlike', 'like', 'star', 'inlove'];
  2. $("#emojiContainer").emoji({
  3. emojis: emojis
  4. });

4.所有可用于配置表情符号分级控制的默认插件选项。

  1. $("#emojiContainer").emoji({
  2. opacity: 0.3,
  3. value: 3, // current rating score
  4. width: '20px',
  5. emojis: ['&#x1F620;','&#x1F61E;','&#x1F610;','&#x1F60A;','&#x1F603;'],
  6. event: 'click',
  7. disabled: false,
  8. count: 0, // max number of rating symbols
  9. color: '',
  10. title: '',
  11. animation: '', //shake, shake-slow, shake-hard, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy, shake-chunk
  12. debug: false,
  13. starRating: true, // Enables star rating style
  14. });

5.手动设置额定值。

  1. $("#emojiContainer").emoji("setvalue", 5);

6.获取当前额定值。

  1. $("#emojiContainer").emoji("getvalue");

7.启用/禁用额定值控制。

  1. // enable
  2. $("#emojiContainer").emoji("enable");
  3.  
  4. // disable
  5. $("#emojiContainer").emoji("disable");

8.更改评级值后执行回调功能。

  1. // on click
  2. $("#emojiContainer").emoji({
  3. callback: notifyMe
  4. });
  5. function notifyMe(event, value){
  6. alert("Event: " + event + " - Current value: " + value);
  7. }
  8.  
  9. // on mouse over
  10. $("#emojiContainer").emoji({
  11. callback: notifyMe,
  12. event: 'mouseover'
  13. });
  14. function notifyMe(event, value){
  15. alert("Event: " + event + " - Current value: " + value);
  16. }

更新日志:

2022-02-13

  • 增加了切换星级评定风格的功能

2018-08-17

  • 错误修复

2018-04-11

  • JS更新

预览截图