一个简单的投票插件(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代码

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;
});
};

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

一个简单的投票插件(jQuery rater plugin)相关推荐

流行的jQuery信息提示插件(jQuery Tooltip Plugin)
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning, by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好,会 ...
流行的jQuery信息提示插件(jQuery Tooltip Plugin)【转】
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning , by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好, ...
实现一个简单的投票功能
实现一个简单的投票功能最近项目中需要用到一个投票功能,当时觉得简单,向都没想就动手开始做,没想到走了不少弯路. 后来才发现,是想的太过简单了.来看看改进后的功能. 第一步:数据库设计两个表:一个主 ...
Android-实现一个简单的自动翻译插件
目录实现一个简单的自动翻译插件实现思路几个重要的实现方法 1.解析xml 2.写文件 3. 翻译使用实现一个简单的自动翻译插件最近在开发项目是要将Android相关的资源进行国际化,需要将 ...
搜索引擎快捷导航：一个简单的chrome插件（教程）
搜索引擎快捷导航使用方法 :下载crx扩展名文件,拖入chrome应用管理界面即可 github地址:https://github.com/mouday/chrome-search-tool 编写一 ...
php投票post,请教一个简单的投票页面，post怎么写
以前写过一个简单的投票功能,作用是php post值如果和数据库内容一致,则count+1 截图如下现在希望把check.php由原来的单个框改成多个进行投票网上查了下,要用到数组我把代码改成 ...
Android投票列表设计,AndroidCustomView一个简单的投票排名对比图
简介(投票 ,排名对比图) 一个简单的自定义 View 可高度定制支持设置替换支持 ,和反对的图标支持自定义线宽和支持反对线的字体颜色设置比分值效果图字段属性 OppositeBitma ...
编写一个简单的NodeBB插件
要写 NodeBB 插件,棒极了!在这之前,你需要知道一些东西. 和 WordPress 类似,NodeBB 的插件搭建在 NodeBB 的钩子系统上.钩子系统,通过可控制的方式,把 NodeBB 的 ...
php一个简单的投票系统_一个简单的PHP投票系统
一个简单的PHP投票系统分享到: 作者:转接卡建立2个表,一个用来显示当前主题,一个存放历史结果. 当前主题表结构:选项(包括主题),票数历史结果表结构:id,主题名,关点,投票开始时间,投票结 ...

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

一个简单的投票插件(jQuery rater plugin)相关推荐

最新文章

热门文章