How does this plugin work?

When you initialise the plugin the select field will be wrapped in a div with a `.br-theme-fontawesome-stars` class (or a different class indicating the theme currently in use). The select field will get hidden and a rating widget will be appended right after the select field.

Expected result:

<div class="br-wrapper br-theme-fontawesome-stars">
  <select id="example"> <!-- now hidden -->
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  ...rating widget...
</div>

How do I allow users to select empty ratings?

To allow users to select empty ratings simply set the `allowEmpty` setting to `true` or alternatively include an option with an empty value in your select field:

<select id="example">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

How can I specify text that is displayed on the bars?

The `showValues` plugin setting already makes it easy to display option values directly on the bars. For more control over the text that is displayed on the bars you can define `data-html` attribute on each of the <option> elements that will take precedence over actual option value.

<select id="example">
  <option value="1" data-html="good">1</option>
  <option value="2" data-html="better">2</option>
  <option value="3" data-html="best">3</option>
</select>

How do I use the onSelect callback?

The onSelect callback is fired when a user selects a rating or when the `set` method is called to select a rating programmatically. The optional third argument will give you access to the event object if it's available.

$('#example').barrating('show', {
  theme: 'my-awesome-theme',
  onSelect: function(value, text, event) {
    if (typeof(event) !== 'undefined') {
      // rating was selected by a user
      console.log(event.target);
    } else {
      // rating was selected programmatically
      // by calling `set` method
    }
  }
});

Often you don't want the callback to run at all when a rating is selected with the `set` method. If this is the case please use the `silent` option.

Is keyboard navigation supported?

Since the rating widget consists of anchor elements, you can tab or shift-tab between elements and press `Enter` to select a rating.

Can the plugin be used outside of Javascript ecosystem?

Harvey Lieberman (@harveyl888) created an R htmlwidget wrapper for the jQuery Bar Rating plugin. For more details go to:

https://github.com/harveyl888/barRating