UI设计---星级评价
经常上淘宝的童鞋应该知道，每次购物确认付款后系统都会提示你给对方做评价，差评，中评，好评。今天闲着没事我自己也做了个类似的星级评价组件。
您给的评价是：
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>
