基于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下载。

注:本文选自个人网站 天意人间 ,转载请保留本段链接。

你可能感兴趣的:(mootools)