jQuery

【jQuery】emoji Unicode文字を使用して簡単な評価システムを作成するEmotion Ratings

April 26, 2018
Emotion Ratings

Emotion Ratingsはemoji Unicode文字を使用して簡単な評価システムを作成する軽量のjQueryプラグイン

HOW TO USE IT

jQuery JavaScriptライブラリとjQuery Emotion Ratingsプラグインのスクリプトをインポート。

<script src="//code.jquery.com/jquery.min.js"></script>      
<script src="emotion-ratings.js"></script>

プレースホルダ要素を作成

<div id="myRating"></div>

使用する絵文字の配列を定義

    var emotionsArray = {
      angry: "&#x1F620;",
      disappointed: "&#x1F61E;",
      meh: "&#x1F610;", 
      happy: "&#x1F60A;",
      smile: "&#x1F603;",
      wink: "&#x1F609;",
      laughing: "&#x1F606;",
      inlove: "&#x1F60D;",
      heart: "&#x2764;",
      crying: "&#x1F622;",
      star: "&#x2B50;",
      poop: "&#x1F4A9;",
      cat: "&#x1F63A;",
      like: "&#x1F44D;",
      dislike: "&#x1F44E;"
    };

  var emotionsArray = ['angry','disappointed','meh', 'happy', 'inlove']

シ​​ステムを生成

    $("#myRating").emotionsRating({
      emotions: emotionsArray
    });

オプションを使用してカスタマイズ

    $("#myRating").emotionsRating({

      #background emoji
      bgEmotion: "happy",
    
      #emoji array
      emotions: ['angry','disappointed','meh', 'happy', 'inLove'],
    
      #number of emoji
      count: 5,
    
      #color of emoji
      #gold, red, blue, green, black, 
      #brown, pink, purple, orange
      color: "red",
    
      #size of emoji
      emotionSize: 30,
    
      #input name
      inputName: "rating",
    
      #initialize the rating number
      initialRating: 3,

      #initialize the rating status
      initialRating: true
      
    });

MIT