Basic Emoji Rating Plugin For jQuery - EmojiRating

Basic Emoji Rating Plugin For jQuery - EmojiRating
File Size: 23.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

EmojiRating is a small yet customizable jQuery product/post/article rating plugin that uses Emoticons for rating symbols.

Predefined Emoticons:

  • angry: '😠',
  • disappointed: '😞',
  • meh: '😐',
  • happy: '😊',
  • smile: '😃',
  • wink: '😉',
  • laughing: '😆',
  • inlove: '😍',
  • crying: '😢',
  • star: '⭐',
  • poop: '💩',
  • cat: '😺',
  • like: '👍',
  • unlike: '👎',
  • heart: '&#x2764',
  • dislike: '👎',
  • cloud: '☁',
  • blackstart: '★',
  • comet: '☄',
  • umbrella: '☔',
  • skull: '☠',
  • radioactive: '☢',
  • biohazard: '☣',
  • aries: '♈',
  • taurus: '♉',
  • gemini: ' ♊',
  • cancer: '♋',
  • leo: '♌',
  • virgo: '♍',
  • libra: '♎',
  • scorpius: '♏',
  • sagittarius: '♐',
  • capricorn: '♑',
  • aquarius: '♒',
  • pisces: '♓'

How to use it:

1. Insert the main JavaScript file emoji.js after jQuery library but before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="emoji.js"></script>

2. Call the function emoji() to generate a default emoji rating control inside your container.

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

3. Specify an array of emoticons you want to use.

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

4. All default plugin options which can be used to config the emoji rating control.

$("#emojiContainer").emoji({
  opacity: 0.3,
  value: 3, // current rating score
  width: '20px',
  emojis: ['&#x1F620;','&#x1F61E;','&#x1F610;','&#x1F60A;','&#x1F603;'],
  event: 'click',
  disabled: false,
  count: 0, // max number of rating symbols
  color: '',
  animation: '', //shake, shake-slow, shake-hard, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy, shake-chunk
  debug: false
});

5. Set the rating value manually.

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

6. Get the current rating value.

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

7. Enable/disable the rating control.

// enable
$("#emojiContainer").emoji("enable");

// disable
$("#emojiContainer").emoji("disable");

8. Execute a callback function after changing the rating value.

$("#emojiContainer").emoji({
  callback: function (event, value) {
    // do something
  }
});

Changelog:

2018-08-17

  • Bugfix

2018-04-11


This awesome jQuery plugin is developed by mrmins. For more Advanced Usages, please check the demo page or visit the official website.