星级评论插件

最近公司的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

你可能感兴趣的:(插件)