Fork me on GitHub

Example: Basic ratingstars field creation

How to create a ratingstars field.

Basic RatingStars creation

Use the following code to create a basic RatingStars field.

Change the number of stars

Use the following code to change the number of stars

Change the message under the field

Use the following code to change the message field

Display Messages on mouseOver

Use the following code to change the message field

StandAlone Form

Use the following code to make a configurable form that send rates with ajax

Display Messages on disabled

Use the following code to display a disable Message

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-ratingstars', 'inputex-ratingstarsform', function(Y) { 

    // Example 1
    new Y.inputEx.RatingStars({
        name: 'star1',
        averageValue: 4.5,
        parentEl: 'container1'
    });


    // Example 1bis
    new Y.inputEx.RatingStars({
        label: 'Rate this one !',
        name: 'star1bis',
        averageValue: 2.3,
        nStars: 8,
        nRates: 25,
        parentEl: 'container1bis'
    });


    // Example 2
    new Y.inputEx.RatingStars({
        name: 'star2',
        averageValue: 2.3,
        nRates: 30,
        parentEl: 'container2',
        message : 'Yo!, average Rate is %, % ratings have been made'
    });


    // Example 3
    new Y.inputEx.RatingStars({
        name: 'star2',
        averageValue: 2.3,
        nStars: ["Not Cool","Half-Cool","Cool","Super Cool","Coolest Ever"],
        nRates: 30,
        parentEl: 'container3'
    });


    // Example 4
    new Y.inputEx.RatingStarsForm({
        ratingStarsOptions: {
            name: 'star',
            averageValue: 2.3,
            nStars: ["Not Cool","Half-Cool","Cool","Super Cool","Coolest Ever"],
            nRates: 30
        },
        parentEl: 'container4',
        ajax: {
            method: 'POST',
            uri: 'default.php'
        }
    });


    // Example 5
    new Y.inputEx.RatingStars({
        name: 'star3',
        averageValue: 2.3,
        disabled: true,
        disableMessage: "sorry the stars are disabled",
        nRates: 30,
        parentEl: 'container5'
    });

});