一个简单的投票插件(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库.希望有人知道
原因告诉我一下.
jQuery.fn.rater = function(options){var settings = {active : true, //是否激活投票功能maxvalue: 10, //星星的个数curvalue: 0, //激活的星星个数style : 'normal'//默认样式(25px)};//如果options有数值,复制给settingsif(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');//获得所有的.starstars.click(function(){raterValue = jQuery(this).children('a').href.split('#');//在这里可以进行具体的操作,比如说调用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;});};
页:
[1]