MooStarRating 1.4

A Mootools plugin that creates a non-obtrusive star rating control based on a set of radio input boxes. Based on Diego Alto's jQuery Star Rating Plugin.



Details

Author
Lorenzo Stanco
Current version
1.4
GitHub
lorenzos/MooStarRating
Downloads
6200
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.3: '*'

How to use

JS sample:


// Basic usage, give only form name or ID
var basicRating = new MooStarRating({ form: 'basic' });

// Event callback
basicRating.addEvent('click', function (value) {
    alert("Selected " + value);
});

// If you want more control, you can use some options
var customRating = new MooStarRating({
    form: 'custom',
    radios: 'my_rating',                // Radios name
    half: true,                         // That means one star for two values!
    imageEmpty: 'my_star_empty.png',    // Different image
    imageFull:  'my_star_full.png',     // Different image
    imageHover: 'my_star_hover.png',    // Different image
    tip: 'Rate [VALUE] / 3.0',          // Mouse rollover tip
    tipTarget: $('simpleTip')           // Tip element
}).addEvent('click', function (value) {
    alert("Selected " + value);
});

HTML code:


<!-- Basic form with "rating" radios -->
<form name="basic">
    <input type="radio" name="rating" value="1">
    <input type="radio" name="rating" value="2">
    <input type="radio" name="rating" value="3">
    <input type="radio" name="rating" value="4">
    <input type="radio" name="rating" value="5">
</form>

<!-- Here radios have a default value, 1.5 -->
<form name="simple">
    <label>Some options:</label>
    <input type="radio" name="my_rating" value="0.5">
    <input type="radio" name="my_rating" value="1.0">
    <input type="radio" name="my_rating" value="1.5" checked>
    <input type="radio" name="my_rating" value="2.0">
    <input type="radio" name="my_rating" value="2.5">
    <input type="radio" name="my_rating" value="3.0">
    <span id="simpleTip"></span>
</form>

Docs

Implements: Options, Events

Syntax:


var myRating = new MooStarRating(options);

Options (object): Initial options for the class. Options are:

  • form: Target form name, ID or element.
  • radios: Target radio input boxes name (default "rating")
  • half: TRUE if each star is used for two input values (dafult FALSE).
  • decheck: if TRUE clicking the same rating again will reset the control (dafult FALSE).
  • disabled: TRUE if user cannot set rate value (default FALSE, or TRUE if input radio boxes has got the disabled attribute).
  • linksClass: Links class name, for custom styling (default "star").
  • imageFolder: Image folder path, relative or absolute (default "").
  • imageEmpty: Empty star image name (default "star_empty.png").
  • imageFull: Empty star image name (default "star_full.png").
  • imageHover: Empty star image name (default as imageFull).
  • width: Links width (default 16).
  • height: Links height (default 16).
  • tip: Tip text, you can use [VALUE] and [COUNT] as placeholders (default none).
  • tipTarget: ID or element that will contain the tip (default none, the tip will be set as link title).
  • tipTargetType: tip text type, "text" or "html" (default "text").

Events:

  • click(value): Fires when a star is clicked and value is set as radios input value.
  • mouseenter(value): Stars rollover. Value under mouse position is given.
  • mouseleave(): Stars rollout.

Methods:

  • setValue(value): Manually set the rating value.
  • getValue(): Get the rating value.
  • enable(): Enables rating.
  • disable(): Disables rating.
  • refresh(): Force stars redrawing.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus