首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > html/css > jQuery简单实用的10种鼠标滑动星级评分插件

jQuery简单实用的10种鼠标滑动星级评分插件

更新时间:2019-01-27 码币:1
357058607
jQuery简单实用的10种鼠标滑动星级评分插件 应用简介

jQuery简单实用的10种鼠标滑动星级评分插件,可以满足多种需求的星星打分评价代码。

js代码

<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/lq-score.min.js"></script> 
<script> 
        /* 
        属性参数介绍: 
            $tipEle--------提示元素,请传入jquery对象 
            fontSize-------大小,字符串类型 
            isReScore------是否允许重新评分 
            tips-----------提示,可以是default默认消息,可以传模板字符串,也可以传长度为5的数组 
            zeroTip--------无分数提示,字符串类型 
            score----------分数,小数、整数都可以 
            callBack-------评分回调,会返回分数和插件元素李,例:function(score,ele){} 
            content--------内容 
            defultColor----默认颜色(未选中的颜色) 
            selectColor----选中后的颜色,可以传单个字符串,也可以传长度为5的数组 
        */
 
        $(function () { 
            //demo1 
            $("#demo1").lqScore(); 
            //demo2 
            $("#demo2").lqScore({ 
                callBack: function (score, ele) { 
                    alert(score); 
                } 
            }); 
            //demo3 
            $("#demo3").lqScore({ 
                $tipEle: $("#tip3"), //提示必须要指定显示的元素,显示样式由你自己定义,如果你不擅长css,可以使用demo中的样式 
                tips: ["不推荐""一般""不错""很棒""极力推荐!"], 
                zeroTip: "未评分" 
            }); 
            //demo4 
            $("#demo4").lqScore({ 
                $tipEle: $("#tip4"), 
                tips: "default"
                score: 3.5 
                //如果需要设置后还能评分,请添加[isReScore:true]属性 
            }); 
            //demo5 
            $("#demo5").lqScore({ 
                content: "♀" //可以传图标 
            }); 
            //demo6 
            $("#demo6").lqScore({ 
                fontSize: "35px" 
            }); 
            //demo7 
            $("#demo7").lqScore({ 
                //此处修改为单颜色,若需要修改为多颜色,请传入长度为5的数组 
                selectColor: "#8eb9f5"
            }); 
            //demo8 
            $("#demo8").lqScore({ 
                isReScore: true//允许重新评分 
            }); 
            //demo9 
            $("#demo9").lqScore({ 
                $tipEle: $("#tip9"), 
                tips: "default" //默认提示 
            }); 
            //demo10 
            $("#demo10").lqScore({ 
                $tipEle: $("#tip10"), 
                tips: "我是{{lq-score}}" //  {{lq-score}}这是一个模板,分数值会将其替换 
            }); 
        }); 
</script>


  • 收藏
  • 投诉
评论列表