simonemyrrha / jquery-emoji-ratings

Emoji Ratings jQuery plugin for adding a emoji based rating input field to any form

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	🤗

Lookup Unicode Entity

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