注册 登录 充值会员 退出
毕业设计 PHP源码
充值

简单实用的jQuery星级评分插件lq-score

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2019-02-13
简单实用的jQuery星级评分插件lq-score
lq-score是一款简单实用的jQuery星级评分插件,可以满足多种星级评分需求,有10种效果。


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>