基于Mootools的评分插件Rating
<div id="cnblogs_post_body">想在自己的网站文章页面加一个评分的功能。奈何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.set("src","js/star_done.png"); }else{ this.stars.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; }});
下面再说调用的方法，因为上面已经注释的比较清楚了，这里，应该很容易看懂：
<div class="cnblogs_Highlighter"><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>
页:
[1]