/**
* Simple rate 插件
* V1.0
* @author ln
* html : <input id="rating" range-max="12" value="10"/>
* $('#rating').rate();
*/
;(function($){
$.fn.rate = function(op){
var defaults = {
'range_max':5,
'bg_path':'img/rate.png', //未选中图片
'bg_path_rating':'img/rating.png', //选中的图片
'star_width':36,
'star_height':36,
'call_back':function(){}
}
if(this.length > 0){
return this.each(function(){
var opts = $.extend(defaults,op); //配置
var $rate = $(this); //input
var $rate_bar; //构建的评分条
if($(this).attr('range-max'))
opts.range_max = parseInt($(this).attr('range-max'));
_build.call(this,opts);
$rate_bar = $(this).next()
_init_set.call(this);
//下面这段代码必须重构
$(this).next().children().bind('mouseover',function(){
_pre_rate.call(this);
});
$(this).next().children().bind('mouseout',function(){
var rate_value = $rate.val();
rate_value = rate_value>0?rate_value:0;
_set_style(rate_value);
});
$(this).next().children().bind('click',function(){
_pre_rate.call(this);
var index = $(this).parent().children().index($(this));
_init_set.call(this,index+1);
opts.call_back(index+1);
});
//初始化页面
function _build(opts){
var ele_mark = '<ul style="list-style:none;'+
'display:block;">';
if(opts.range_max){
for (var i = opts.range_max - 1; i >= 0; i--) {
ele_mark+='<li style="display:block;'+
'width:'+opts.star_width+'px;'+
'height:'+opts.star_height+'px;'+
'cursor:pointer;'+
'float:left;"'+
'></li>';
};
}
ele_mark+="</ul>";
$(this).hide().after(ele_mark);
}
function _init_set(rate_value){
if(rate_value){
$rate.val(rate_value);
}else{
rate_value = $rate.val();
}
_set_style(rate_value);
}
function _pre_rate(){
var index = $rate_bar.children().index($(this));
_set_style(index+1);
}
function _set_style(rate_value){
$rate_bar.children().css('background','url(\"'+opts.bg_path+'\") no-repeat #fff');
$rate_bar.children().slice(0,rate_value).css('background','url(\"'+opts.bg_path_rating+'\") no-repeat #fff');
}
});
}
}
})(jQuery);