• 评分插件 jquery.raty.js


    本来想用bootstrap-star-rating的,就是上传插件那个组做的。但是还是css的问题

    后来百度了个别的东西,第一页就能搜到,就不妨链接了。

     * @version        2.5.2
     * @since          2010.06.11
     * @author         Washington Botelho
     * @documentation  wbotelhos.com/raty

    很老的一个东西,能用就好。

     <div id="star{{ite.$id}}" ng-bind="getrating(this,ite)"></div>
    <script src="@Url.Content("~/Content/Component/star-rating/jquery.raty.js")"></script>

    这个ite是循环的数据而已,星星插件只要里面一个分数就行

    一般来讲评分是1~5,半星是0.5,不过我们要求0~10,半星是1

    于是:

    $scope.getrating = function (o, obj) {
                $("#star" + obj.$id).raty({
                    path: '@Url.Content("~/Content/Component/star-rating/img/")',//这是星星图= =其中有选中/没选/半选 3张
                    click: function (score, evt) {
                        obj.Score = score * 2;//这里×2了
                    },
                    half: true,//这是开启半分的
                    readOnly: $scope.sstate != 1,
                    score: obj.Score / 2,//这里要除2- -
                    size: 24,
                    hints: [2, 4, 6, 8, 10]//这里也要改
                });
            }

    然后要,我这边还有要求,鼠标放上去要显示123456789分= =

    这个要改下源文件jquery.raty.js了。

    在_roundStars 这个方法中加了一行

    this.stars.eq(Math.ceil(score) - 1).attr('title', score * 2);

    不然这个title(也就是鼠标放上去显示的文字)会按照初始化(hints: [2, 4, 6, 8, 10])只显示出246810

    整段是这样的,但是有个问题 10分和0分好像不显示,不过无所谓了= =

    --------------------------------------------------------- 
    }, _roundStars: function (score) {
                var rest = (score - Math.floor(score)).toFixed(2);
    
                if (rest > this.opt.round.down) {
                    var icon = 'starOn';                                 // Up:   [x.76 .. x.99]
    
                    if (this.opt.halfShow && rest < this.opt.round.up) { // Half: [x.26 .. x.75]
                        icon = 'starHalf';
                    } else if (rest < this.opt.round.full) {             // Down: [x.00 .. x.5]
                        icon = 'starOff';
                    }
                    this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + this.opt[icon]);
                }                              // Full down: [x.00 .. x.25]
                this.stars.eq(Math.ceil(score) - 1).attr('title', score * 2);
            }, _target: function (score, evt) {
    --------------------------------------------------------- 
  • 相关阅读:
    网络记事本第八天
    软件工程第十周总结
    网络记事本第六,七天
    网络记事本开发,第四天
    网络记事本开发第二,三天
    leetcode 198 打家劫舍
    leetcode 46 全排列
    设计模式 之 动态代理
    设计模式 之 静态代理
    设计模式 之 桥接模式
  • 原文地址:https://www.cnblogs.com/suzu/p/5667525.html
Copyright © 2020-2023  润新知