First look at the effect of the operation as shown in the following figure.
Move the mouse over the stars all the stars in front of the star all brighten, the mouse clicks will record the number of stars clicked, the front of all the stars will lighten.
First, the principle
The principle of this procedure is this: a "UL" label, the background of the label for the Gray star, control the "UL" label width shows the number of stars. For example: A star picture width of 23px, then to display 10 stars, then "ul" width of 230px can display 10 stars.
n an "Li" label, n indicates the number of stars you want to display, for example, if you want to display 10 stars then there will be 10 "li" tags. Then the width of the 10 labels is 1 stars width 23px,2 The width of the stars 46px,......,10 the width of the stars 230px. The background of these "li" tags will be blue stars.
There is also an "LI" tag that records the star or initial setting of the mouse click.
These tags are overlapping, through the mouse sliding effect to toggle the stacking order of these labels, showing the number of different stars, click the number of stars recorded.
Second, the source code
Copy Code code 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-$ (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 parameters one is the options represent some basic settings of the plug-in; callback represents a callback function that has a parameter that represents the number of stars selected by the user.
third, the use
If we want to display 5 stars on a div with id "z", by default there is a star selected, the number of selected stars pop-up dialog box, you can write the following code:
Copy Code code 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 show the score result, you can set the enabled to False.
Four, code download
After the netizen reflects that there is this problem under the Firefox, today, the debugging has been modified mainly because the style of Li tag is not defined height caused, has now been revised, thank you, friends. Firefox revised version download address:
Star2.rar
Thank you, friends.
Third modification: Add 0.5 points scoring function
Instructions for use: where half equals 0 to an increase of one point, 1 indicates 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
