简单的等级评分效果

 

截图：（如果你想换成星星，直接修改样式就可以了，提示的描述跟分数都是在插件里设置）

demo:猛击这里

代码有多简单就不说了，本来是找的插件，最后发现一个一个筛选也没找着符合需求的，还是自己硬着头皮动手。写得比较糙，结构上可能不是特别灵活，样式都在demo里

/***
  aLi: 设置星星或等级的对象
  aMsg: 设置提示描述
  hinText: 设置显示描述的对象
  val: 设置分数
  valContent: 设置获取分数或结果的对象

 调用方法：

　　　　$('.num-rate').rating({
　　　　　　aLi: '.num-rate li',
　　　　　　oUl:'.num-rate ul',
　　　　　　hintText: '.num-rate span',
　　　　　　valContent: '.num-rate input'
　　　　})

***/

(function ($, rating) {
    $.fn[rating] = function(options){
        var opt = $.extend({
            aLi: '',
            aMsg: ["很不好","不太如意","还不错","好","很好"],  
            hintText: '',
            val: ["1","2","3","4","5"],
            valContent: ''
        }, options || {});
        var _index; //在click后记录索引值
        
        return this.each(function(){
            var i = iScore = iStar = 0;
            $(opt.aLi)
            .mouseover(function(){
                var index = $(this).index();
                //初始化背景色
                $(opt.aLi).removeClass('onVal')
                //鼠标移上去时的效果 
                for(i=0; i<=index; i++){
                    $(opt.aLi).eq(i).addClass('on');
                    $(opt.hintText).html(opt.aMsg[index]);
                }
            })
            .mouseout(function(){
                var index = $(this).index();
                //鼠标离开的效果
                for(i=0; i<=index; i++){
                    $(opt.aLi).eq(i).removeClass('on');
                    $(opt.hintText).html('');
                }
                //恢复上次的选择结果
                save(_index)
            })
            .click(function(){
                _index = $(this).index();
                $(opt.aLi).removeClass('onVal');
                save(_index)
            })
            //保存选择的结果
            function save(_index){
                $(opt.hintText).html(opt.aMsg[_index]); //显示提示文字
                $(opt.valContent).val(opt.val[_index]); //获取分数
                for(i=0; i<=_index; i++){
                    $(opt.aLi).eq(i).addClass('onVal')
                }
            }
        })
    };
})(jQuery, 'rating');

html和css：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
       <style>

　　　　*{margin:0;padding:0}
　　　　li{list-style:none}
　　　　.num-rate{font-size:12px;width:200px;margin:60px auto}
　　　　.num-rate li{float: left;width: 27px; height: 18px;border:1px solid #eaeaea;text-align: center;line-height: 18px;cursor: pointer;}
　　　　.num-rate li a{color: #999999;display: block;}
　　　　.num-rate li a:hover{text-decoration: none;}
　　　　.num-rate li.onVal, .num-rate li.on{background: #ff870c;border-color: #ff870c}
　　　　.num-rate li.onVal a, .num-rate li.on a{color:#fff;}
　　　　.num-rate .hint{float: left;padding-top: 2px;color: #f60}
       </style>
    </head>
    <body>
        <div class="num-rate clearfix">
            <ul class="clearfix">
                <li><a href="javascript:;" title="很不好">1</a></li>
                <li><a href="javascript:;" title="不太如意">2</a></li>
                <li><a href="javascript:;" title="还不错">3</a></li>
                <li><a href="javascript:;" title="好">4</a></li>
                <li><a href="javascript:;" title="很好">5</a></li>
            </ul>
            <span class="hint"></span>
            <input type="hidden" name="likegrade" value="">
        </div>
    </body>
</html>

 

 

 

posted @ 2013-03-29 17:32  沫鱼  阅读(1111)  评论(0)  编辑  收藏  举报