基于Mootools的评分插件Rating

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tianyi-yyj/archive/2012/10/06/2712914.html

文章标签：

#javascript #php #ViewUI

本文介绍了一款基于Mootools的简单评分插件，适用于网站文章页面。该插件仅使用七十多行代码实现，支持分数设置、获取等功能，并提供启用/禁用状态切换。

想在自己的网站文章页面加一个评分的功能。奈何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"]就行了然后再放上一张效果图：