JQuery-based star rating plugin

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
Copy codeThe 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 ('<ul class = "studyplay_starBg"> </ul> ')
. Find ('. studyplay_starBg'). width (settings. MaxStar * settings. StarWidth)
. Html ('<li class = "studyplay_starovering" style = "width:' + settings. currentStar * settings. starWidth + 'px; z-index: 0; "id =" studyplay_current "> </li> ');
If (settings. Enabled)
{
Var ListArray = "";
For (k = 1; k <settings. MaxStar + 1; k ++)
{
ListArray + = '<li class = "studyplay_starON" style = "width:' + settings. starWidth * k + 'px; z-index: '+ (settings. maxStar-k + 1) + '; "> </li> ';
}
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 the div with id "z", a star is selected by default. The number of stars selection dialog box is displayed, you can write the following code:
Copy codeThe Code is as follows:
<Div id = "z"> </div>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Z"). studyplay_star ({MaxStar: 5, CurrentStar: 2}, function (value) {alert (value )});
});
</Script>

If you want to display the score result, set Enabled to false.
4. Download Code

Some netizens reported that this problem exists below Firefox. The major reason for the modification was that the li label in the style does not have a defined height. It has been corrected. Thank you. Firefox revised version:
Star2.rar
Thank you!
Third modification: added the 0.5 Score Function
Usage: half equals 0, indicating an increase of one point, and 1 indicates an increase of 0.5.
For example: $ ("# z "). studyplay_star ({MaxStar: 12, CurrentStar: 2, Enabled: true, Half: 1}, function (value) {alert (value )});
: Halfstar2.rar