Dojo实现滑动星星评价

　　这年头，不管你用什么语言搞开发，都得搞个星星评价的功能。因为这个星星评价既美观又实用，搞起来还费不了多大的事，因此很多人都在用，很多人都在搞。如今，因项目需要用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>

　　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;
}

　　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分";
	}
}

原文地址：https://www.jb51.cc/dojo/291584.html