jQuery Emotion Ratings – New way to add rating system on your webapp

on

jQuery Emotion Ratings – New way to add rating system on your webapp
jQuery Emotion Ratings – New way to add rating system on your webapp
Are you boared form old rating star rating system, No worry in this post I am going share new cool way to add rating system in your website so that your user can give their opinion in best way. The plugin name jQuery Emotion Ratings. It is a lightweight jQuery plugin used to create a simple rating system using custom emoji Unicode characters. This is the new coolest way to add rating system on your services or product. Just doing little configuration you can integrate Emotion Ratings on your web project.

Integrate jQuery Emotion Ratings

Libraries

Include required plugins minified emotion-ratings.min.js libraries on your project with jQuery core library.
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="emotion-ratings.min.js"></script>

HTML

Create a simple html div container where Emotion Ratings need to display.
<div id="rating"></div>

JS

Following are the different different Emotion you can use to create rating system.
var emotionsArray = {
    angry: "&#x1F620;",
    disappointed: "&#x1F61E;",
    meh: "&#x1F610;", 
    happy: "&#x1F60A;",
    smile: "&#x1F603;",
    wink: "&#x1F609;",
    laughing: "&#x1F606;",
    inLove: "&#x1F60D;",
    heart: "&#x2764;",
    crying: "&#x1F622;",
    star: "&#x2B50;",
};
var emotionsArray = ['angry','disappointed','meh', 'happy', 'inLove'];
Now creating the Emotion Ratings using following code you can customize rating system as per your need.
$("#rating").emotionsRating({
    emotionSize: 50, // size of emoji
    bgEmotion: 'happy', // background emoji
    emotions: emotionsArray, // emoji array
    color: 'gold' //  emoji color: gold, red, blue, green, black, brown, pink, purple, orange
  });
 download source code.

 DOWNLOAD



Comments

Post a Comment