Rating

• Introduction
• Basic Example
• Real World Example

Allows users to set ratings for content.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Rating module.

YUI().use(
  'aui-rating',
  function(Y) {
    // code goes here
  }
);

Using Rating

Create an HTML element:

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

Now create a new instance of Rating component by setting boundingBox to our HTML element's selector. We will leave all other options empty for a stock Rating configuration. Finally, let's render it!

YUI().use(
  'aui-rating',
  function(Y) {
    new Y.StarRating(
      {
        boundingBox: '#myRating'
      }
    ).render();
  }
);

Configuring Rating

There are some other optional parameters that you can pass to your Rating instance.

For example, you can pass the size option a whole number for how many choices you want Rating to have:

YUI().use(
  'aui-rating',
  function(Y) {
    new Y.StarRating(
      {
        boundingBox: '#myRating',
        size: 8
      }
    ).render();
  }
);

Setting showTitle to true displays the string you have set for title as a tooltip when user hovers over Rating.

YUI().use(
  'aui-rating',
  function(Y) {
    new Y.StarRating(
      {
        boundingBox: '#myRating',
        showTitle: true,
        size: 8,
        title: "A new way to Rate!"
      }
    ).render();
  }
);

Rendering from HTML

You can also define Rating choices from HTML radio inputs, enabling control over individual title for each input! Further, you can set event handlers using on or after options to run code on Rating events. Each rating event is passed in object this for the rating choice with includes data such as title and value. Add a div below rating and we will print a message containing event data.

<div id="myRating">
  <input type="radio" title="Horrible" />
  <input type="radio" title="Very bad" />
  <input type="radio" title="Bad" />
  <input type="radio" title="Acceptable" />
  <input type="radio" title="Good" />
  <input type="radio" title="Very good" />
  <input type="radio" title="Perfect" />
</div>

<div id="print"></div>

YUI().use(
  'aui-rating',
  function(Y) {
    new Y.StarRating(
      {
        after: {
          itemSelect: function(event) {
            var title = this.get('title');

            var stars = this.get('value') + 1;
            stars += ' Stars';

            A.one('#print').set('innerHTML', 'You selected ' + title + ' - ' + stars);
          }
        },
        boundingBox: '#myRating',
        showTitle: true
    }).render();
  }
);