基于jQuery的星级评分插件【jquery】

web前端|js教程基于jQuery的星级评分插件【jquery】

星级评分

web前端-js教程

首先看一下运行效果下图例。

鼠标移到星星上该星星前面的所有星星全部变亮，鼠标单击将记录点击的星星数，前面的所有星星将变亮。
A、原理
本程序的原理是这样的：一个“ul”标签，该标签的背景为灰色的星星，控制“ul”标签的宽度显示星星的数量。例如：一个星星图片的宽度为23px，那么要显示10个星星，则“ul”的宽度为230px就可以显示10个星星。
n个“li”标签，n表示您要显示星星的个数，例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星星的宽度23px，2个星星的宽度46px，……，10个星星的宽度230px。这些“li”标签的背景将为蓝色的星星。
则另外还有一个“li”标签记录鼠标单击的星星或初始设置。
这些标签都是重叠在一起的，通过鼠标滑动效果切换这些标签的层叠顺序，显示不同的星星数量，单击记录星星个数。
B、源码

点图源码,ubuntu如何登录界面,python网页爬虫指南,php专员,黑产业seolzw

 
$.fn.studyplay_star=function(options,callback){ 
//默认设置 
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<settings.MaxStar+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) 
//回调函数 
if (typeof callback == 'function') { 
callback(studyplay_count); 
return ; 
} 
}) 
} 
}

这个插件有两个参数一个是options表示插件的一些基本设置；callback表示回调函数，该函数存在一个参数表示用户选择的星星数量。
C、使用
如果我们想在id为“z”的div上显示5个星星，默认有一颗星星选中，弹出选择星星的个数对话框，就可以如下编写代码：

扫街系统源码,vscode运行代码点哪个,ubuntu pip下载,tomcat被后门植入,爬虫数据清除,php 整数转字符串,品牌为什么需要品牌seo,家居装修网站源码,网页模板修改lzw

 
 
$(document).ready(function(){ 
$("#z").studyplay_star({MaxStar:5,CurrentStar:2},function(value){alert(value)}); 
});

如果想显示评分结果可以把Enabled设置false就ok了
D、代码下载

成绩管理源码,vscode运行c语言环境,ubuntu解压.deb,tomcat安装和卸载,反向代理爬虫,php 获取方法的参数,金华seo关键字优化,旅游网站二级页面图片,魅族手机模板lzw

经网友反映说火狐下面存在这问题，今天进行了调试进行了修改主要是因为样式中li标签没有定义高度引起的，现在已经修正，谢谢朋友们。火狐修正版下载地址：
star2.rar
真心的谢谢网友们
第三次修改：添加0.5分评分功能
使用说明：其中half等于0表示一分一分的增加，1表示0.5的增加
例如：$(“#z”).studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){alert(value)});
下载地址：halfstar2.rar

星级评分