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

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

整个插件处理的思路，是利用zico中的星状图标，其中系统提供了完整的五角星和半五角星，这些正好可以作为状态使用。
其中完整五角星的图标是：zi_star
同时配合逐浪CMS的互动模块，根据实际应用场景进行开发。

星级点评效果如下图：

代码结构

<form name="form13" method="post" action="/PubAction.aspx">
<input type="hidden" name="PubID" id="PubID" value="13" />
<input type="hidden" name="PubContentid" id="PubContentid" value="节点ID" />
<input type="hidden" name="PubInputer" id="PubInputer" value="提交者传值" />
<div class="form-group">
<input name="PubTitle" type="hidden" id="PubTitle" size="50" value="节点ID"> 
</div>
<div class="star-rating">
<strong>价格：</strong>
<fieldset>
<input type="radio" id="jg5" name="jg" value="5"checked /><label for="jg5" title="非常好" class="zi zi_star"></label>
<input type="radio" id="jg4" name="jg" value="4" /><label for="jg4" title="好" class="zi zi_star"></label>
<input type="radio" id="jg3" name="jg" value="3" /><label for="jg3" title="一般" class="zi zi_star"></label>
<input type="radio" id="jg2" name="jg" value="2" /><label for="jg2" title="差" class="zi zi_star"></label>
<input type="radio" id="jg1" name="jg" value="1" /><label for="jg1" title="非常差" class="zi zi_star"></label>
</fieldset>
</div>

<div class="star-rating">
<strong>地段：</strong>
<fieldset>
<input type="radio" id="dd5" name="dd" value="5" checked/><label for="dd5" title="非常好" class="zi zi_star"></label>
<input type="radio" id="dd4" name="dd" value="4" /><label for="dd4" title="好" class="zi zi_star"></label>
<input type="radio" id="dd3" name="dd" value="3" /><label for="dd3" title="一般" class="zi zi_star"></label>
<input type="radio" id="dd2" name="dd" value="2" /><label for="dd2" title="差" class="zi zi_star"></label>
<input type="radio" id="dd1" name="dd" value="1" /><label for="dd1" title="非常差" class="zi zi_star"></label>
</fieldset>
</div>
<div class="star-rating">
<strong>交通：</strong>
<fieldset>
<input type="radio" id="jt5" name="jt" value="5"checked /><label for="jt5" title="非常好" class="zi zi_star"></label>
<input type="radio" id="jt4" name="jt" value="4" /><label for="jt4" title="好" class="zi zi_star"></label>
<input type="radio" id="jt3" name="jt" value="3" /><label for="jt3" title="一般" class="zi zi_star"></label>
<input type="radio" id="jt2" name="jt" value="2" /><label for="jt2" title="差" class="zi zi_star"></label>
<input type="radio" id="jt1" name="jt" value="1" /><label for="jt1" title="非常差" class="zi zi_star"></label>
</fieldset>
</div>
<div class="star-rating">
<strong>配套：</strong>
<fieldset>
<input type="radio" id="pt5" name="pt" value="5"checked /><label for="pt5" title="非常好" class="zi zi_star"></label>
<input type="radio" id="pt4" name="pt" value="4" /><label for="pt4" title="好" class="zi zi_star"></label>
<input type="radio" id="pt3" name="pt" value="3" /><label for="pt3" title="一般" class="zi zi_star"></label>
<input type="radio" id="pt2" name="pt" value="2" /><label for="pt2" title="差" class="zi zi_star"></label>
<input type="radio" id="pt1" name="pt" value="1" /><label for="pt1" title="非常差" class="zi zi_star"></label>
</fieldset>
</div>
<div class="star-rating">
<strong>环境：</strong>
<fieldset>
<input type="radio" id="hj5" name="hj" value="5"checked /><label for="hj5" title="非常好" class="zi zi_star"></label>
<input type="radio" id="hj4" name="hj" value="4" /><label for="hj4" title="好" class="zi zi_star"></label>
<input type="radio" id="hj3" name="hj" value="3" /><label for="hj3" title="一般" class="zi zi_star"></label>
<input type="radio" id="hj2" name="hj" value="2" /><label for="hj2" title="差" class="zi zi_star"></label>
<input type="radio" id="hj1" name="hj" value="1" /><label for="hj1" title="非常差" class="zi zi_star"></label>
</fieldset>
</div>
<label class="checkbox-inline">
<input type="checkbox" name="gfmd" value="刚需" >刚需 
</label>
<label class="checkbox-inline">
<input type="checkbox" name="gfmd" value="改善" >改善 
</label>
<label class="checkbox-inline">
<input type="checkbox" name="gfmd" value="上学" >上学 
</label>
<label class="checkbox-inline">
<input type="checkbox" name="gfmd" value="结婚" >结婚 
</label>
<label class="checkbox-inline">
<input type="checkbox" name="gfmd" value="养老" >养老 
</label>
<label class="checkbox-inline">
<input type="checkbox" name="gfmd" value="落户" >落户 
</label>
<div class="form-group">
<label for="PubContent">点评：</label>
<textarea class="form-control" name="PubContent" id="PubContent"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-default" onmouseover="myCheck();">提交</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</form>

css代码

<style > .star-rating strong {
 position: absolute;
 margin-right: 10px;
}
.star-rating > fieldset { border: none; display: inline-block; margin-left: 40px; }
.star-rating > fieldset:not(:checked) > input { position: absolute; clip: rect(0, 0, 0, 0); }
.star-rating > fieldset:not(:checked) > label { float: right; padding: 0 .05em; overflow: hidden; white-space: nowrap; cursor: pointer; color: #d8401c; }
.star-rating > fieldset:not(:checked) > label:before { content: '\E362  '; }
.star-rating > fieldset:not(:checked) > label:hover, .star-rating > fieldset:not(:checked) > label:hover ~ label { color: #d8401c; }
.star-rating > fieldset:not(:checked) > label:hover:before, .star-rating > fieldset:not(:checked) > label:hover ~ label:before { content: '\E59E  '; }
.star-rating > fieldset > input:checked ~ label:before { content: '\E59E  '; }
.star-rating > fieldset > label:active { position: relative; top: 2px; }
</style>