一个简单的投票插件(jQuery rater plugin)

这个插件是以Kjell Bublitz<m3nt0r.de@gmail.com>所写的jquery-rater插件为基础进行修改得到的,
核心js并没有修改,只是在原来的基础上去掉了ajax的交互功能,主要是为了更方便我们定制自己的功能.
css样式也没有变动.
原插件demo:http://www.m3nt0r.de/devel/raterDemo/
注意:这个插件用的jquery不知道是哪个版本的,反正我换了自己下的jquery.js库后运行的时候有些小问题,
在IE7下测试时,style='inline-normal'或style='inline-small'的效果并没有体现出来,星星还是另外起了
一行显示,但在firfox下测试又正常,具体原因还不清楚,所以我有了作者自己的jquery.js库.希望有人知道
原因告诉我一下.

Js代码

1. jQuery.fn.rater = function(options)   
2. {   
3.     var settings = {   
4.         active    : true, //是否激活投票功能   
5.         maxvalue  : 10,   //星星的个数   
6.         curvalue  : 0,     //激活的星星个数   
7.         style     : 'normal'  //默认样式(25px)   
8.     };   
9.     //如果options有数值,复制给settings   
10.     if(options) { jQuery.extend(settings, options); };   
11.   
12.     var container = jQuery(this);   
13.     jQuery.extend(container, { averageRating: settings.curvalue });   
14.   
15.     //默认样式(25px)   
16.     if(!settings.style || settings.style == null || settings.style == 'normal') {   
17.         var raterwidth = settings.maxvalue * 25;   
18.         var ratingparent = '<ul class="star-rating" style="width:'+raterwidth+'px">';   
19.     }   
20.     //小星星(10px)   
21.     if(settings.style == 'small') {   
22.         var raterwidth = settings.maxvalue * 10;   
23.         var ratingparent = '<ul class="star-rating small-star" style="width:'+raterwidth+'px">';   
24.     }   
25.     //将投票插件添加在同一行(25px)   
26.     if(settings.style == 'inline-normal') {   
27.         var raterwidth = settings.maxvalue * 25;   
28.         var ratingparent = '<span class="inline-rating"><ul class="star-rating" style="width:'  
29.             +raterwidth+'px">';   
30.     }   
31.     //将投票插件添加在同一行(10px)   
32.     if(settings.style == 'inline-small') {   
33.         var raterwidth = settings.maxvalue * 10;   
34.         var ratingparent = '<span class="inline-rating"><ul class="star-rating small-star" style="width:'  
35.             +raterwidth+'px">';   
36.     }   
37.     container.append(ratingparent);   
38.   
39.     var starWidth, starIndex, listitems = '';   
40.     var curvalueWidth = Math.floor(100 / settings.maxvalue * settings.curvalue);   
41.     if(settings.active) { //允许投票   
42.         for(var i = 0; i <= settings.maxvalue ; i++) {   
43.             if (i == 0) { //创建激活的星星   
44.                 listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;" title="'  
45.                 +settings.curvalue+'/'+settings.maxvalue+'">'  
46.                 +settings.curvalue+'/'+settings.maxvalue+'</li>';   
47.             } else {   
48.                 starWidth = Math.floor(100 / settings.maxvalue * i);   
49.                 starIndex = (settings.maxvalue - i) + 2;   
50.                 //'#'的作用是为了防止页面跳转,方便ajax应用   
51.                 listitems+='<li class="star"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue   
52.                     +'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';   
53.             }   
54.         }   
55.     } else { //不允许投票   
56.         listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;" title="'  
57.                 +settings.curvalue+'/'+settings.maxvalue+'">'  
58.                 +settings.curvalue+'/'+settings.maxvalue+'</li>';   
59.     }   
60.     container.find('.star-rating').append(listitems);   
61.     //原来的js文件没有下面一行,我觉得应该加上.   
62.     container.find('.star-rating').append('</ul>');   
63.   
64.     //这一行的作用不清楚,如果不加的话会导致显示混乱   
65.     container.append('<span class="star-rating-result"></span>');    
66.   
67.     var stars = jQuery(container).find('.star-rating').children('.star');//获得所有的.star   
68.     stars.click(function()   
69.     {   
70.         raterValue = jQuery(this).children('a')[0].href.split('#')[1];   
71.         //在这里可以进行具体的操作,比如说调用ajax方法等.这里只是弹出了所选的按钮值,   
72.         //然后不再允许投票   
73.         container.find('.star-rating').remove();   
74.         container.find('.inline-rating').remove();   
75.         container.rater({active:false,maxvalue:settings.maxvalue,curvalue:raterValue,style:settings.style});   
76.         alert(raterValue);   
77.         return false;   
78.     });   
79. };  

jQuery.fn.rater = function(options)
{
	var settings = {
		active    : true, //是否激活投票功能
		maxvalue  : 10,   //星星的个数
		curvalue  : 0,     //激活的星星个数
		style     : 'normal'  //默认样式(25px)
	};
	//如果options有数值,复制给settings
	if(options) { jQuery.extend(settings, options); };

	var container = jQuery(this);
	jQuery.extend(container, { averageRating: settings.curvalue });

	//默认样式(25px)
	if(!settings.style || settings.style == null || settings.style == 'normal') {
		var raterwidth = settings.maxvalue * 25;
		var ratingparent = '<ul class="star-rating" style="width:'+raterwidth+'px">';
	}
	//小星星(10px)
	if(settings.style == 'small') {
		var raterwidth = settings.maxvalue * 10;
		var ratingparent = '<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
	}
	//将投票插件添加在同一行(25px)
	if(settings.style == 'inline-normal') {
		var raterwidth = settings.maxvalue * 25;
		var ratingparent = '<span class="inline-rating"><ul class="star-rating" style="width:'
			+raterwidth+'px">';
	}
	//将投票插件添加在同一行(10px)
	if(settings.style == 'inline-small') {
		var raterwidth = settings.maxvalue * 10;
		var ratingparent = '<span class="inline-rating"><ul class="star-rating small-star" style="width:'
			+raterwidth+'px">';
	}
	container.append(ratingparent);

	var starWidth, starIndex, listitems = '';
	var curvalueWidth = Math.floor(100 / settings.maxvalue * settings.curvalue);
	if(settings.active) { //允许投票
		for(var i = 0; i <= settings.maxvalue ; i++) {
			if (i == 0) { //创建激活的星星
				listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;" title="'
				+settings.curvalue+'/'+settings.maxvalue+'">'
				+settings.curvalue+'/'+settings.maxvalue+'</li>';
			} else {
				starWidth = Math.floor(100 / settings.maxvalue * i);
				starIndex = (settings.maxvalue - i) + 2;
				//'#'的作用是为了防止页面跳转,方便ajax应用
				listitems+='<li class="star"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue
					+'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
			}
		}
	} else { //不允许投票
		listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;" title="'
				+settings.curvalue+'/'+settings.maxvalue+'">'
				+settings.curvalue+'/'+settings.maxvalue+'</li>';
	}
	container.find('.star-rating').append(listitems);
	//原来的js文件没有下面一行,我觉得应该加上.
	container.find('.star-rating').append('</ul>');

	//这一行的作用不清楚,如果不加的话会导致显示混乱
	container.append('<span class="star-rating-result"></span>'); 

	var stars = jQuery(container).find('.star-rating').children('.star');//获得所有的.star
	stars.click(function()
	{
		raterValue = jQuery(this).children('a')[0].href.split('#')[1];
		//在这里可以进行具体的操作,比如说调用ajax方法等.这里只是弹出了所选的按钮值,
		//然后不再允许投票
		container.find('.star-rating').remove();
		container.find('.inline-rating').remove();
		container.rater({active:false,maxvalue:settings.maxvalue,curvalue:raterValue,style:settings.style});
		alert(raterValue);
		return false;
	});
};

 

• 
• 大小: 16.9 KB

• jquery_rater.rar (19.3 KB)
• 下载次数: 12