您的位置：首页 > Web前端 > JQuery

Jquery插件---实现类似淘宝打分，多条。

2012-12-04 16:30 465 查看

网上坑爹的打分工具有木有？我要多个打分啊！一条打分有个毛用啊~

网上找了个打分工具，没用啊~！没能满足我的需求，我就自己改了一个。虽然改的不辛苦，但是还是自己摸索出来的~o(∩_∩)o 废话不多说代码贴了：

打分的图标样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>无标题文档</title>
<script type="text/javascript" src="css/jquery-1.6.2.min.js"></script>

</head>
<body>
<script type="text/javascript">
$.fn.studyplay_star=function(options,callback){
//默认设置
var settings ={
MaxStar      :5,
StarWidth    :28,
CurrentStar :5,
Enabled      :true,
ClassIndex:1
};
if(options) { jQuery.extend(settings, options); };
var container = jQuery(this);
container.css({ "position": "relative" })
.html('<ul class="studyplay_starBg' + settings.ClassIndex + '"></ul>')
.find(".studyplay_starBg" + settings.ClassIndex).width(settings.MaxStar * settings.StarWidth)
.html('<li class="studyplay_starovering' + settings.ClassIndex+
'" style="width:' + settings.CurrentStar * settings.StarWidth +
'px; z-index:0;" id="studyplay_current' + settings.ClassIndex + '"></li>');
if(settings.Enabled)
{
var ListArray = "";
for(k=1;k<settings.MaxStar+1;k++)
{
ListArray += '<li class="studyplay_starON' + settings.ClassIndex +
'" style="width:' + settings.StarWidth * k + 'px;z-index:' + (settings.MaxStar - k + 1) + ';"></li>';
}
container.find('.studyplay_starBg' + settings.ClassIndex).append(ListArray)
container.find('.studyplay_starON' + settings.ClassIndex).hover(function () {
$(this).removeClass('studyplay_starON'+settings.ClassIndex).addClass("studyplay_starovering" + settings.ClassIndex);
$("#studyplay_current"+settings.ClassIndex).hide();
},
function () {
$(this).removeClass('studyplay_starovering' + settings.ClassIndex).addClass("studyplay_starON" + settings.ClassIndex);
$("#studyplay_current"+settings.ClassIndex).show();
})
.click(function(){
var studyplay_count = settings.MaxStar - $(this).css("z-index") + 1;
$("#studyplay_current"+settings.ClassIndex).width(studyplay_count*settings.StarWidth)
//回调函数
if (typeof callback == 'function') {
callback(studyplay_count);
return ;
}
})
}
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#z").studyplay_star({ MaxStar: 5, CurrentStar: 0, Enabled: true ,ClassIndex:1}, function (value) { alert(value+'z') });
$("#x").studyplay_star({ MaxStar: 5, CurrentStar: 0, Enabled: true ,ClassIndex:2}, function (value) { alert(value+'x') });
});
</script>

<div id="z"></div>
<p> </p>

<div id="x"></div>
</body>
</html>
<style>
.studyplay_starBg1{
background:url(images/20100807121800.gif) 0 -33px;position:absolute; top:0; left:0; height:28px; padding:0px; cursor:pointer;
}
.studyplay_starovering1{
background:url(images/20100807121800.gif); height:28px; position:absolute; top:0; left:0;
}
.studyplay_starON1{
position:absolute; top:0; left:0; height:22px;
}
.studyplay_starBg2{
background:url(images/20100807121800.gif) 0 -33px;position:absolute; top:0; left:0; height:28px; padding:0px; cursor:pointer;
}
.studyplay_starovering2{
background:url(images/20100807121800.gif); height:28px; position:absolute; top:0; left:0;
}
.studyplay_starON2{
position:absolute; top:0; left:0; height:22px;
}
</style>

为了让大家方便，提供个下载。

▄︻┳═一http://files.cnblogs.com/x-xk/Jquery%E6%8F%92%E4%BB%B6-%E5%A4%9A%E6%9D%A1%E6%89%93%E5%88%86.zip

我也不知道我这个规范不规范，但是能用。精通插件的高手，请指点我一二谢谢了........o(∩_∩)o

我期待能让插件更简单。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航