js代码
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/lq-score.min.js"></script> <title>简单实用的jQuery星级评分插件lq-score</title> <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>