星级评论插件
最近公司的Fantashow要嵌入一个网页，做了一个星级评论插件：
HTML Code：
<!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>template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/main.css" />
</head>
<body>
<!-- Content Start-->
<div id="wrap">
<div class="template-title">Template title</div><!--Template title-->
<div class="template-line"></div><!-- 分隔线 -->
<div class="template-view-content">
Average Rating:
<div class="review-star-box">
<span id="view-star"><a></a><a></a><a></a><a></a><a></a></span><!--星级显示，一个A标签表示一个星-->
</div>
<span class="star-now"><!-- 这里显示几星,等级 --></span>Ratings
</div>
<div class="template-line"></div><!-- 分隔线 -->
<div class="write-container">
<div class="rate-this-template"><span class="strong">Rate this template:</span>
<div class="review-star-box">
<div id="review-star"><a></a><a></a><a></a><a></a><a></a></div><!--星级显示，一个A标签表示一个星 -->
</div>
</div>
</div>
<div class="write-a-review"><span style="float:right">Reviews:238</span>Write a reviewAll</div>
<form action="" method="post">
<input type="hidden" name="star" class="star" value="0"/><!-- 星级参数，隐藏域 -->
<textarea class="write-content" name="content">Write your rview hrere</textarea>
<div class="template-bottom">
<div class="left">
<span class="success">Your review has been successfully submitted.</span>
</div>
<div class="right">
<span class="write-submite">Submit</span>
</div>
<div class="clear-float"></div>
</div>
</form>
</div>
<!-- Content End -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS Code：
/*-- CSS RESET --*/
html,body{background:#f7ecd5; padding:0; margin:0; font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#333; line-height:1}
form{ display:inline}img{border:none;}ul,li,ol,dl,dd{margin:0; padding:0; list-style:none}
.strong{font-weight:bold}
.clear-float{ clear:both; line-height:0; font-size:0;}
#wrap{width:260px; margin:auto}/*-- webpage Width --*/
#wrap .template-title{ font-weight:bold; font-size:16px; line-height:35px;}
#wrap .template-view-content{margin:20px auto; line-height:35px; height:35px;}
#wrap .template-line{ border-bottom:1px solid #fefaf2; border-top:1px solid #e0d3b5}
#wrap .web-content{padding:5px 0; height:120px;}
#wrap #create_time{ margin-left:10px;}
#wrap .write-container{margin:20px auto}
#wrap .write-a-review{ margin:5px auto}
#wrap .write-title,#wrap .write-content{ width:250px; border:1px solid #a0bcca; border-radius:3px; padding:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; font-style:italic}
#wrap .write-content{height:85px; margin:5px auto; overflow-y:auto}
#wrap .write-submite{ text-align:right; color:#009}
#wrap .rate-this-template{ height:20px; line-height:20px;}
/*#wrap .template-bottom{}*/
#wrap .template-bottom .left{float:left; width:80%}
#wrap .template-bottom .right{float:right; width:20%; text-align:right}
#wrap .template-bottom .right span{cursor:pointer}
#wrap .template-bottom .success{color:green}
#wrap span.link{color:#000099; font-style:italic;}
#wrap a:link{color:#009; text-decoration:none}
#wrap a:visited{color:#009; text-decoration:none}
#wrap a:hover{color:#009; text-decoration:none}
#wrap a:active{color:#009; text-decoration:none}
/*-- Review Star --*/
#review-star{ margin-left:5px}
#wrap .review-star-box{width:110px; height:35px; vertical-align:top; display:inline-block; *display:inline; *zoom:1; *margin-top:-2px;}
#wrap #starNum{ margin-left:10px; font-weight:lighter}
#review-star a,#wrap #view-star a{width:20px; height:20px; display:inline-block; _display:inline; _zoom:1; cursor:pointer; background:url(images/star.png) no-repeat left top; _background:url(images/star.gif) no-repeat left top;}
#review-star a.on,#review-star a.hover,#wrap #view-star a.on{background:url(images/star.png) no-repeat left -28px; _background:url(images/star.gif) no-repeat left -28px;}
#wrap #view-star{margin-left:5px;}
#wrap #view-star a{ cursor:auto; margin-top:8px; *margin-top:0; _margin-top:8px}
#wrap .star-now{margin:auto 5px; display:inline-block; _display:inline; _zoom:1}
JS Code：
$(function(){
//显示星级评分处
(function(){
var d=4;//这个变量是读取数据库里的星级等级
$(".star-now").html(d)
for(var i=0; i<=(d-1); i++){$("#view-star a:eq("+i+")").addClass("on");}
})();
(function(){//评论开始
//----- 星级选择 -----
var d=0;//默认几颗星;
var s=false;
$("#starNum").html(d+" Star");
for(i=0;i<=(d-1);i++){$("#review-star a:eq("+i+")").addClass("on"); }
$("#review-star a").hover(function(){//鼠标进入时
var n=$(this).index();
$("#review-star a").removeClass("hover");
//$("#review-star a").removeClass("on");
for(var i=0; i<=n; i++){//hover
$("#review-star a:eq("+i+")").addClass("hover");
}
if(typeof me !='undefined'){$("#review-star a").removeClass("on");}
if(!s){$("#review-star a").removeClass("on")}
},function(){//鼠标离开
$("#review-star a").removeClass("hover");/*---鼠标离开--- */
if(typeof me !='undefined'){
for(var m=0; m<=me; m++){
$("#review-star a:eq("+m+")").addClass("on");
}
}
if(!s){
for(var k=0; k<d; k++)
{
$("#review-star a:eq("+k+")").addClass("on");
}
}
});
$("#review-star a").click(function(){
var n=$(this).index();
$("#review-star a").removeClass("on");
for(var i=0; i<=n; i++){//选择星级
//$("#starNum").html(i+1+" Star")
$(".star").val(i+1)
$("#review-star a:eq("+i+")").addClass("on");
}
return me=n,s=true;
});
})();//评论结束
});//jquery End
