jQuery插件-jRating评分插件源码分析及使用方法

该插件被广泛应用于各种需要评分的页面当中，今天作为学习，把源码拿出来分析一下，顺便学习其使用方法。
一、插件使用一览。

<div>
<div>第一个例子</div>
<div id=”16_1″ class=”myRating”></div>
</div>


<link href=”Script/jRating/jRating.jquery.css” rel=”stylesheet” type=”text/css” />
<script src=”Script/jquery-1.7.min.js” type=”text/javascript”></script>
<script src=”Script/jRating/jRating.jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function () {
$(“.myRating”).jRating({
length:10
});
});
</script>

执行效果：

可以看到，上面的例子中，有10颗星，是参数length的作用。其中，默认总分是20分，就是10颗星都选择。这里我们着重注意<div>的id16_1，其中16被用来初始化评分插件默认选择的比例，16/20 * 10。所以我们上面有8颗星是黄色的。
当我们把鼠标放到插件上时，小星星会随着鼠标移动而增加或减少（红色会覆盖黄色或白色），表示评分的从0至20，但点击鼠标时，评分结束，插件不能再编辑了，同时，通过Ajax向指定的路径POST数据，用后台数据将评分数据持久化。
在分析源代码之前，我们先看一下使用该插件时有哪些可选参数：
 
二、插件源码分析
按照jQuery插件开发的推荐方法，为了避免快捷符号“$”与其他JavaScript插件产生冲突，源码开头采用了下面技术：

(function($) {
$.fn.jRating = function(op) {
//这里为插件代码
}
})(jQurery)

接下来，我们分析的所有代码都将出现在上面绿色区域部分，首先设置默认参数。

var defaults = {
/** String vars **/
bigStarsPath : ‘icons/stars.png’, // 设置大星星（默认显示）的相对路径
smallStarsPath : ‘icons/small.png’, // 小星星
phpPath : ‘php/jRating.php’, // 点击鼠标，评分确定后，将POST数据的地址，接下来我们会采用ASP.Net技术进行处理
type : ‘big’, // 可以看出，默认是使用大星星
/** Boolean vars **/
step:false, // 如果设置为True，则星星要么全变色，要么不全变，当然这也适和选择分数是同步的。
isDisabled:false, //如果设置为True，则插件不能编辑，当点击鼠标过后，默认是True的状态