由于公司项目需要,使用jRating插件,这两天一直在学习它,今天暂时把需求以及遇到的问题都解决了,现在在这边总结一下。
jRating的基本使用,首先当然是下载jQuery jRating插件下载,放到项目中后,调用如下代码:
<div class="rating" data-average="3" data-id="1"></div>
<script>
$(function (){
$(".rating").jRating(){
phpPath:'xxxx.php',
onSuccess: function(){alert('success!');},
onError:function(){alert('i am sorry!');}
}
}); <script>
其中,phpPath就是把数据通过AJAX POST到自己的事物处理页面,进行处理,它默认传递两个值(也可以在修改源代码后修改其他值),一个是data-id 这里可以放需要修改的数据库表的KEY,另一个就是用户点击评分数,在处理事物的页面,需要返回一个json数据:
1 /**这里用了CI框架,所以获取POST信息是使用这样的代码*/ 2 $post = $this->input->post (); 3 $id = $post ['idBox']; 4 $rate = $post ['rate']; 5 /**自己的数据库操作或者其他事物处理,巴拉巴拉的.....*/ 6 /**下面就是根据操作成功与否,进行返回信息的设置*/ 7 $aResponse ['error'] = false; 8 $aResponse ['message'] = 'An error occured during the request. Please retry' + ''; 9 $aResponse ['server'] = '<strong>yes,id:' . $id . 'rate:' . $rate . '</strong>'; 10 echo json_encode ( $aResponse );
然后,在onSuccess或者onError上执行对应代码,如果有的话.jRating可设置参数还有其他
这些在源码里也可以看到:
$.fn.jRating = function(op) { var defaults = { /** String vars **/ bigStarsPath : '/assets/images/stars.png', // 设置大星星的路径,不然会在console中提示无法找到...图片 smallStarsPath : '/assets/images/small.png', // 设置小星星路径 phpPath : '/admin/categories/set_grade_info', // 处理事务的页面路径 type : 'big', // 可以选择small或者big,就是大星星还是小星星的区别而已 /** Boolean vars **/ step:false, // 设置是否一颗一颗跳还是0.1课都可以 isDisabled:false,//设置是否为可点击 true为不可点击 showRateInfo: true,//设置是否显示鼠标移动到评分条上面的时候的分数 canRateAgain : false,//设置是否可以多次评分,若为true则可以进行nbRates评分(下面的一个参数) /** Integer vars **/ length:5, // 星星的颗数 decimalLength : 0, // 评分的小数位,最大三位 rateMax : 5, // 评分总分 rateInfosX : -45, //评分信息距离鼠标X轴上的距离(默认的-45,正好是让它在鼠标的正下方) rateInfosY : 5, //评分信息距离鼠标Y轴上的距离
nbRates : 1, //和上面的canRateAgain配合进行多次评分
/** Functions **/
onSuccess : null, //成功后,干什么
onError : null }; //失败后,干什么
......
基本介绍完了,接下来是需求和问题,首先,需求是这样的,先展示给用户的时候,isDisabled = true也就是用户无法点击,当点击某个按钮或者其他触发后,isDisabled再等于true,完成其他操作,问题是,我是通过再调用一次jRating实现
function setgrade(classid,server,id){
$("."+classid).jRating({ step:true, isDisabled : false, phpPath:'/admin/supplier/saveRating', resetStartWidthID: classid, pid : id, serverResponse:server, onSuccess: function(){ $.get('/admin/supplier/getRating?id='+id,function(data){ console.dir(data); width = parseInt($(".jStar").css('width')); new_width=parseInt(width*parseInt(data)/5); $("."+classid+" .jRatingColor").css('width',new_width); }); } });
}
评分可以使用,但是鼠标移动在评分条上的时候红色并没有出现,在chrome中调试的时候,发现红色DIV的长度是有在变,但是红色缺没有显示出来,锁定到这个DIV的时候,发现这个DIV并不在评分条的区域,而是在它下面40-60PX左右位置,仔细一看,有两组jRating的DIV,在改变第一组DIV中红色背景色width时,红色果断出现了,知道问题出在了哪,解决问题也就不难了,在使用上面那段代码前,先将原先DIV中的jRating组清空empty()。代码很简单就一句话,之后问题确实解决了,但是我还是没明白为什么,所以又copy了错误时候的那段DIV的源代码,进行测试,查看、但是鼠标移到评分条上不会有颜色的变化,jRating其实是分了三个的DIV层来配合显示星星评分条,第一个是星星图片组成DIV,第二个是黄色背景色的DIV ,第三个是红色背景色的DIV,通过DIV背景色的填充星星图片中间部分,达到视觉上的红星星或者黄星星,而做到这个,主要靠最外层overflow:hidden 这个属性以及三个DIV的position:relative 具体代码:
<style > .jRatingAverage { background-color:#f62929; position:relative; top:0; left:0; z-index:2; height:100%; } .jRatingColor { background-color:#f4c239; /* bgcolor of the stars*/ position:relative; top:0; left:0; z-index:2; height:100%; } /** Div containing the stars **/ .jStar { position:relative; left:0; z-index:3; } /** P containing the rate informations **/ p.jRatingInfos { position: absolute; z-index:9999; background: transparent url('/jquery/icons/bg_jRatingInfos.png') no-repeat; color: #FFF; display: none; width: 91px; height: 29px; font-size:16px; text-align:center; padding-top:5px; } p.jRatingInfos span.maxRate { color:#c9c9c9; font-size:14px; } </style> <div class="rating_2 jDisabled" data-average="2" data-id="2" style="height: 20px; width: 115px; z-index: 1; position: relative; cursor: default;"> <div class="jRatingColor" style="width: 50px;"></div> <div class="jRatingAverage" style="width: 22px; top: -20px;"></div> <div class="jStar" style="width: 115px; height: 20px; top: -40px; background-image: url(http://b20121126.tablet.local.freemerce.com:82/assets/images/stars.png); background-position: initial initial; background-repeat: repeat no-repeat;"></div> <div class="jRatingColor" style="width: 92px;"></div> <div class="jRatingAverage" style="width: 42px; top: -20px;"></div> <div class="jStar" style="width: 115px; height: 20px; top: -40px; background-image: url(http://b20121126.tablet.local.freemerce.com:82/assets/images/stars.png); background-position: initial initial; background-repeat: repeat no-repeat;"></div> </div>
这也就是为什么红色背景色的DIVwidth在增长,但是红色星星缺没有出现的原因,下面贴一下我测试时候的代码:
<ul> <li style="height: 40px;list-style-type: none"> <div style="height:120px;position:relative;z-index: 0;height: 20px;overflow: hidden;"> <div style="background-color: red; position:relative;height:20px;z-index: 3;width:40px;top: 0px;left: 0px" ></div> <div style="background-color: yellow;height:20px;position:relative;z-index: 2;width:80px;top: -20px;left: 0px" ></div> <div style="background-color: green;height:20px;position:relative;z-index: 1;width:120px;top: -40px;left: 0px" ></div> <div style="background-color: #7F007F; position:relative;height:20px;z-index: 6;width:40px;top: -50px;left: 0px" ></div> <div style="background-color: #2A00E1;height:20px;position:relative;z-index: 5;width:80px;top: -70px;left: 0px" ></div> <div style="background-color: #A53950;height:20px;position:relative;z-index: 4;width:120px;top: -90px;left: 0px" ></div> </div> </li> </ul>
这是我见过的最没条理,最没技术含量的博文了,好吧,加油~YY