`
xiaomiya
  • 浏览: 127409 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery实现星级评分

jquery星级评分 
阅读更多

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

<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>

 

<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>

 

<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>

 

/**
 * 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" : "";
			}
		}
	}
 };

 

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

分享到：
| 解决IE6图片半透明效果
评论
发表评论

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

相关推荐

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