
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: '❤',
- 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: ['😠','😞','😐','😊','😃'], event: 'click', disabled: false, count: 0, // max number of rating symbols color: '', 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 } });
This awesome jQuery plugin is developed by mrmins. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 09.04.2018
- Source