现在的位置: 首页 > 综合 > 正文

UI设计—星级评价

2012年11月11日 ⁄ 综合 ⁄ 共 5175字 ⁄ 字号 评论关闭

 经常上淘宝的童鞋应该知道,每次购物确认付款后系统都会提示你给对方做评价,差评,中评,好评。今天闲着没事我自己也做了个类似的星级评价组件。

您给的评价是:

function addEvent(obj,evtype,fn,useCapture) {
		if (obj.addEventListener) {
			obj.addEventListener(evtype,fn,useCapture);
		} else {
			obj.attachEvent("on"+evtype,function(){return fn.call(obj)});//IE不支持事件捕获,修复ie绑定事件this指向window的bug
		} 
	}

  (function(w){
     w.Star=Star||{};
	 /*
	   @totalStar:总星级数
	   @defaultStar:默认星级数
	   @result:评价结果的渲染位置
	   @hover:鼠标画上去时的样式
	   @select:鼠标点击时的样式
	 */
	 function Star(options){
	    this.totlaStar=options.total||5;
		this.defaultStar=options.defaultStar||4;
		this.target=options.target||document.body;//新建UI渲染到哪个元素中
		this.class={mouseover:options.hover||"hover",click:options.select||"select",mouseout:""}
	    this.init();
	 }
	 
	 Star.prototype={
	   init:function(){
	      var div=document.createElement('div'),tmpa=[],select=document.createElement("select");
				select.name="starSelect";;
		  for(var i=0;i<this.totlaStar;i++){
		    var a=document.createElement('a');
			select.options.add(new Option(i+1+"星级",i+1)); 
            a.index=i;
			if(i<this.defaultStar){
			    a.select=true;
		        a.className="select";
		    };
			a.title=(i+1)+"星级";
			tmpa.push(a);
		    div.appendChild(a);
		  };
		  select.options[this.defaultStar-1].selected=true;
		  div.className="star";
		  this.div=div;
		  this.select=select;
		  this.a=tmpa;
		  var self=this;
		  this._eventHandler=function(e){
			 self.eventHandler(e);
		  };
		   this._selectChangeHandler=function(){
			 self.selectChangeHandler(this.value-1);
		  };
		  addEvent(div,"mouseover",this._eventHandler);
		  addEvent(div,"click",this._eventHandler);
		  addEvent(div,"mouseout",this._eventHandler);
		  addEvent(select,"change",this._selectChangeHandler);
		  this.render();
	   },
	   eventHandler:function(e){
	      var e=e||window.event,target=e.target||e.srcElement;
		  for(var i=0;i<this.totlaStar;i++){
			   if(i<1+target.index){
			   this.a[i].select=(e.type=="click")?true:this.a[i].select;
		       this.a[i].className=(e.type=="mouseout")?
			                        (this.a[i].select?"select":""):
								     this.class[e.type];
			   }else{
				 if(e.type=="click"){
				   this.a[i].className='';
				   this.a[i].select=false;}
			   }
		  }
		  if(e.type=="click"){
			if(e.s!==1){this.select.options[target.index].selected=true;}
		  }
	   },
	   selectChangeHandler:function(value){
	       this.eventHandler({s:1,type:"click",target:{index:value}});//将select的onchange事件伪造成onclick好对它们进行统一处理
	   },
	   render:function(){
	      this.target.appendChild(this.select);
		  this.target.appendChild(this.div);
	   }
	 }
   
  })(this);
  new Star({target:document.getElementById("target"),total:10});

附完整代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>UI-星级评分系统</title>
<style>
.star a{
float:left;
cursor:pointer;
text-align:center;
width:16px;
height:16px;
background:url(http://happy.hustonline.net/photo/photos3/hustxiaoc/43061/390137.gif) 0 -32px;}
.star a.hover{
background:url(http://happy.hustonline.net/photo/photos3/hustxiaoc/43061/390137.gif) 0 -48px;}
.star a.select{
background:url(http://happy.hustonline.net/photo/photos3/hustxiaoc/43061/390137.gif);}
</style>
</head>
<body>
您给的评价是:
<div id="target" style="margin-bottom:40px;">
</div>
<script>
function addEvent(obj,evtype,fn,useCapture) {
		if (obj.addEventListener) {
			obj.addEventListener(evtype,fn,useCapture);
		} else {
			obj.attachEvent("on"+evtype,function(){return fn.call(obj)});//IE不支持事件捕获,修复ie绑定事件this指向window的bug
		} 
	}

  (function(w){
     w.Star=Star||{};
	 /*
	   @totalStar:总星级数
	   @defaultStar:默认星级数
	   @result:评价结果的渲染位置
	   @hover:鼠标画上去时的样式
	   @select:鼠标点击时的样式
	 */
	 function Star(options){
	    this.totlaStar=options.total||5;
		this.defaultStar=options.defaultStar||4;
		this.target=options.target||w.body;//新建UI渲染到哪个元素中
                this.onchange=options.onchange||function(){};
		this.class={mouseover:options.hover||"hover",click:options.select||"select",mouseout:""}
	    this.init();
	 }
	 
	 Star.prototype={
	   init:function(){
	      var div=document.createElement('div'),tmpa=[],select=document.createElement("select");
				select.name="starSelect";;
		  for(var i=0;i<this.totlaStar;i++){
		    var a=document.createElement('a');
			select.options.add(new Option(i+1+"星级",i+1)); 
            a.index=i;
			if(i<this.defaultStar){
			    a.select=true;
		        a.className="select";
		    };
			a.title=(i+1)+"星级";
			tmpa.push(a);
		    div.appendChild(a);
		  };
		  select.options[this.defaultStar-1].selected=true;
		  div.className="star";
		  this.div=div;
		  this.select=select;
		  this.a=tmpa;
		  var self=this;
		  this._eventHandler=function(e){
			 self.eventHandler(e);
		  };
		   this._selectChangeHandler=function(){
			 self.selectChangeHandler(this.value-1);
		  };
		  addEvent(div,"mouseover",this._eventHandler);
		  addEvent(div,"click",this._eventHandler);
		  addEvent(div,"mouseout",this._eventHandler);
		  addEvent(select,"change",this._selectChangeHandler);
		  this.render();
	   },
	   eventHandler:function(e){
	      var e=e||window.event,target=e.target||e.srcElement,cur=1+target.index;
		  for(var i=0;i<this.totlaStar;i++){
			   if(i<cur){
			   this.a[i].select=(e.type=="click")?true:this.a[i].select;
		       this.a[i].className=(e.type=="mouseout")?
			                        (this.a[i].select?"select":""):
								     this.class[e.type];
			   }else{
				 if(e.type=="click"){
				   this.a[i].className='';
				   this.a[i].select=false;}
			   }
		  }
		  if(e.type=="click"){
			this.onchange(cur);
			if(e.s!==1){
				this.select.options[target.index].selected=true;
			}
		  }
                 
	   },
	   selectChangeHandler:function(value){
	       this.eventHandler({s:1,type:"click",target:{index:value}});
	   },
	   render:function(){
	      this.target.appendChild(this.select);
		  this.target.appendChild(this.div);
	   }
	 }
   
  })(this);
  new Star({target:document.getElementById("target"),total:5,onchange:function(v){alert(v);}});
</script>
</body>
</html>

抱歉!评论已关闭.