Star rating plug-in based on jQuery_jquery-JS Tutorial-php.cn

Star rating plug-in based on jQuery_jquery

WBOY

Release： 2016-05-16 18:03:29

Original

1679 people have browsed it

First, take a look at the running effect as shown in the figure below.

Move the mouse over a star and all the stars in front of the star will light up. Clicking the mouse will record the number of stars clicked and all the stars in front will light up.
1. Principle
The principle of this program is as follows: a "ul" label, the background of the label is gray stars, control the width of the "ul" label to display the number of stars. For example: if the width of a star picture is 23px, then if you want to display 10 stars, then the width of "ul" is 230px to display 10 stars.
n "li" tags, n represents the number of stars you want to display. For example, if you want to display 10 stars, there will be 10 "li" tags. Then the width of these 10 labels is 23px for 1 star, 46px for 2 stars,..., 230px for 10 stars. The background of these "li" tags will be blue stars.
There is also a "li" tag to record the stars or initial settings clicked by the mouse.
These labels are all overlapped. Use the mouse sliding effect to switch the stacking order of these labels to display different numbers of stars. Click to record the number of stars.
2. Source code

Copy the 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 - $(this).css("z-index") 1; 
$("#studyplay_current").width(studyplay_count*settings.StarWidth) 
//Callback function
if (typeof callback == 'function') { 
callback(studyplay_count); 
return ; 
} 
}) 
} 
} 

This plugin has two The first parameter is options, which represents some basic settings of the plug-in; callback represents the callback function, which has a parameter indicating the number of stars selected by the user.
3. Use
If we want to display 5 stars on the div with the id "z", one star will be selected by default, and a dialog box for selecting the number of stars will pop up, as follows: Write code:

Copy code The code is as follows:

If you want to display the rating results, you can Set Enabled to false and it will be ok
4. Code download

Netizens reported that this problem exists in Firefox. Today, we debugged and modified it. The main reason is that the height of the li tag in the style is not defined. Now It has been corrected, thank you friends. Firefox revised version download address:
star2.rar
Sincerely thank you netizens
The third modification: add a 0.5-point scoring function
Instructions for use: half equals 0. Increasing by one point, 1 means an increase of 0.5
For example: $("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){ alert(value)});
Download address: halfstar2.rar