想在自己的网站文章页面加一个评分的功能。奈何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下载。
注:本文选自个人网站 天意人间 ,转载请保留本段链接。