简单实用的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>
点击下载
RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
优富资源 » 简单实用的jQuery星级评分插件lq-score
  • 2会员总数(位)
  • 927资源总数(个)
  • 0本周发布(个)
  • 0今日发布(个)
  • 3175稳定运行(天)

优富资源网 国内最专业的站长资源平台

WordPress专区 整站源码

切换

博客


全屏


顶部