这个插件是以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有数值,复制给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
分享到:
- 2008-11-24 10:50
- 浏览 2518
- 评论(2)
- 论坛回复 / 浏览 (2 / 10631)
- 查看更多
相关推荐
jQuery Rater Star Plugin 基于jQuery的投票插件 星星评价
Rater评分插件,使用星号对文章评分。
包括 jQuery Rater Star Plugin.7z jquery.raty-0.5.zip jquery.raty-1.4.3.zip jquery-rater.zip jquery星级评级插件.rar jRating.rar rater-star.zip rotating-jquery-tabs1.zip star-rating.zip
只好自己修改了一下一个简单的评分功能插件,终于兼容IE6,IE7, IE8, Firefox, Opera, Chrome, Safari。效果参考: 用法:参考下载后的index.html 依赖: jQuery.js jQuery.rater.js rater.css star.gif star_...
这里是几个比较有价值的关于e-rater的描述,以及应对的方法,看看总是好的
React评价者星评 安装npm install react-raterimport Rater from 'react-rater'import 'react-rater/lib/react-rater.css'// ...render ( ) { return ( < Rater xss=removed xss=removed> )}API < Rater xss=removed...
仿各大主流购物网站评价系统做的一个满意度的选择,很实用,代码易改
Movie-Rater--源码.rar
此扩展程序为标题添加了IMDb评级 此扩展程序为标题添加了IMDb评级 支持语言:English
鳄鱼平地机 该项目是使用版本1.3.2生成的。 贡献者 路易斯(LT)卡博内尔 西亚拉·鲍威尔(Ciara Powell) 刘伯涵 拉胡尔·普拉萨德(Rahul Prasad) 快速开始 npm install && ng build node server ...
Movie-Rater-:使用Django和React的Movie Rater应用程序
面临的挑战是构建一个小型Web应用程序,该应用程序允许用户搜索电影标题,单击该电影标题以获取更多信息,以及使该电影赞不绝口。 挑战说明使我可以使用自己选择的API和API搜索和显示电影信息。 为了给选定的电影...
一个简单的餐厅评分应用程序。 此基于。 感谢您制作了这个很棒的PERN-Stack教程! 请查看此“ 。 此版本包含有关在Heroku中进行部署的设置,一些调整以及使用样式化组件的暗模式实现。
Marvel_Rater 一个小型CRUD应用程序,可为我和妻子一起观看的Marvel电影评分
nss-rater-server
一个高度可定制的评级小部件,支持图像,utf8字形和其他html元素! 使用简单 取决于jQuery // Options var options = { max_value : 10 , step_size : 0.5 , initial_value : 0 , selected_symbol_type : 'utf...
如何运行应用程序要运行此应用程序,您需要通过命令行参数传递一些值,这些选项是: 争论描述dealer 经销商的page_start 您要抓取的第一页page_end 您要抓取的最后一页limit 您要显示的评论数就是说,现在您可以通过...
然后,您需要设置一个 cron 作业(仅限 Linux,在您的计算机后台运行的守护程序,无需输入)定期从网站收集信息到您的数据库中。 crontab -e 打开你的 crontab 进行编辑,然后用你的实际文件路径添加这一行: 0 ...
很好用的css参考资料,本人一直在用,资料比较齐全
Chess elo software for windows.