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数据:

/**这里用了CI框架，所以获取POST信息是使用这样的代码*/
$post = $this->input->post ();
$id = $post ['idBox'];
$rate = $post ['rate'];
/**自己的数据库操作或者其他事物处理，巴拉巴拉的.....*/
/**下面就是根据操作成功与否，进行返回信息的设置*/
$aResponse ['error'] = false;
$aResponse ['message'] = 'An error occured during the request. Please retry' + '';
$aResponse ['server'] = '<strong>yes,id:' . $id . 'rate:' . $rate . '</strong>';
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;  115px; z-index: 1; position: relative; cursor: default;">
    <div class="jRatingColor" style=" 50px;"></div>
    <div class="jRatingAverage" style=" 22px; top: -20px;"></div>
    <div class="jStar"
        style=" 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=" 92px;"></div>
    <div class="jRatingAverage" style=" 42px; top: -20px;"></div>
    <div class="jStar"
        style=" 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;40px;top: 0px;left: 0px" ></div>
    <div style="background-color: yellow;height:20px;position:relative;z-index: 2;80px;top: -20px;left: 0px" ></div>
    <div style="background-color: green;height:20px;position:relative;z-index: 1;120px;top: -40px;left: 0px" ></div>
    
    <div style="background-color: #7F007F; position:relative;height:20px;z-index: 6;40px;top: -50px;left: 0px" ></div>
    <div style="background-color: #2A00E1;height:20px;position:relative;z-index: 5;80px;top: -70px;left: 0px" ></div>
    <div style="background-color: #A53950;height:20px;position:relative;z-index: 4;120px;top: -90px;left: 0px" ></div>
</div>
</li>
</ul>

这是我见过的最没条理，最没技术含量的博文了，好吧，加油~YY