这年头,不管你用什么语言搞开发,都得搞个星星评价的功能。因为这个星星评价既美观又实用,搞起来还费不了多大的事,因此很多人都在用,很多人都在搞。如今,因项目需要用Dojo开发一个星星评价功能,于是乎俺就搞了这么一个。具体实现如下:
1、素材准备,1个灰色星星,1个金色星星。
2、使用HTML绘制出五个星星,Code如下:
<div class="ecm ecmEvaluation"> <div data-dojo-type="dijit.layout.ContentPane" class="dijitDialogPaneContent ContentPane"> <div data-dojo-attach-point="artRating" class="dijitDialogPaneContent ContentPane"> <a data-dojo-attach-event="onmouseenter:_onHover" data-dojo-attach-point="rate1"> <img height="20" width="20" class="startOffClass" title="1分" > </a> <a data-dojo-attach-event="onmouseenter:_onHover" data-dojo-attach-point="rate2"> <img height="20" width="20" class="startOffClass" title="2分" > </a> <a data-dojo-attach-event="onmouseenter:_onHover" data-dojo-attach-point="rate3"> <img height="20" width="20" class="startOffClass" title="3分" > </a> <a data-dojo-attach-event="onmouseenter:_onHover" data-dojo-attach-point="rate4"> <img height="20" width="20" class="startOffClass" title="4分" > </a> <a data-dojo-attach-event="onmouseenter:_onHover" data-dojo-attach-point="rate5"> <img height="20" width="20" class="startOffClass" title="5分"> </a> <span class="reteTxtClass" data-dojo-attach-point="rateTxt">请评分</span> </div> <div class="commentContent"> <div data-dojo-type="com.ibm.ecm.nuclear.common.dijit.form.field.TextareaField" data-dojo-props='label: "评论内容:",ref: "ConferenceSummary"' data-dojo-attach-point="comment"></div> </div> <div class="actionBtn"> <div data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:_onAdd">提交</div> <div data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:_onCancel">取消</div> </div> </div> </div>@H_404_15@
3、CSS样式表,通过鼠标滑动来更换星星图片。.ecmEvaluation{ } .ecmEvaluation .commentscore{ margin-top:5px; margin-bottom:3px; } .ecmEvaluation .startOnClass{ background-image: url("images/star-on.gif"); background-repeat: no-repeat; text-align: center; width: 20px; height: 20px; display: inline-block; } .ecmEvaluation .startOffClass{ background-image: url("images/star-off.gif"); background-repeat: no-repeat; text-align: center; width: 20px; height: 20px; display: inline-block; } .ecmEvaluation .reteTxtClass{ vertical-align: 5px; } .ecmEvaluation .commentContent{ height:100px; }@H_404_15@
4、JS文件,鼠标滑过时,星星由灰色变为金色,初始值星星为1金4灰。
initUI: function(){ dojo.removeClass(this.rate1.children[0],"startOffClass"); dojo.addClass(this.rate1.children[0],"startOnClass"); for(var i=2; i<=5; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOnClass"); dojo.addClass(this[rate].children[0],"startOffClass"); } this.score = 1; this.rateTxt.innerHTML ="1分"; },//鼠标滑过时的效果 _onHover: function(event){ this.logger.debug("_onHover"); if(this.rate1 == event.currentTarget){ dojo.removeClass(this.rate1.children[0],"startOffClass"); dojo.addClass(this.rate1.children[0],"startOnClass"); for(var i=2; i<=5; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOnClass"); dojo.addClass(this[rate].children[0],"startOffClass"); } this.score = 1; this.rateTxt.innerHTML ="1分"; }else if(this.rate2 == event.currentTarget){ for(var i=1; i<=2; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOffClass"); dojo.addClass(this[rate].children[0],"startOnClass"); } for(var i=3; i<=5; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOffClass"); } this.score = 2; this.rateTxt.innerHTML ="2分"; }else if(this.rate3 == event.currentTarget){ for(var i=1; i<=3; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOnClass"); } for(var i=4; i<=5; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOffClass"); } this.score = 3; this.rateTxt.innerHTML ="3分"; }else if(this.rate4 == event.currentTarget){ for(var i=1; i<=4; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOnClass"); } for(var i=5; i<=5; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOffClass"); } this.score = 4; this.rateTxt.innerHTML ="4分"; }else if(this.rate5 == event.currentTarget){ for(var i=1; i<=5; i++){ var rate = "rate"+i; dojo.removeClass(this[rate].children[0],"startOnClass"); } this.score = 5; this.rateTxt.innerHTML ="5分"; } }@H_404_15@