基于Mootools的评分插件Rating
想在自己的网站文章页面加一个评分的功能。奈何Mootools的插件太少，就算找到了也是很庞大的大家伙。就自己动手写了一个。没有网上的那写ajax提交等乱七八糟的功能，但是肯定是够用的了，不加注释总共七十多行代码。
本版本是基于Mootools的，过段时间应该会用纯javascript代码实现一次。
发点懒，注释都写在代码里面了：
var Rating=new Class({ //实现Events类，因为之后在点击的时候可以触发一个事件 Implements:Events, //构造函数 //where 要加入的位置，where可传递dom、Element对象或者元素的id字符串 //store 可选,默认分数，如果不输入默认为5分 //name 可选，创建Rating对象的时候会创建一个input hidden对象，name为对象的 // name属性，不不输入默认为rating。 //starnum 可选,星星的数量,不输入默认为10 initialize:function(where,store,name,starnum){ store=store||5; me=this; me.enable=true; me.starnum=starnum||10; where=$(where); //创建div对象，用来放置星星 var rat=new Element("div",{ styles:{ height:20, cursor:"pointer" } }); //创建input hidden对象。 var ivalue=new Element("input",{ type:"hidden", name:name||"rating", value:store }); me.ivalue=ivalue; //把input hidden对象插入到上面创建的div里面 ivalue.inject(rat); rat.inject(where); //创建星星图片 me.stars=[]; for(var i=0;i<me.starnum;i++){ var img=new Element("img",{ styles:{ width:16, height:16 } }); (function(n){ //为星星图片添加事件 img.addEvents({ //鼠标移上 'mouseover':function(){ if(me.enable) me.setRating(n+1,1); }, //鼠标移开 'mouseout':function(){ if(me.enable) me.setRating(me.ivalue.get("value"),2); }, //点击 'click':function(){ if(me.enable) me.setRating(n+1); } }); })(i); me.stars.push(img); //把图片插入到div img.inject(rat); } //设置初始的分数，同时也是为图片加上src属性 me.setRating(store,2); }, //设置分数 //n 分数 //t 有三种选择，其中两种为内部调用，外部调用的时候，请不要轻易设置 // 当t为1时，只改变图片，不改变input hidden的值,用于鼠标移上的事件 // 当t为2时，改变图片，并且改变input hidden的值,用于鼠标移出恢复值 // 不设置t的时候，改变图片，改变input hidden的值，并触发事件,用于点击鼠标选中的时候 setRating:function(n,t){ if(!this.enable) return; n=n.toInt(); //改变图片 if(n>0&&n<=me.starnum){ for(var i=1;i<=me.starnum;i++){ if(i<=n){ this.stars[i-1].set("src","js/star_done.png"); }else{ this.stars[i-1].set("src","js/star_un.png"); } } //是否改变input hidden的值 if(t!==1){ this.ivalue.set("value",n); //是否触发事件 if(t!==2){ //触发事件，因为上面实现了Events，所以这里可以触发事件 this.fireEvent("rate"); } } } }, //得到分数 getRating:function(){ return this.ivalue.get("value"); }, //设置是否可用 setEnable:function(b){ this.enable=!!b; } });
下面再说调用的方法，因为上面已经注释的比较清楚了，这里，应该很容易看懂：
<html>
<head>
<meta charset="utf-8" />
<title>Rating Test</title>
<script language="javascript" src="js/mootools.1.4.5.js"></script>
<script language="javascript" src="js/Rating.js"></script>
<script language="javascript">
document.addEvent("domready",function(){
//创建一个对象，放在ratingtest下，默认为5分，input hidden对象name为store
var rating=new Rating("ratingtest",5,"store");
//添加rate事件，当选择5分的时候，设置为不可用状态
rating.addEvent("rate",function(){
if(this.getRating()==5){
this.setEnable(false);
}
});
//添加按钮点击事件，设置为可用
$("enable").addEvent("click",function(){
rating.setEnable(true);
});
});
</script>
</head>
<body>
<div id="ratingtest">评分:</div>
<div><input type="button" id="enable" value="enable"></div>
</body>
</html>
后台获取的时候，以php为例，只要$_POST/GET["store"]就行了 然后再放上一张效果图：
源文件的打包下载，因为防盗链问题，有需要的朋友请移步http://www.tianyirenjian.com/article.php?aid=14下载。
注：本文选自个人网站 天意人间 ,转载请保留本段链接。