JQuery-based star rating plug-in

I have written an article about star scoring Based on jquery. Today I have time to rewrite this function and use the jQuery plug-in for future use. First, let's take a look at the running effect as shown in.

Move the mouse to the stars. All the stars in front of the stars are highlighted. Click the mouse to record the number of stars clicked. All the stars in front are highlighted.
I. Principles
The principle of this program is as follows: a "ul" label, the background of the label is a gray star, control the width of the "ul" label to display the number of stars. For example, if the width of a star image is 23px and 10 stars are to be displayed, the width of ul is 230px, and 10 stars are displayed.
N "li" tags. n indicates the number of stars to be displayed. For example, if you want to display 10 stars, there will be 10 "li" tags. Then the width of the 10 tags is 23px for one star, 46px for two stars, and 230px for the 10 stars. The background of these "li" tags will be blue stars.
There is also a "li" label to record the stars or initial settings clicked by the mouse.
These labels overlap. You can switch the order of these labels by swiping the mouse to display the number of stars and click to record the number of stars.
Ii. Source Code

The Code is as follows:

$. Fn. studyplay_star = function (options, callback ){
// Default settings
Var settings = {
MaxStar: 20,
StarWidth: 23,
CurrentStar: 5,
Enabled: true
};
If (options) {jQuery. extend (settings, options );};
Var container = jQuery (this );
Container.css ({"position": "relative "})
. Html ('

')
. Find ('. studyplay_starBg'). width (settings. MaxStar * settings. StarWidth)
. Html ('

');
If (settings. Enabled)
{
Var ListArray = "";
For (k = 1; k {
ListArray + ='

';
}
Container. find ('. studyplay_starBg'). append (ListArray)
. Find ('. studyplay_starON'). hover (function (){
$ ("# Studyplay_current"). hide ();
$ (This). removeClass ('studyplay _ staron'). addClass ("studyplay_starovering ");
},
Function (){
$ (This). removeClass ('studyplay _ starovering '). addClass ("studyplay_starON ");
$ ("# Studyplay_current"). show ();
})
. Click (function (){
Var studyplay_count = settings. MaxStar-Detail (this).css ("z-index") + 1;
$ ("# Studyplay_current"). width (studyplay_count * settings. StarWidth)
// Callback function
If (typeof callback = 'function '){
Callback (studyplay_count );
Return;
}
})
}
}

This plug-in has two parameters: options, which indicates some basic settings of the plug-in; callback, which indicates the callback function. This function has a parameter that indicates the number of stars selected by the user.
Iii. Use
If we want to display five stars on p with id "z", a star is selected by default. The number of stars selection dialog box is displayed, you can write the following code:

The Code is as follows: