jQuery插件-jRating評(píng)分插件源碼分析及使用方法
更新時(shí)間：2012年12月28日 15:24:11 作者：
該插件被廣泛應(yīng)用于各種需要評(píng)分的頁(yè)面當(dāng)中，今天作為學(xué)習(xí)，把源碼拿出來(lái)分析一下，順便學(xué)習(xí)其使用方法,需要了解的朋友可以研究下
該插件被廣泛應(yīng)用于各種需要評(píng)分的頁(yè)面當(dāng)中，今天作為學(xué)習(xí)，把源碼拿出來(lái)分析一下，順便學(xué)習(xí)其使用方法。
一、插件使用一覽。
<div>
<div>第一個(gè)例子</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>
執(zhí)行效果：
可以看到，上面的例子中，有10顆星，是參數(shù)length的作用。其中，默認(rèn)總分是20分，就是10顆星都選擇。這里我們著重注意<div>的id16_1，其中16被用來(lái)初始化評(píng)分插件默認(rèn)選擇的比例，16/20 * 10。所以我們上面有8顆星是黃色的。
當(dāng)我們把鼠標(biāo)放到插件上時(shí)，小星星會(huì)隨著鼠標(biāo)移動(dòng)而增加或減少（紅色會(huì)覆蓋黃色或白色），表示評(píng)分的從0至20，但點(diǎn)擊鼠標(biāo)時(shí)，評(píng)分結(jié)束，插件不能再編輯了，同時(shí)，通過(guò)Ajax向指定的路徑POST數(shù)據(jù)，用后臺(tái)數(shù)據(jù)將評(píng)分?jǐn)?shù)據(jù)持久化。
在分析源代碼之前，我們先看一下使用該插件時(shí)有哪些可選參數(shù)：
二、插件源碼分析
按照jQuery插件開(kāi)發(fā)的推薦方法，為了避免快捷符號(hào)“$”與其他JavaScript插件產(chǎn)生沖突，源碼開(kāi)頭采用了下面技術(shù)：
(function($) {
$.fn.jRating = function(op) {
//這里為插件代碼
}
})(jQurery)
接下來(lái)，我們分析的所有代碼都將出現(xiàn)在上面綠色區(qū)域部分，首先設(shè)置默認(rèn)參數(shù)。
var defaults = {
/** String vars **/
bigStarsPath : 'icons/stars.png', // 設(shè)置大星星（默認(rèn)顯示）的相對(duì)路徑
smallStarsPath : 'icons/small.png', // 小星星
phpPath : 'php/jRating.php', // 點(diǎn)擊鼠標(biāo)，評(píng)分確定后，將POST數(shù)據(jù)的地址，接下來(lái)我們會(huì)采用ASP.Net技術(shù)進(jìn)行處理
type : 'big', // 可以看出，默認(rèn)是使用大星星
/** Boolean vars **/
step:false, // 如果設(shè)置為T(mén)rue，則星星要么全變色，要么不全變，當(dāng)然這也適和選擇分?jǐn)?shù)是同步的。
isDisabled:false, //如果設(shè)置為T(mén)rue，則插件不能編輯，當(dāng)點(diǎn)擊鼠標(biāo)過(guò)后，默認(rèn)是True的狀態(tài)
showRateInfo: true, //當(dāng)鼠標(biāo)放到星星上時(shí)，是否在鼠標(biāo)下方顯示選擇比例信息，例如16/20
/** Integer vars **/
length:5, // 星星的個(gè)數(shù)
decimalLength : 0, // 選擇的數(shù)字其后的小數(shù)位，最多為3位，如果設(shè)置為1，可能出現(xiàn)的情況為16.3/20
rateMax : 20, // 比例中的分母，整數(shù)0-9999
rateInfosX : -45, // 信息提示框相對(duì)于鼠標(biāo)位置的橫坐標(biāo)位置
rateInfosY : 5, // 同上，縱坐標(biāo)位置
/** Functions **/
onSuccess : null, //成功后的回調(diào)函數(shù)
onError : null //出錯(cuò)處理函數(shù)
};
通過(guò)上面綠色部分的解釋?zhuān)覀兛梢钥吹剿袇?shù)的默認(rèn)值，同時(shí)，我們可以在插件使用中，根據(jù)需求確定適合的配置，插件的使用不就是這些參數(shù)的搭配組合嗎？
接下來(lái)我們?cè)倏匆粋€(gè)函數(shù)作用域：
if(this.length>0)
return this.each(function() { //接下來(lái)出現(xiàn)的代碼，都將在此處?。?！}
這段代碼很簡(jiǎn)單，我們要在選中的集合上執(zhí)行jRating()函數(shù)，而上面的代碼首先判斷該集合是否長(zhǎng)度大于0，如果為1或者更多，則在該集合上執(zhí)行each()函數(shù)，對(duì)集合中的每一個(gè)元素（div）進(jìn)行單獨(dú)處理。
該插件的核心代碼其實(shí)都在上面的each()函數(shù)中，我們首先看幾個(gè)函數(shù)，這幾個(gè)函數(shù)都定義在each()函數(shù)中，并被其他語(yǔ)句調(diào)用。
function findRealLeft(obj) {
if( !obj ) return 0;
return obj.offsetLeft + findRealLeft( obj.offsetParent );
};
首先關(guān)注findRealLeft()函數(shù)，該函數(shù)接收名為obj的對(duì)象參數(shù)，最后返回該元素對(duì)象相對(duì)于瀏覽器左邊界的距離。注：offsetParent是指元素最近的定位（relative,absolute）祖先元素，如果沒(méi)有祖先元素是定位的話，會(huì)指向body元素。offsetLeft返回相對(duì)于offsetParent的位置。
function getNote(relativeX) {
var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); //兩個(gè)100是否可以去掉，表示選擇的比例，如16 或 16.1
switch(opts.decimalLength) { //根據(jù)參數(shù)確定要輸去比例需要的小數(shù)位，例如16.1 16.12 16.123
case 1 :
var note = Math.round(noteBrut*10)/10;
break;
case 2 :
var note = Math.round(noteBrut*100)/100;
break;
case 3 :
var note = Math.round(noteBrut*1000)/1000;
break;
default :
var note = Math.round(noteBrut*1)/1;
}
return note;
};
接著關(guān)注getNote函數(shù)，首先我們看以下relativeX是一個(gè)什么東西：
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
上面兩行代碼是調(diào)用getNote函數(shù)前，定義relativeX變量用的，我們可以分析出relativeX的作用。這里的this是我們應(yīng)用jRating()函數(shù)的某個(gè)div，首先獲得其相對(duì)于瀏覽器的左邊距，因?yàn)樯厦鎯尚写a是出現(xiàn)在鼠標(biāo)移動(dòng)處理函數(shù)mouseenter中（稍后我們會(huì)看到），因此這里的e.pageX表示鼠標(biāo)相對(duì)于瀏覽器的橫向距離。因此，這里的relativeX表示的是鼠標(biāo)相對(duì)于<div>左邊界的橫向距離。
我們?cè)俅侮P(guān)注getNote函數(shù)，由widthRatingContainer = starWidth*opts.length可以看出，widthRatingContainer是左右星星圖片加起來(lái)的寬度。因此，var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);可以把分母與分子上的兩個(gè)100去掉，即(relativeX/widthRatingContainer)*opts.rateMax)，noteBrut變量最后存儲(chǔ)的是鼠標(biāo)選擇的比例，如果rateMax設(shè)為20，則noteBrut的范圍可以通過(guò)鼠標(biāo)來(lái)確定（0—20）。
switch函數(shù)，是通過(guò)decimalLength參數(shù)（用來(lái)設(shè)定顯示比例的小數(shù)位），最終確定（比例）顯示的位數(shù)。讀到這里，我們可以發(fā)現(xiàn)，getNote函數(shù)就是通過(guò)relativX來(lái)返回鼠標(biāo)選擇的比例，這個(gè)比例是什么，見(jiàn)下圖用筆刷框起來(lái)的部分：
接下來(lái)，我們?cè)訇P(guān)注一個(gè)函數(shù)：
function getStarWidth(){
switch(opts.type) {
case 'small' :
starWidth = 12; // small.png小星星圖片的寬度
starHeight = 10; // 高度
bgPath = opts.smallStarsPath; //圖片相對(duì)地址
break;
default :
starWidth = 23; // 大星星的寬度，可以看到，這是默認(rèn)值
starHeight = 20; // 高度
bgPath = opts.bigStarsPath; //星圖片相對(duì)地址
}
};
這個(gè)是一個(gè)比較簡(jiǎn)單的用于初始化變量的函數(shù)，根據(jù)type屬性，初始化三個(gè)變量，分別是starWidth、starHeight、bgPath，綠色的注釋信息已能夠說(shuō)明一切，不再贅述！
each()中定義的函數(shù)看完了，接下來(lái)，我們還在each()函數(shù)中進(jìn)行游蕩，按照從上到下的順序，先截取了幾行代碼如下：
var opts = $.extend(defaults, op), //利用extend（）函數(shù)將默認(rèn)參數(shù)與輸入?yún)?shù)進(jìn)行合并，最后存儲(chǔ)在opts變量中。
newWidth = 0, //定義變量，該變量用于存儲(chǔ)relativeX,但會(huì)根據(jù)step屬性進(jìn)行相應(yīng)調(diào)整
starWidth = 0, //定義變量，星星的寬度
starHeight = 0, //高度
bgPath = ''; //星星圖片地址
if($(this).hasClass('jDisabled') || opts.isDisabled) //確定jDisabled變量，表示是否能對(duì)div進(jìn)行操作
var jDisabled = true;
else
var jDisabled = false;
getStarWidth(); //這個(gè)函數(shù)不贅述，上面分析過(guò)
$(this).height(starHeight); //根據(jù)星星的高度，確定此div的高度。
接著往下看：
var average = parseFloat($(this).attr('id').split('_')[0]), //通過(guò)<div>的id（例如16_2），獲取下劃線前面的數(shù)字，把該數(shù)字作為默認(rèn)的選擇比例
idBox = parseInt($(this).attr('id').split('_')[1]), // 下劃線后面的部分，作為辨別評(píng)分插件的id
widthRatingContainer = starWidth*opts.length, // 星星圖片寬度總和，并作為外圍容器的寬度
widthColor = average/opts.rateMax*widthRatingContainer, // 顏色塊占用的寬度
接下來(lái)，我們將看到新建的三個(gè)<div>，并插入到主div中
quotient =
$('<div>',
{
'class' : 'jRatingColor',
css:{
width:widthColor
}
}).appendTo($(this)),
average =
$('<div>',
{
'class' : 'jRatingAverage',
css:{
width:0,
top:- starHeight
}
}).appendTo($(this)),
jstar =
$('<div>',
{
'class' : 'jStar',
css:{
width:widthRatingContainer,
height:starHeight,
top:- (starHeight*2),
background: 'url('+bgPath+') repeat-x'
}
}).appendTo($(this));
首先我們分析第一個(gè)<div>，它的類(lèi)名為jRatingColor，它表示默認(rèn)比例，用黃色表示，它的長(zhǎng)度為withColor,這里主要看一下它的樣式表：
.jRatingColor {
background-color:#f4c239; /* bgcolor of the stars*/
position:relative; //相對(duì)定位
top:0;
left:0;
z-index:2; //這里需注意，該div的祖先即我們each函數(shù)中的this 的z-index是1，下面我們將馬上看到。
height:100%;
}
第二個(gè)<div>樣式表如下：
.jRatingAverage {
background-color:#f62929; //紅色
position:relative;
top:0;
left:0;
z-index:2;
height:100%;
}
但在上面的程序中，初始化時(shí)，把寬度設(shè)為0（因?yàn)槭髽?biāo)還沒(méi)選嘛），同時(shí)改變了top值：- 星高度，這樣它就和上面添加的div在縱方向上重合了。
接下來(lái)看第三個(gè)<div>,主要用來(lái)放小星星。
/** Div containing the stars **/
.jStar {
position:relative;
left:0;
z-index:3;
}
這個(gè)樣式表比較簡(jiǎn)單，我們著重看一下JS中動(dòng)態(tài)添加的幾個(gè)屬性值：
width:widthRatingContainer, //設(shè)置寬度
height:starHeight, //高度
top:- (starHeight*2), //改變縱方向的值，和上面兩個(gè)<div>重合
background: 'url('+bgPath+') repeat-x' //設(shè)置背景為小星星
屬性的值設(shè)置了，但也許有人會(huì)問(wèn)，問(wèn)什么只看到小星星顏色是彩色的，而上面添加的前兩個(gè)<div>不是具有高度的長(zhǎng)方形顏色條嗎？下面我們看一下小星星的圖片就明白為什么了！
不用多說(shuō)，旁邊用不透明的背景，中間小星星是透明的，下面的顏色自然就顯示出來(lái)了?。?
接下來(lái)的語(yǔ)句很簡(jiǎn)單，就是設(shè)置一下最外層div容器的樣式，注意z-Index屬性:
$(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
接下來(lái)會(huì)進(jìn)入相對(duì)復(fù)雜的部分，我們將關(guān)注鼠標(biāo)動(dòng)作及其響應(yīng)效果，首先關(guān)注一個(gè)小邏輯：
if(!jDisabled)
//接下來(lái)的代碼
可以看出，前面我們?cè)O(shè)置的jDisable變量在這里用上了，如果jDisabled為true，就表示插件禁用了，那么接下來(lái)的鼠標(biāo)操作將不會(huì)被執(zhí)行。
接下來(lái)看鼠標(biāo)操作是如何添加到插件中的：
$(this).unbind().bind({//鼠標(biāo)事件處理代碼，下面將分別進(jìn)行討論。
}）;
首先看以一下鼠標(biāo)進(jìn)入事件處理代碼：
mouseenter : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft; //首先計(jì)算出relativeX，它表示的是鼠標(biāo)相對(duì)于外層<div>左邊界的橫向距離
if (opts.showRateInfo)
var tooltip =
$('<p>',{
'class' : 'jRatingInfos',
html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>', //注意這里用了getNote方法，前面已講了它的用途。
css : {
top: (e.pageY + opts.rateInfosY),
left: (e.pageX + opts.rateInfosX)
}
}).appendTo('body').show();
},
relativeX變量不多解釋?zhuān)@里的注釋和前面都有提到，接下來(lái)，判斷showRateInfo參數(shù)是否為true,如果為true，表示要顯示比例信息（例如鼠標(biāo)下面顯示16/20），tooltip變量就是這個(gè)信息框，最后通過(guò)appendTo方法添加到body中。代碼邏輯很簡(jiǎn)單，這個(gè)函數(shù)主要用來(lái)顯示提示框<p>，我們?cè)谶@里可以重點(diǎn)關(guān)注一下<p>節(jié)點(diǎn)的樣式，它是絕對(duì)定位的，并利用代碼改變了top和Left值，看一下相關(guān)的樣式表：
p.jRatingInfos {
position: absolute;
z-index:9999;
background: transparent url('http://www.cnblogs.com/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;
}
接下來(lái)我們看一下鼠標(biāo)進(jìn)來(lái)后的mousemove事件的處理函數(shù)：
mousemove : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
else newWidth = relativeX;
average.width(newWidth);
if (opts.showRateInfo)
$("p.jRatingInfos")
.css({
left: (e.pageX + opts.rateInfosX)
})
.html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
},
這個(gè)函數(shù)主要用來(lái)確定鼠標(biāo)選擇的比例，當(dāng)然這個(gè)比例是通過(guò)getNote(newWidth)來(lái)得到的，那么，確定合適的newWidth值就成了這個(gè)函數(shù)的核心，如果opts.step為true，即比例只能是整數(shù)個(gè)星星（不能為15.3等等），那么我們看一下這個(gè)邏輯：Math.floor(relativeX/starWidth)，starWidth是星星圖片的寬度，Math.floor(-0.1)=-1，Math.floor(0.1) = 0，Math.floor(2.6)=2，知道這些，上面加紅的代碼就很容易理解了。
OK，Let's go on，看一下三個(gè)簡(jiǎn)單的處理函數(shù)
mouseover : function(e){
$(this).css('cursor','pointer');
},
mouseout : function(){
$(this).css('cursor','default');
average.width(0);
},
mouseleave: function () {
$("p.jRatingInfos").remove();
},
mouseover函數(shù)確保鼠標(biāo)進(jìn)入插件后的顯示樣式，mouseout也是同樣，但它將類(lèi)名為average的div（紅色的）寬度變成0，mouseleave函數(shù)讓提示信息框消失。
最后一個(gè)函數(shù)，也是整個(gè)源碼的結(jié)尾，當(dāng)然也是最重要最復(fù)雜的——鼠標(biāo)點(diǎn)擊函數(shù)：
click : function(e){
//接下來(lái)的代碼都在此處。
}
我們分部來(lái)，先看第一部分：
$(this).unbind().css('cursor','default').addClass('jDisabled');
為什么這里只列出一條語(yǔ)句，因?yàn)樗苤匾埠芎?jiǎn)單，我們這里一定要關(guān)注unbind()函數(shù)，它非常非常重要，當(dāng)點(diǎn)擊鼠標(biāo)后，首先把其他所有綁定到外圍<div>的事件都去掉了，這樣就鼠標(biāo)點(diǎn)擊的瞬間，該插件的外觀就固定顯示在瀏覽器中，不再隨著鼠標(biāo)事件而出現(xiàn)變化。當(dāng)然，最后給<div>添加jDisabled屬性。
我們接著往后走：
if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
e.preventDefault();
var rate = getNote(newWidth); //關(guān)注rate變量，后面要用到。
average.width(newWidth);
第一句不難理解，刪除提示信息框，第二句取消鼠標(biāo)點(diǎn)擊的默認(rèn)操作，后面兩句很簡(jiǎn)單，不再贅述，要知道newWidth在前面已提到，表示鼠標(biāo)選擇的寬度。
最后一條語(yǔ)句，把選擇的比例發(fā)送到服務(wù)器端進(jìn)行持久化操作：
$.post(
opts.phpPath, //利用Ajax技術(shù)，向服務(wù)端發(fā)送數(shù)據(jù)的地址
{ //Post過(guò)去的數(shù)據(jù)
idBox : idBox,
rate : rate,
action : 'rating'
},
function(data) { //回調(diào)函數(shù)，主要向插件自定義函數(shù)傳遞參數(shù)并執(zhí)行。
if(!data.error)
{
if(opts.onSuccess) opts.onSuccess( element, rate );
}
else
{
if(opts.onError) opts.onError( element, rate );
}
},
'json' //確定如何理解返回的數(shù)據(jù)，它采用json.
);
利用jQuery做Ajax確實(shí)很簡(jiǎn)單，代碼中做了必要注釋?zhuān)@里不再贅述，這個(gè)插件的源碼就分析完了，比較粗，但整個(gè)邏輯也許體現(xiàn)了一些，希望該學(xué)習(xí)筆記對(duì)大家能有幫助。下面我們進(jìn)入實(shí)戰(zhàn)階段。
三、實(shí)戰(zhàn)jRating插件
為了更加逼近真實(shí)應(yīng)用，我們先利用sql server建立一張數(shù)據(jù)庫(kù)表，它是一個(gè)文章類(lèi)型表，有id、標(biāo)題、文章內(nèi)容、評(píng)分四個(gè)字段，截圖如下：
評(píng)分字段默認(rèn)為-1，表示該文章還沒(méi)有被評(píng)分。當(dāng)然，現(xiàn)在有人會(huì)說(shuō)，這個(gè)表設(shè)計(jì)的很不合理，因?yàn)橐黄恼虏粫?huì)只評(píng)分一次吧，應(yīng)該每個(gè)用戶(hù)都能進(jìn)行評(píng)論，是的，我們?cè)谶@里只是為了演示jRating插件利用Ajax進(jìn)行持久化操作，因?yàn)槭茄菔?，所以一切從儉。
新建一個(gè)Web頁(yè)面，用來(lái)顯示第一篇文章（id為1）的標(biāo)題、內(nèi)容及評(píng)分插件，見(jiàn)前臺(tái)代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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 () {
$(".theRating").jRating({
length: 20,
phpPath: 'tempAjax.aspx/UpdateComment' //地址變成了一個(gè)aspx類(lèi)型的WEB頁(yè)面下的一個(gè)靜態(tài)函數(shù)，稍后我們會(huì)看到！
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="標(biāo)題："></asp:Label>
<asp:Label ID="page1_title" runat="server" Text=""></asp:Label><br />
<asp:Label ID="page1_body" runat="server" Text=""></asp:Label><br />
<div id="16_1" class="theRating"></div>
</div>
</form>
</body>
</html>
后臺(tái)CS代碼如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
tempEntities cbx = new tempEntities(); //用了實(shí)體框架獲取數(shù)據(jù)表
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1_title.Text = page1.title;
page1_body.Text = page1.body;
}
}
為了減少數(shù)據(jù)庫(kù)連接代碼，我用了實(shí)體框架，只映射了一張表（jRatingArticle），就是上面我們看到的。獲取id為1的文章對(duì)象，并把相應(yīng)屬性賦值到Label控件的Text屬性中。
頁(yè)面效果如下：
我們可以看到上面前臺(tái)頁(yè)面的JS代碼中，有這樣一條語(yǔ)句：
phpPath: 'tempAjax.aspx/UpdateComment'
它指明了，當(dāng)鼠標(biāo)點(diǎn)擊插件后，要通過(guò)Ajax發(fā)送數(shù)據(jù)的地址，這里我們用.net頁(yè)面技術(shù)來(lái)處理這個(gè)異步請(qǐng)求。tempAjax.aspx的后臺(tái)cs代碼如下：
[WebMethod()]
public static void UpdateComment(int idBox, int rate)
{
tempEntities cbx = new tempEntities();
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1.is_comment = rate;
cbx.SaveChanges();
}
此時(shí)，我們還需修改jRating插件的原文件，把鼠標(biāo)單擊(click)處理函數(shù)中的$.post函數(shù)替換如下：
$.ajax({
type: "POST",
url: opts.phpPath,
data: '{"idBox":"' + idBox + '","rate":"' + rate + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
為什么要改變?cè)次募?，因?yàn)槲蚁敫淖傾jax請(qǐng)求的contentType屬性，利用json格式發(fā)送請(qǐng)求數(shù)據(jù)，默認(rèn)是application/x-www-form-urlencoded
OK，萬(wàn)事俱備，看一下執(zhí)行效果（選擇比例為16,16顆紅星嘛）：
看看數(shù)據(jù)庫(kù)的變化：
試驗(yàn)成功！今天學(xué)習(xí)就到這里，希望此篇學(xué)習(xí)筆記對(duì)大家能有所幫助！
一、插件使用一覽。
復(fù)制代碼 代碼如下:
<div>
<div>第一個(gè)例子</div>
<div id="16_1" class="myRating"></div>
</div>
復(fù)制代碼 代碼如下:
<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>
執(zhí)行效果：
可以看到，上面的例子中，有10顆星，是參數(shù)length的作用。其中，默認(rèn)總分是20分，就是10顆星都選擇。這里我們著重注意<div>的id16_1，其中16被用來(lái)初始化評(píng)分插件默認(rèn)選擇的比例，16/20 * 10。所以我們上面有8顆星是黃色的。
當(dāng)我們把鼠標(biāo)放到插件上時(shí)，小星星會(huì)隨著鼠標(biāo)移動(dòng)而增加或減少（紅色會(huì)覆蓋黃色或白色），表示評(píng)分的從0至20，但點(diǎn)擊鼠標(biāo)時(shí)，評(píng)分結(jié)束，插件不能再編輯了，同時(shí)，通過(guò)Ajax向指定的路徑POST數(shù)據(jù)，用后臺(tái)數(shù)據(jù)將評(píng)分?jǐn)?shù)據(jù)持久化。
在分析源代碼之前，我們先看一下使用該插件時(shí)有哪些可選參數(shù)：
二、插件源碼分析
按照jQuery插件開(kāi)發(fā)的推薦方法，為了避免快捷符號(hào)“$”與其他JavaScript插件產(chǎn)生沖突，源碼開(kāi)頭采用了下面技術(shù)：
復(fù)制代碼 代碼如下:
(function($) {
$.fn.jRating = function(op) {
//這里為插件代碼
}
})(jQurery)
接下來(lái)，我們分析的所有代碼都將出現(xiàn)在上面綠色區(qū)域部分，首先設(shè)置默認(rèn)參數(shù)。
復(fù)制代碼 代碼如下:
var defaults = {
/** String vars **/
bigStarsPath : 'icons/stars.png', // 設(shè)置大星星（默認(rèn)顯示）的相對(duì)路徑
smallStarsPath : 'icons/small.png', // 小星星
phpPath : 'php/jRating.php', // 點(diǎn)擊鼠標(biāo)，評(píng)分確定后，將POST數(shù)據(jù)的地址，接下來(lái)我們會(huì)采用ASP.Net技術(shù)進(jìn)行處理
type : 'big', // 可以看出，默認(rèn)是使用大星星
/** Boolean vars **/
step:false, // 如果設(shè)置為T(mén)rue，則星星要么全變色，要么不全變，當(dāng)然這也適和選擇分?jǐn)?shù)是同步的。
isDisabled:false, //如果設(shè)置為T(mén)rue，則插件不能編輯，當(dāng)點(diǎn)擊鼠標(biāo)過(guò)后，默認(rèn)是True的狀態(tài)
showRateInfo: true, //當(dāng)鼠標(biāo)放到星星上時(shí)，是否在鼠標(biāo)下方顯示選擇比例信息，例如16/20
/** Integer vars **/
length:5, // 星星的個(gè)數(shù)
decimalLength : 0, // 選擇的數(shù)字其后的小數(shù)位，最多為3位，如果設(shè)置為1，可能出現(xiàn)的情況為16.3/20
rateMax : 20, // 比例中的分母，整數(shù)0-9999
rateInfosX : -45, // 信息提示框相對(duì)于鼠標(biāo)位置的橫坐標(biāo)位置
rateInfosY : 5, // 同上，縱坐標(biāo)位置
/** Functions **/
onSuccess : null, //成功后的回調(diào)函數(shù)
onError : null //出錯(cuò)處理函數(shù)
};
通過(guò)上面綠色部分的解釋?zhuān)覀兛梢钥吹剿袇?shù)的默認(rèn)值，同時(shí)，我們可以在插件使用中，根據(jù)需求確定適合的配置，插件的使用不就是這些參數(shù)的搭配組合嗎？
接下來(lái)我們?cè)倏匆粋€(gè)函數(shù)作用域：
復(fù)制代碼 代碼如下:
if(this.length>0)
return this.each(function() { //接下來(lái)出現(xiàn)的代碼，都將在此處?。?！}
這段代碼很簡(jiǎn)單，我們要在選中的集合上執(zhí)行jRating()函數(shù)，而上面的代碼首先判斷該集合是否長(zhǎng)度大于0，如果為1或者更多，則在該集合上執(zhí)行each()函數(shù)，對(duì)集合中的每一個(gè)元素（div）進(jìn)行單獨(dú)處理。
該插件的核心代碼其實(shí)都在上面的each()函數(shù)中，我們首先看幾個(gè)函數(shù)，這幾個(gè)函數(shù)都定義在each()函數(shù)中，并被其他語(yǔ)句調(diào)用。
復(fù)制代碼 代碼如下:
function findRealLeft(obj) {
if( !obj ) return 0;
return obj.offsetLeft + findRealLeft( obj.offsetParent );
};
首先關(guān)注findRealLeft()函數(shù)，該函數(shù)接收名為obj的對(duì)象參數(shù)，最后返回該元素對(duì)象相對(duì)于瀏覽器左邊界的距離。注：offsetParent是指元素最近的定位（relative,absolute）祖先元素，如果沒(méi)有祖先元素是定位的話，會(huì)指向body元素。offsetLeft返回相對(duì)于offsetParent的位置。
復(fù)制代碼 代碼如下:
function getNote(relativeX) {
var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); //兩個(gè)100是否可以去掉，表示選擇的比例，如16 或 16.1
switch(opts.decimalLength) { //根據(jù)參數(shù)確定要輸去比例需要的小數(shù)位，例如16.1 16.12 16.123
case 1 :
var note = Math.round(noteBrut*10)/10;
break;
case 2 :
var note = Math.round(noteBrut*100)/100;
break;
case 3 :
var note = Math.round(noteBrut*1000)/1000;
break;
default :
var note = Math.round(noteBrut*1)/1;
}
return note;
};
接著關(guān)注getNote函數(shù)，首先我們看以下relativeX是一個(gè)什么東西：
復(fù)制代碼 代碼如下:
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
上面兩行代碼是調(diào)用getNote函數(shù)前，定義relativeX變量用的，我們可以分析出relativeX的作用。這里的this是我們應(yīng)用jRating()函數(shù)的某個(gè)div，首先獲得其相對(duì)于瀏覽器的左邊距，因?yàn)樯厦鎯尚写a是出現(xiàn)在鼠標(biāo)移動(dòng)處理函數(shù)mouseenter中（稍后我們會(huì)看到），因此這里的e.pageX表示鼠標(biāo)相對(duì)于瀏覽器的橫向距離。因此，這里的relativeX表示的是鼠標(biāo)相對(duì)于<div>左邊界的橫向距離。
我們?cè)俅侮P(guān)注getNote函數(shù)，由widthRatingContainer = starWidth*opts.length可以看出，widthRatingContainer是左右星星圖片加起來(lái)的寬度。因此，var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);可以把分母與分子上的兩個(gè)100去掉，即(relativeX/widthRatingContainer)*opts.rateMax)，noteBrut變量最后存儲(chǔ)的是鼠標(biāo)選擇的比例，如果rateMax設(shè)為20，則noteBrut的范圍可以通過(guò)鼠標(biāo)來(lái)確定（0—20）。
switch函數(shù)，是通過(guò)decimalLength參數(shù)（用來(lái)設(shè)定顯示比例的小數(shù)位），最終確定（比例）顯示的位數(shù)。讀到這里，我們可以發(fā)現(xiàn)，getNote函數(shù)就是通過(guò)relativX來(lái)返回鼠標(biāo)選擇的比例，這個(gè)比例是什么，見(jiàn)下圖用筆刷框起來(lái)的部分：
接下來(lái)，我們?cè)訇P(guān)注一個(gè)函數(shù)：
復(fù)制代碼 代碼如下:
function getStarWidth(){
switch(opts.type) {
case 'small' :
starWidth = 12; // small.png小星星圖片的寬度
starHeight = 10; // 高度
bgPath = opts.smallStarsPath; //圖片相對(duì)地址
break;
default :
starWidth = 23; // 大星星的寬度，可以看到，這是默認(rèn)值
starHeight = 20; // 高度
bgPath = opts.bigStarsPath; //星圖片相對(duì)地址
}
};
這個(gè)是一個(gè)比較簡(jiǎn)單的用于初始化變量的函數(shù)，根據(jù)type屬性，初始化三個(gè)變量，分別是starWidth、starHeight、bgPath，綠色的注釋信息已能夠說(shuō)明一切，不再贅述！
each()中定義的函數(shù)看完了，接下來(lái)，我們還在each()函數(shù)中進(jìn)行游蕩，按照從上到下的順序，先截取了幾行代碼如下：
復(fù)制代碼 代碼如下:
var opts = $.extend(defaults, op), //利用extend（）函數(shù)將默認(rèn)參數(shù)與輸入?yún)?shù)進(jìn)行合并，最后存儲(chǔ)在opts變量中。
newWidth = 0, //定義變量，該變量用于存儲(chǔ)relativeX,但會(huì)根據(jù)step屬性進(jìn)行相應(yīng)調(diào)整
starWidth = 0, //定義變量，星星的寬度
starHeight = 0, //高度
bgPath = ''; //星星圖片地址
if($(this).hasClass('jDisabled') || opts.isDisabled) //確定jDisabled變量，表示是否能對(duì)div進(jìn)行操作
var jDisabled = true;
else
var jDisabled = false;
getStarWidth(); //這個(gè)函數(shù)不贅述，上面分析過(guò)
$(this).height(starHeight); //根據(jù)星星的高度，確定此div的高度。
接著往下看：
復(fù)制代碼 代碼如下:
var average = parseFloat($(this).attr('id').split('_')[0]), //通過(guò)<div>的id（例如16_2），獲取下劃線前面的數(shù)字，把該數(shù)字作為默認(rèn)的選擇比例
idBox = parseInt($(this).attr('id').split('_')[1]), // 下劃線后面的部分，作為辨別評(píng)分插件的id
widthRatingContainer = starWidth*opts.length, // 星星圖片寬度總和，并作為外圍容器的寬度
widthColor = average/opts.rateMax*widthRatingContainer, // 顏色塊占用的寬度
接下來(lái)，我們將看到新建的三個(gè)<div>，并插入到主div中
復(fù)制代碼 代碼如下:
quotient =
$('<div>',
{
'class' : 'jRatingColor',
css:{
width:widthColor
}
}).appendTo($(this)),
average =
$('<div>',
{
'class' : 'jRatingAverage',
css:{
width:0,
top:- starHeight
}
}).appendTo($(this)),
jstar =
$('<div>',
{
'class' : 'jStar',
css:{
width:widthRatingContainer,
height:starHeight,
top:- (starHeight*2),
background: 'url('+bgPath+') repeat-x'
}
}).appendTo($(this));
首先我們分析第一個(gè)<div>，它的類(lèi)名為jRatingColor，它表示默認(rèn)比例，用黃色表示，它的長(zhǎng)度為withColor,這里主要看一下它的樣式表：
復(fù)制代碼 代碼如下:
.jRatingColor {
background-color:#f4c239; /* bgcolor of the stars*/
position:relative; //相對(duì)定位
top:0;
left:0;
z-index:2; //這里需注意，該div的祖先即我們each函數(shù)中的this 的z-index是1，下面我們將馬上看到。
height:100%;
}
第二個(gè)<div>樣式表如下：
復(fù)制代碼 代碼如下:
.jRatingAverage {
background-color:#f62929; //紅色
position:relative;
top:0;
left:0;
z-index:2;
height:100%;
}
但在上面的程序中，初始化時(shí)，把寬度設(shè)為0（因?yàn)槭髽?biāo)還沒(méi)選嘛），同時(shí)改變了top值：- 星高度，這樣它就和上面添加的div在縱方向上重合了。
接下來(lái)看第三個(gè)<div>,主要用來(lái)放小星星。
復(fù)制代碼 代碼如下:
/** Div containing the stars **/
.jStar {
position:relative;
left:0;
z-index:3;
}
這個(gè)樣式表比較簡(jiǎn)單，我們著重看一下JS中動(dòng)態(tài)添加的幾個(gè)屬性值：
復(fù)制代碼 代碼如下:
width:widthRatingContainer, //設(shè)置寬度
height:starHeight, //高度
top:- (starHeight*2), //改變縱方向的值，和上面兩個(gè)<div>重合
background: 'url('+bgPath+') repeat-x' //設(shè)置背景為小星星
屬性的值設(shè)置了，但也許有人會(huì)問(wèn)，問(wèn)什么只看到小星星顏色是彩色的，而上面添加的前兩個(gè)<div>不是具有高度的長(zhǎng)方形顏色條嗎？下面我們看一下小星星的圖片就明白為什么了！
不用多說(shuō)，旁邊用不透明的背景，中間小星星是透明的，下面的顏色自然就顯示出來(lái)了?。?
接下來(lái)的語(yǔ)句很簡(jiǎn)單，就是設(shè)置一下最外層div容器的樣式，注意z-Index屬性:
復(fù)制代碼 代碼如下:
$(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
接下來(lái)會(huì)進(jìn)入相對(duì)復(fù)雜的部分，我們將關(guān)注鼠標(biāo)動(dòng)作及其響應(yīng)效果，首先關(guān)注一個(gè)小邏輯：
if(!jDisabled)
//接下來(lái)的代碼
可以看出，前面我們?cè)O(shè)置的jDisable變量在這里用上了，如果jDisabled為true，就表示插件禁用了，那么接下來(lái)的鼠標(biāo)操作將不會(huì)被執(zhí)行。
接下來(lái)看鼠標(biāo)操作是如何添加到插件中的：
$(this).unbind().bind({//鼠標(biāo)事件處理代碼，下面將分別進(jìn)行討論。
}）;
首先看以一下鼠標(biāo)進(jìn)入事件處理代碼：
復(fù)制代碼 代碼如下:
mouseenter : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft; //首先計(jì)算出relativeX，它表示的是鼠標(biāo)相對(duì)于外層<div>左邊界的橫向距離
if (opts.showRateInfo)
var tooltip =
$('<p>',{
'class' : 'jRatingInfos',
html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>', //注意這里用了getNote方法，前面已講了它的用途。
css : {
top: (e.pageY + opts.rateInfosY),
left: (e.pageX + opts.rateInfosX)
}
}).appendTo('body').show();
},
relativeX變量不多解釋?zhuān)@里的注釋和前面都有提到，接下來(lái)，判斷showRateInfo參數(shù)是否為true,如果為true，表示要顯示比例信息（例如鼠標(biāo)下面顯示16/20），tooltip變量就是這個(gè)信息框，最后通過(guò)appendTo方法添加到body中。代碼邏輯很簡(jiǎn)單，這個(gè)函數(shù)主要用來(lái)顯示提示框<p>，我們?cè)谶@里可以重點(diǎn)關(guān)注一下<p>節(jié)點(diǎn)的樣式，它是絕對(duì)定位的，并利用代碼改變了top和Left值，看一下相關(guān)的樣式表：
復(fù)制代碼 代碼如下:
p.jRatingInfos {
position: absolute;
z-index:9999;
background: transparent url('http://www.cnblogs.com/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;
}
接下來(lái)我們看一下鼠標(biāo)進(jìn)來(lái)后的mousemove事件的處理函數(shù)：
復(fù)制代碼 代碼如下:
mousemove : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
else newWidth = relativeX;
average.width(newWidth);
if (opts.showRateInfo)
$("p.jRatingInfos")
.css({
left: (e.pageX + opts.rateInfosX)
})
.html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
},
這個(gè)函數(shù)主要用來(lái)確定鼠標(biāo)選擇的比例，當(dāng)然這個(gè)比例是通過(guò)getNote(newWidth)來(lái)得到的，那么，確定合適的newWidth值就成了這個(gè)函數(shù)的核心，如果opts.step為true，即比例只能是整數(shù)個(gè)星星（不能為15.3等等），那么我們看一下這個(gè)邏輯：Math.floor(relativeX/starWidth)，starWidth是星星圖片的寬度，Math.floor(-0.1)=-1，Math.floor(0.1) = 0，Math.floor(2.6)=2，知道這些，上面加紅的代碼就很容易理解了。
OK，Let's go on，看一下三個(gè)簡(jiǎn)單的處理函數(shù)
復(fù)制代碼 代碼如下:
mouseover : function(e){
$(this).css('cursor','pointer');
},
mouseout : function(){
$(this).css('cursor','default');
average.width(0);
},
mouseleave: function () {
$("p.jRatingInfos").remove();
},
mouseover函數(shù)確保鼠標(biāo)進(jìn)入插件后的顯示樣式，mouseout也是同樣，但它將類(lèi)名為average的div（紅色的）寬度變成0，mouseleave函數(shù)讓提示信息框消失。
最后一個(gè)函數(shù)，也是整個(gè)源碼的結(jié)尾，當(dāng)然也是最重要最復(fù)雜的——鼠標(biāo)點(diǎn)擊函數(shù)：
復(fù)制代碼 代碼如下:
click : function(e){
//接下來(lái)的代碼都在此處。
}
我們分部來(lái)，先看第一部分：
復(fù)制代碼 代碼如下:
$(this).unbind().css('cursor','default').addClass('jDisabled');
為什么這里只列出一條語(yǔ)句，因?yàn)樗苤匾埠芎?jiǎn)單，我們這里一定要關(guān)注unbind()函數(shù)，它非常非常重要，當(dāng)點(diǎn)擊鼠標(biāo)后，首先把其他所有綁定到外圍<div>的事件都去掉了，這樣就鼠標(biāo)點(diǎn)擊的瞬間，該插件的外觀就固定顯示在瀏覽器中，不再隨著鼠標(biāo)事件而出現(xiàn)變化。當(dāng)然，最后給<div>添加jDisabled屬性。
我們接著往后走：
復(fù)制代碼 代碼如下:
if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
e.preventDefault();
var rate = getNote(newWidth); //關(guān)注rate變量，后面要用到。
average.width(newWidth);
第一句不難理解，刪除提示信息框，第二句取消鼠標(biāo)點(diǎn)擊的默認(rèn)操作，后面兩句很簡(jiǎn)單，不再贅述，要知道newWidth在前面已提到，表示鼠標(biāo)選擇的寬度。
最后一條語(yǔ)句，把選擇的比例發(fā)送到服務(wù)器端進(jìn)行持久化操作：
復(fù)制代碼 代碼如下:
$.post(
opts.phpPath, //利用Ajax技術(shù)，向服務(wù)端發(fā)送數(shù)據(jù)的地址
{ //Post過(guò)去的數(shù)據(jù)
idBox : idBox,
rate : rate,
action : 'rating'
},
function(data) { //回調(diào)函數(shù)，主要向插件自定義函數(shù)傳遞參數(shù)并執(zhí)行。
if(!data.error)
{
if(opts.onSuccess) opts.onSuccess( element, rate );
}
else
{
if(opts.onError) opts.onError( element, rate );
}
},
'json' //確定如何理解返回的數(shù)據(jù)，它采用json.
);
利用jQuery做Ajax確實(shí)很簡(jiǎn)單，代碼中做了必要注釋?zhuān)@里不再贅述，這個(gè)插件的源碼就分析完了，比較粗，但整個(gè)邏輯也許體現(xiàn)了一些，希望該學(xué)習(xí)筆記對(duì)大家能有幫助。下面我們進(jìn)入實(shí)戰(zhàn)階段。
三、實(shí)戰(zhàn)jRating插件
為了更加逼近真實(shí)應(yīng)用，我們先利用sql server建立一張數(shù)據(jù)庫(kù)表，它是一個(gè)文章類(lèi)型表，有id、標(biāo)題、文章內(nèi)容、評(píng)分四個(gè)字段，截圖如下：
評(píng)分字段默認(rèn)為-1，表示該文章還沒(méi)有被評(píng)分。當(dāng)然，現(xiàn)在有人會(huì)說(shuō)，這個(gè)表設(shè)計(jì)的很不合理，因?yàn)橐黄恼虏粫?huì)只評(píng)分一次吧，應(yīng)該每個(gè)用戶(hù)都能進(jìn)行評(píng)論，是的，我們?cè)谶@里只是為了演示jRating插件利用Ajax進(jìn)行持久化操作，因?yàn)槭茄菔?，所以一切從儉。
新建一個(gè)Web頁(yè)面，用來(lái)顯示第一篇文章（id為1）的標(biāo)題、內(nèi)容及評(píng)分插件，見(jiàn)前臺(tái)代碼：
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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 () {
$(".theRating").jRating({
length: 20,
phpPath: 'tempAjax.aspx/UpdateComment' //地址變成了一個(gè)aspx類(lèi)型的WEB頁(yè)面下的一個(gè)靜態(tài)函數(shù)，稍后我們會(huì)看到！
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="標(biāo)題："></asp:Label>
<asp:Label ID="page1_title" runat="server" Text=""></asp:Label><br />
<asp:Label ID="page1_body" runat="server" Text=""></asp:Label><br />
<div id="16_1" class="theRating"></div>
</div>
</form>
</body>
</html>
后臺(tái)CS代碼如下：
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
tempEntities cbx = new tempEntities(); //用了實(shí)體框架獲取數(shù)據(jù)表
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1_title.Text = page1.title;
page1_body.Text = page1.body;
}
}
為了減少數(shù)據(jù)庫(kù)連接代碼，我用了實(shí)體框架，只映射了一張表（jRatingArticle），就是上面我們看到的。獲取id為1的文章對(duì)象，并把相應(yīng)屬性賦值到Label控件的Text屬性中。
頁(yè)面效果如下：
我們可以看到上面前臺(tái)頁(yè)面的JS代碼中，有這樣一條語(yǔ)句：
phpPath: 'tempAjax.aspx/UpdateComment'
它指明了，當(dāng)鼠標(biāo)點(diǎn)擊插件后，要通過(guò)Ajax發(fā)送數(shù)據(jù)的地址，這里我們用.net頁(yè)面技術(shù)來(lái)處理這個(gè)異步請(qǐng)求。tempAjax.aspx的后臺(tái)cs代碼如下：
復(fù)制代碼 代碼如下:
[WebMethod()]
public static void UpdateComment(int idBox, int rate)
{
tempEntities cbx = new tempEntities();
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1.is_comment = rate;
cbx.SaveChanges();
}
此時(shí)，我們還需修改jRating插件的原文件，把鼠標(biāo)單擊(click)處理函數(shù)中的$.post函數(shù)替換如下：
復(fù)制代碼 代碼如下:
$.ajax({
type: "POST",
url: opts.phpPath,
data: '{"idBox":"' + idBox + '","rate":"' + rate + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
為什么要改變?cè)次募?，因?yàn)槲蚁敫淖傾jax請(qǐng)求的contentType屬性，利用json格式發(fā)送請(qǐng)求數(shù)據(jù)，默認(rèn)是application/x-www-form-urlencoded
OK，萬(wàn)事俱備，看一下執(zhí)行效果（選擇比例為16,16顆紅星嘛）：
看看數(shù)據(jù)庫(kù)的變化：
試驗(yàn)成功！今天學(xué)習(xí)就到這里，希望此篇學(xué)習(xí)筆記對(duì)大家能有所幫助！
您可能感興趣的文章:
- jQuery超贊的評(píng)分插件（8款）
- jQuery動(dòng)態(tài)星級(jí)評(píng)分效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)用戶(hù)打分評(píng)分特效
- jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效
- 使用jQuery實(shí)現(xiàn)星級(jí)評(píng)分代碼分享
- jquery實(shí)現(xiàn)類(lèi)似淘寶星星評(píng)分功能有截圖
- jquery實(shí)現(xiàn)類(lèi)似淘寶星星評(píng)分功能實(shí)例
- jquery五角星評(píng)分插件示例分享
- 基于jQuery的星級(jí)評(píng)分插件
- 如何基于jQuery實(shí)現(xiàn)五角星評(píng)分
相關(guān)文章
實(shí)例講解JQuery中this和$(this)區(qū)別
這篇文章主要介紹了實(shí)例講解JQuery中this和$(this)的區(qū)別,this表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象,可以調(diào)用html對(duì)象所擁有的屬性和方法,$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JQuery控制radio選中和不選中方法總結(jié),本文起講解了設(shè)置選中方法、設(shè)置選中和不選中示例、另一種設(shè)置選中方法、根據(jù)值設(shè)置radio選中、使用prop方法操作示例等內(nèi)容,需要的朋友可以參考下2015-04-04
jQuery結(jié)合HTML5制作的愛(ài)心樹(shù)表白動(dòng)畫(huà)
這篇文章主要給大家分享的是一則jQuery結(jié)合HTML5制作的愛(ài)心樹(shù)表白動(dòng)畫(huà)的特效代碼，各位宅在家里的程序猿們，再辛苦的工作，也不要忘記你們的女朋友哦。2015-02-02
對(duì)于jQuery對(duì)象，只是把each方法簡(jiǎn)單的進(jìn)行了委托：把jQuery對(duì)象作為第一個(gè)參數(shù)傳遞給jQuery的each方法.換句話說(shuō)：jQuery提供的each方法是對(duì)參數(shù)一提供的對(duì)象的中所有的子元素逐一進(jìn)行方法調(diào)用2010-08-08
jquery數(shù)組封裝使用方法分享(jquery數(shù)組遍歷)
JQuery對(duì)數(shù)組的處理非常便捷并且功能強(qiáng)大齊全，一步到位的封裝了很多原生js數(shù)組不能企及的功能。下面來(lái)看看JQuery數(shù)組的強(qiáng)大之處在哪。2014-03-03
基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化
這篇文章主要為大家詳細(xì)介紹了基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
jQuery采用連綴寫(xiě)法實(shí)現(xiàn)的折疊菜單效果
這篇文章主要介紹了jQuery采用連綴寫(xiě)法實(shí)現(xiàn)的折疊菜單效果,通過(guò)jQuery的連綴寫(xiě)法(又稱(chēng)鏈?zhǔn)讲僮?實(shí)現(xiàn)菜單折疊的顯示效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
zTree節(jié)點(diǎn)文字過(guò)多的處理方法
這篇文章主要為大家詳細(xì)介紹了zTree節(jié)點(diǎn)文字過(guò)多的處理方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
現(xiàn)在jquery應(yīng)用的越來(lái)越多, 有些同學(xué)在享受爽快淋漓coding時(shí)就將性能問(wèn)題忽略了, 比如我. jquery雖在諸多的js類(lèi)庫(kù)中性能表現(xiàn)還算優(yōu)秀, 但畢竟不是在用原生的javascript開(kāi)發(fā), 性能問(wèn)題還是需要引起重視的.2010-02-02
這篇文章主要介紹了TinyMCE漢化及本地上傳圖片功能實(shí)例詳解的相關(guān)資料,由于我們下載下拉的是英文版，需要先漢化，比較簡(jiǎn)單，需要的朋友可以參考下2016-05-05