`

jquery星级评分

星级评分 
阅读更多

前面有一篇原生js实现星级评分 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分

Html代码 复制代码 收藏代码
  1. <divclass="star">
  2. <span>jQuery星级评论打分</span>
  3. <ul>
  4. <li><ahref="javascript:;">1</a></li>
  5. <li><ahref="javascript:;">2</a></li>
  6. <li><ahref="javascript:;">3</a></li>
  7. <li><ahref="javascript:;">4</a></li>
  8. <li><ahref="javascript:;">5</a></li>
  9. </ul>
  10. </div>
<div class="star">
<span>jQuery星级评论打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</div>

 

Css代码 复制代码 收藏代码
  1. <style>
  2. *{margin:0;padding:0;font-size:13px;}
  3. ul,li{list-style:none;}
  4. .star {position:relative;width:600px;height:24px; margin:20px auto 0;}
  5. .star span {float:left;height:19px;line-height:19px;}
  6. .star ul{margin:0 10px;}
  7. .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
  8. .star li.on{background-position:0 -28px;}
  9. .star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
  10. .star p em {color: #FF6600;display: block;font-style: normal;}
  11. .star strong {color:#ff6600;padding-left:10px;}
  12. .hidden{display:none;}
  13. </style> 
<style>
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width:600px;height:24px; margin:20px auto 0;}
.star span {float:left;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
.star li.on{background-position:0 -28px;}
.star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.star p em {color: #FF6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>

 

Js代码 复制代码 收藏代码
  1. <script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>
  2. <script type="text/javascript" src="score.js"></script>
  3. </head>
  5. <body>
  6. <script type="text/javascript">
  7. $(function(){
  8. var score = new Score({
  9. callback: function(cfg) {
  10. console.log(cfg.starAmount);
  11. }
  12. });
  13. });
  14. </script> 
<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="score.js"></script>
</head>

<body>
<script type="text/javascript">
$(function(){
var score = new Score({
callback: function(cfg) {
console.log(cfg.starAmount);
}
});
});
</script>

 

Js代码 复制代码 收藏代码
  1. /**
  2. * JQ评分效果
  3. */
  4. function Score(options) {
  5. this.config = {
  6. selector : '.star', // 评分容器
  7. renderCallback : null, // 渲染页面后回调
  8. callback : null// 点击评分回调
  9. };
  11. this.cache = {
  12. aMsg : [
  13. "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
  14. "不满意|部分有破损，与卖家描述的不符，不满意",
  15. "一般|质量一般，没有卖家描述的那么好",
  16. "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
  17. "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
  18. ],
  19. iStar : 0,
  20. iScore : 0
  21. };
  23. this.init(options);
  24. }
  26. Score.prototype = {
  28. constructor: Score,
  30. init: function(options){
  31. this.config = $.extend(this.config,options || {});
  32. var self = this,
  33. _config = self.config,
  34. _cache = self.cache;
  36. self._renderHTML();
  37. },
  38. _renderHTML: function(){
  39. var self = this,
  40. _config = self.config;
  41. var html = '<span class="desc"></span>' +
  42. '<p class="star-p hidden"></p>';
  43. $(_config.selector).each(function(index,item){
  44. $(item).append(html);
  45. $(item).wrap($('<div class="parentCls" style="position:relative"></div>'));
  46. var parentCls = $(item).closest('.parentCls');
  47. self._bindEnv(parentCls);
  48. _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
  49. });
  51. },
  52. _bindEnv: function(parentCls){
  53. var self = this,
  54. _config = self.config,
  55. _cache = self.cache;
  57. $(_config.selector + ' li',parentCls).each(function(index,item){
  59. // 鼠标移上
  60. $(item).mouseover(function(e){
  61. var offsetLeft = $('ul',parentCls)[0].offsetLeft;
  62. ismax(index + 1);
  64. $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden');
  65. $('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'});
  68. var html = '<em>' +
  69. '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +
  70. '</em>' + _cache.aMsg[index].split('|')[1];
  71. $('p',parentCls).html(html);
  72. });
  74. // 鼠标移出
  75. $(item).mouseout(function(){
  76. ismax();
  77. !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
  78. });
  80. // 鼠标点击
  81. $(item).click(function(e){
  82. var index = $(_config.selector + ' li',parentCls).index($(this));
  83. _cache.iStar = index + 1;
  85. !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
  86. var html = '<strong>' +
  87. index +
  88. '分</strong>' +_cache.aMsg[index].split('|')[1];
  90. $('.desc',parentCls).html(html);
  91. _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar});
  92. });
  94. });
  96. function ismax(iArg) {
  97. _cache.iScore = iArg || _cache.iStar;
  98. var lis = $(_config.selector + ' li',parentCls);
  100. for(var i = 0; i < lis.length; i++) {
  101. lis[i].className = i < _cache.iScore ? "on" : "";
  102. }
  103. }
  104. }
  105. }; 
/**
 * JQ评分效果
 */
 function Score(options) {
	this.config = {
		selector                  :   '.star',     // 评分容器
		renderCallback            :   null,        // 渲染页面后回调
		callback                  :   null         // 点击评分回调                         
	};

	this.cache = {
		aMsg : [
				"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
				"不满意|部分有破损，与卖家描述的不符，不满意",
				"一般|质量一般，没有卖家描述的那么好",
				"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
				"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
				],
		iStar  : 0,
		iScore : 0
	};

	this.init(options);
 }

 Score.prototype = {

	constructor: Score,

	init: function(options){
		this.config = $.extend(this.config,options || {});
		var self = this,
			_config = self.config,
			_cache = self.cache;

		self._renderHTML();
	},
	_renderHTML: function(){
		var self = this,
			_config = self.config;
		var html = '<span class="desc"></span>' + 
				   '<p class="star-p hidden"></p>';
		$(_config.selector).each(function(index,item){
			$(item).append(html);
			$(item).wrap($('<div class="parentCls" style="position:relative"></div>'));
			var parentCls = $(item).closest('.parentCls');
			self._bindEnv(parentCls);
			_config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
		});

	},
	_bindEnv: function(parentCls){
		var self = this,
			_config = self.config,
			_cache = self.cache;

		$(_config.selector + ' li',parentCls).each(function(index,item){
			
			// 鼠标移上
			$(item).mouseover(function(e){
				var offsetLeft = $('ul',parentCls)[0].offsetLeft;
				ismax(index + 1);
				
				$('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden');
				$('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'});
				

				var html = '<em>' + 
							  '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' + 
						   '</em>' + _cache.aMsg[index].split('|')[1];
				$('p',parentCls).html(html);
			});

			// 鼠标移出
			$(item).mouseout(function(){
				ismax();
 				!$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
			});
			
			// 鼠标点击
			$(item).click(function(e){
				var index = $(_config.selector + ' li',parentCls).index($(this));
				_cache.iStar = index + 1;
								
				!$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
				var html = '<strong>' +
								index +
						   '分</strong>' +_cache.aMsg[index].split('|')[1];

				$('.desc',parentCls).html(html);
				_config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar});
			});
			
		});

		function ismax(iArg) {
			_cache.iScore = iArg || _cache.iStar;
			var lis = $(_config.selector + ' li',parentCls);
			
			for(var i = 0; i < lis.length; i++) {
				lis[i].className = i < _cache.iScore ? "on" : "";
			}
		}
	}
 };

 

这个也是在网上找的一个相对自己来说更实用一点的。做储备。

分享到：
| day18 监听器 统计在线人数，定时销毁超时 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 星级评分插件

    **jQuery 星级评分插件详解** 在Web开发中，为用户提供直观的反馈和互动是至关重要的，其中星级评分系统就是一个常见的元素。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使得创建...

    jQuery 星星评分代码

    【jQuery星星评分代码】是一种常见的用户界面元素，用于让用户对某个内容或服务进行评价，通常以星形图标表示。在Web开发中，星星评分系统能够为网站增添互动性，提高用户体验，同时也便于收集用户反馈。这个特定的...

    jquery星级评分.zip

    "jquery星级评分.zip"是一个针对这种需求的JavaScript插件，它允许用户以直观的星星图标来对内容进行评分，类似于淘宝的商品评价系统。这个插件基于流行的jQuery库，因此具有良好的浏览器兼容性和易于集成的优点。 ...

    jQuery星级评分插件

    jQuery星级评分插件是一种在网页上实现用户评分功能的JavaScript工具，主要基于广泛使用的jQuery库。这个插件设计小巧，加载快速，使得它在各种网页应用中都能高效地工作，尤其是那些对性能有较高要求的场景。其核心...

    基于SVG的jQuery星级评分插件-jRate

    **基于SVG的jQuery星级评分插件-jRate** 在Web开发中，用户界面的交互性和视觉效果对于提升用户体验至关重要。`jRate`是一个优秀的jQuery插件，它专门用于创建基于SVG的星级评分系统。这个插件使得开发者能够轻松地...

    jQuery星级评分

    **jQuery星级评分插件——jQuery Raty** 在Web开发中，为用户提供直观的星级评价功能是一种常见的需求，例如产品评价、服务评分等。jQuery Raty是一个强大的JavaScript插件，专门用于实现这种功能。它允许开发者...

    满意度jQuery星级评分插件.zip

    【满意度jQuery星级评分插件】是一款用于网页交互增强的JavaScript组件，主要应用于用户评价系统，如产品评论、服务反馈等场景。它利用jQuery库的强大功能，实现了一个动态的星星评分系统，用户可以通过鼠标滑过星星...

    jQuery星星评分插件鼠标滑动星星打分代码【完美支持web、移动端】

    jQuery星星评分插件就是这样一个工具，它允许用户通过鼠标滑动在星星上进行评分，既适用于桌面端，也完美支持移动端。下面将详细介绍这个插件的工作原理和实现方式。 首先，jQuery星星评分插件的核心是JavaScript库...

    简单jQuery星级评分功能插件

    【标题】"简单jQuery星级评分功能插件"是一款用于网页中的评分系统实现的JavaScript插件，它基于流行的jQuery库，能够轻松地为网站添加互动式的星级评分功能。这个插件设计简洁，易于集成，适用于博客评论、产品评价...

    jquery星星评分插件

    "jQuery星星评分插件"就是这样一个工具，它能够为网站添加美观且易于使用的评分系统，让用户可以直观地给出他们对产品或服务的评价。这个插件通常用于电商网站、评论板块、电影评分等场景，提高了用户参与度和网站的...

    jQuery星级评分代码示例

    **jQuery星级评分代码示例**是一种常见的用户界面元素，常用于在线评论、产品评价或用户反馈等场景。这种评分系统允许用户通过选择星星的数量来表达他们对某个事物的满意度或评价等级。在网页开发中，jQuery库的强大...

    简单实用的jQuery星级评分插件样式

    在网页设计中，用户交互是至关重要的，而jQuery星级评分插件就提供了这样一种直观、友好的用户体验方式，让用户能够轻松地对内容进行评分。本文将深入探讨4款简单实用的jQuery星级评分插件，以及如何调整它们的样式...

    jquery星级评分插件

    **jQuery星级评分插件**是一种常用的前端交互组件，主要用于用户评价、反馈或评分场景，如电商商品评价、电影评分等。这种插件基于JavaScript库jQuery，利用其强大的DOM操作和事件处理能力，能够轻松实现动态的星级...

    仿淘宝评分插件jquery星星评分插件

    【标题】"仿淘宝评分插件jquery星星评分插件"是一个基于jQuery库开发的前端组件，主要用于实现类似于淘宝网站上的用户评价系统。该插件通过显示星星图标，让用户能够直观地进行评分，同时提供了一种互动式的用户体验...

    jQuery星星评分代码.zip

    《jQuery星星评分代码实现详解》 在Web开发中，用户评价和评分系统是常见的功能之一，它可以提升用户体验，增加互动性。"jQuery星星评分代码"就是这样一个实用的工具，它利用jQuery库，允许用户以一颗星或半颗星的...

    基于SVG的jQuery星级评分插件.zip

    在“基于SVG的jQuery星级评分插件”中，jQuery被用来处理用户与星级评分图标的交互，如响应用户的点击事件，改变星级状态等。 【星级评分插件】 星级评分插件是网页中常见的一种组件，通常用于让用户对产品、服务或...

    Jquery 星级评分插件

    **jQuery星级评分插件——Raty详解** 在Web开发中，提供用户友好、直观的界面是至关重要的。其中，星级评分系统是常见的交互元素，用于评价产品、服务或内容的质量。Raty是一款基于jQuery的开源插件，它使得在网页...

    Bootstrap 响应式jquery星星评分插件

    Bootstrap响应式jQuery星星评分插件是一种常见的用户反馈和评价机制，广泛应用于网站和应用程序中，为用户提供直观、易于操作的评级体验。这个插件利用了流行的前端框架Bootstrap的响应式设计，确保在不同设备和屏幕...

    jQuery星星评分插件.zip

    jQuery星星评分插件，正如其名，为网页引入了一种直观、易于操作的评分机制，使得用户可以轻松地对内容进行星级评价。这个插件以其简洁的设计和强大的功能，广泛应用于各种在线评分场景，如商品评价、电影评分、餐厅...

Magicbox
Global site tag (gtag.js) - Google Analytics