irfan/jquery-star-rating

jQuery Star Rating Plugin

jQuery Star Rating Plugin

How to use

Detailed documentation and working demo here.

Example HTML

<div class="container">
    <input type="radio" name="example" class="rating" value="1" />
    <input type="radio" name="example" class="rating" value="2" />
    <input type="radio" name="example" class="rating" value="3" />
    <input type="radio" name="example" class="rating" value="4" />
    <input type="radio" name="example" class="rating" value="5" />
</div>

Simple usage

$('.container').rating();

Using with callback method

$('.container').rating(function(vote, event){
    // console.log(vote, event);
});

Example of using ajax

$('.container').rating(function(vote, event){
    // write your ajax code here
    // For example;
    // $.get(document.URL, {vote: vote});
});

jquery-star-rating's Issues

Sending information along

How can i send information for example id using this plugin?
Here is my form:

<td><?= $value['id'] ?></td>
<td><?= $value['name'] ?></td>
<td>
    <section class="star-rating" id="<?= $value['id'] ?>" >
        <input type="radio" name="example" class="rating" id="radio_1" value="1" />
        <input type="radio" name="example" class="rating" id="radio_2" value="2" />
        <input type="radio" name="example" class="rating" id="radio_3" value="3" />
        <input type="radio" name="example" class="rating" id="radio_4" value="4" />
        <input type="radio" name="example" class="rating" id="radio_5" value="5" />
    </section>
</td>

Use $input.data by default in place of null

From http://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=139 and http://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=132

Hello :)

Small suggestion :

($.metadata? input.metadata(): ($.meta?input.data():null)) || {}, /* metadata options */

=>

($.metadata? input.metadata(): input.data()) || {}, /* metadata options */

data attributes are widely used now, so, in case the metadata plugin is not used, let's use the data attributes, wdyt?

Thx for the great job!

Regards,

Raphaël

hovering

hi,
how can i add a hovering function?
the code below only works if the div id is omitted.
thanks

<script type="text/javascript">
    $(function(){
        $('#container').rating();
    });
</script>

<div id="container">
    <input type="radio" id="example" name="example" class="rating" value="1" onMouseOver="mouse(1)" onMouseOut="cleardiv()" />
</div>

<span id="hoverdiv">HOVER</span>

<script>
function mouse(value) {
    if(value == "1") {
    $('#hoverdiv').html("blah");
}
}
function cleardiv() {
    $('#hoverdiv').html("");
}
</script>

How to disable color changes in star ?

How to disable color changes in star ? am already used disabled but not working

Provide the event for the select

Hello,

Example:

star.addClass('star-rating-live')
    // Attach mouse events
    .on('mouseover',function(){
        $(this).rating('fill');
        $(this).rating('focus');
    })
    .on('mouseout',function(){
        $(this).rating('draw');
        $(this).rating('blur');
    })
    .on('click',function(){
        $(this).rating('select');
    })

The best would be to give the event to the callback, so, the callback could for example do

event.stopPropagation();

Example:

.rating({
            callback: function(score, link, event) {
                event.stopPropagation();

WDYT?

Thanks!

Raph

Not working with multiple elements

Thanks for this plugin. It's pretty simple and easy to use. I'm planning to use it for a project.
However, I noticed some issue.

If you initialize like this:
$(function(){ // Start when document ready
$('.star-rating').rating(); // Call the rating plugin
});

then, you have more than one star-rating class, it only works for the first child.
Have you experience with this? Thanks.

Get Element

Hello,
I think it would be a parameter getting element. For example;

$(".element").rating(function(element, vote, event){
console.log(element.data("message"));
});

Resize

Hello... I'm new in web developing.
thanks for this helpful plugin....
but, how can i resize the stars?

thank you

default value

How to set default value for each stars?
How to get current element?

where's the licence file?

What license does this project have? Apache 2.0?

Radio button not checked

Radio button not checked when i clicked the star .but not display any error in the console part. i need a help . how to solve this problem ?

Set amount of stars on page load?

Hi there,

Sorry for posting here as this isn't really an issue, but is there a way to set the rating to 5 stars on page load?

We're seeing a few people giving great reviews but forgetting to click the stars so end up with zero ratings.

Hope that makes sense.

Cheers

Ben

"Star" and "stars" classes are too common

I've found very minor issue with "star" and "stars" classes which your plugin uses. These are very common class names. For example, Joomla uses "star" class for mandatory fields in forms, which are marked with * character. If you load your plugin on a page with Joomla form, all mandatory fields will have star image beside * character.

I've changed "star" class to "rating-star" and "stars" to "rating-stars" in my copy of your plugin and would like to suggest you to do the same, since, I repeat, these are very common names.

Read only mode

How to set read only mode . I need to disable click event.