CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Callum Linington
Callum Linington

Reputation: 14417

Turn JQuery Star Rating into Control

I have this fiddle, it's pretty cool, my first attempt at creating a jquery control. It is simple, just a star ratings control.

I want to be able to turn this into a control, so that, I can call:

$('#someDiv').starRating();

And it turns that div into a star rating.

I would like to be able to then setup some properties:

  1. Empty Star Source
  2. Hover Star Source
  3. Star Rating (leave blank if new rating)

So it would look something like this:

$('#someDiv').starRating({
    emptyStarSource : 'http://www.imageland.com/image.png',
    hoverStarSource : 'http://www.imageland.com/image.png',
    initialRating : 3
});

Similar to the Datepicker in how to change options etc.

If anyone could point me in the right direction that would be awesome!

EDIT

So I have had a go with the help of the answer I got. The img click events aren't working, I'm guessing that somehow I have to attach the click handlers after I append them to the page. how? After that, I just need to do the settings!

ratings control

Upvotes: 1

Views: 180

Answers (1)

Arun
Arun

Reputation: 3077

To write a plugin in jQuery use the following syntax

$.fn.setRed = function(){
  return $(this).each(function(){ //this is required for jQuery chaining to work and also if multiple html objects are passed
    var _obj = $(this);
    //work on the object here
    _obj.css("background-color", "red");
  });
}

You can then use

$(".ratings").setRed();

Upvotes: 1

Related Questions