jQuery Emoji Ratings
Browser Support
Latest Browser Support Tables from caniemoji.com
Setup
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/jquery.emojiRatings.min.js"></script>
Usage
$('#yourElement').emojiRating(options);
Options
// Defaults options = { emoji: 'U+2B50', count: 5, fontSize: 16, inputName: 'rating', onUpdate: function() {} }
Emoji
Use either Unicode Entity or shortname from dictionary below
Shortname | Emoji |
---|---|
smile | |
wink | |
laughing | |
blush | |
heart_eyes | |
kissing_heart | |
heart | ❤ |
heart_with_arrow | |
broken_heart | |
tongue_out_wink | |
tongue_out_eyes_closed | |
angry | |
crying | |
scream | |
pray | |
poo | |
star | ⭐ |
thinking | |
hugging |
emoji: 'poo' //Default: 'star' or 'U+2B50' ⭐
Count
count: 10 //Default: 5
Font Size
fontSize: 100 //Default: 16
Input Name
Will generate a hidden input with the name specified
<input type="hidden" name="{{inputName}}" value="{{selectedIndex}}" />
inputName: 'product-rating' //Default: "rating"
onUpdate Callback
Called every time a rating is selected or updated with optional value
onUpdate: function(rating) { console.log(rating); }
TODOs
- Add docs on styling with CSS
- More callbacks/event hooks
- Tests for callbacks/event hooks