轻松三步:采用奥森图标实现逐浪CMS中的星级点评

在做网站的时候需要做一个星级点评系统，于是我采用了奥森图标和逐浪自带的互动系统实现了星级点评，现在我分享给大家，希望对大家能有所帮助。

星级点评效果如下图：

1、首先需在网站后台添加一个评论互动模块，并在互动模型中添加一个用来存储用户评分分数的字段，如下图

2、在页面上使用

 首先引入最新的BootStrap框架和奥森图标样式，代码如下

<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<script src="http://code.zoomla.cn/jquery/jquery-1.11.0.min.js"></script>    
<script src="http://code.zoomla.cn/boot/dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>    
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>    
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
<![endif]--> 
<link href="http://code.zoomla.cn/boot/dist/css/bootstrap.min.css" rel="stylesheet">      
<link href="http://code.zoomla.cn/boot/dist/css/font-awesome.min.css" rel="stylesheet"/>

设置表单

引入奥森图标 只要定义class为fa fa-star即可，并为每个星级定义不同的ID，为了便于理解就定义为fa-star1..,starnum(n)为评星事件,n表示得分

getshop()表单提交，提交表单前将星级评分值传入表单

<div class="myconment">
<form name="form7" id="form7" method="post" action="/PubAction.aspx">
<input type="hidden" name="PubTitle"  id="PubTitle" value="评论标题">
<input type="hidden" name="PubID" id="PubID" value="7">
<input type="hidden" name="PubContentid" id="PubContentid" value="所需评论的商品或内容的ID">
<input type="hidden" name="score" id="score"> /*评分字段*/
<div class="col-lg-10 col-md-10 col-sm-9 col-xs-8 shop_conment_r">
<strong>评分：<span class="myrating">
<i class="fa fa-star" id="fa-star1" title="很差" onClick="starnum(1)"></i>
<i class="fa fa-star" id="fa-star2" title="比较差" onClick="starnum(2)"></i>
<i class="fa fa-star" id="fa-star3" title="一般" onClick="starnum(3)"></i>
<i class="fa fa-star" id="fa-star4" title="满意" onClick="starnum(4)"></i>
<i class="fa fa-star" id="fa-star5" title="很满意" onClick="starnum(5)"></i>
</span></strong>
<ul class="list-unstyled">
<li><textarea name="PubContent"  rows="4" id="PubContent" class="form-control"></textarea></li>/*评分内容*/
<li class="pull-right"><input type="button" name="button" id="button" class="btn btn-sm btn-success" value="发表" onClick="getshop()"></li>

<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"></div>
</form>
</div>

javascript函数

<script>
var pubscore=1; /*设置默认分数为1分*/
//商品星级评论
/*点击五角星时，先将所有五角星样式初始化，还原初始颜色，并设置分数*/
function starnum(obj){
	$(".myrating").find(".fa").css("color",'#ccc');
	for( var i=1; i<=obj; i++){		 
		$("#fa-star"+i).css("color",'#ffd200');
		pubscore=i;
	}		
}
/*将星级评分值传入表单,提交表单*/
function getshop(){
 	$("#score").val(pubscore);
	$("#form7").submit();	
}
</script>

引用之后就可以在页面上实现评星系统了，效果如下图

图文并茂，效果卓越！

值得推荐学习！

感谢分享，果断转载了。

好的

这个我要学习下

不错不错