jRating之学习小研究
由于公司项目需要，使用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
