該插件被廣泛應(yīng)用于各種需要評分的頁面當(dāng)中，今天作為學(xué)習(xí)，把源碼拿出來分析一下，順便學(xué)習(xí)其使用方法。
一、插件使用一覽。


執(zhí)行效果：

可以看到，上面的例子中，有10顆星，是參數(shù)length的作用。其中，默認(rèn)總分是20分，就是10顆星都選擇。這里我們著重注意<div>的id16_1，其中16被用來初始化評分插件默認(rèn)選擇的比例，16/20 * 10。所以我們上面有8顆星是黃色的。

當(dāng)我們把鼠標(biāo)放到插件上時，小星星會隨著鼠標(biāo)移動而增加或減少（紅色會覆蓋黃色或白色），表示評分的從0至20，但點擊鼠標(biāo)時，評分結(jié)束，插件不能再編輯了，同時，通過Ajax向指定的路徑POST數(shù)據(jù)，用后臺數(shù)據(jù)將評分?jǐn)?shù)據(jù)持久化。

在分析源代碼之前，我們先看一下使用該插件時有哪些可選參數(shù)：
 
二、插件源碼分析

按照jQuery插件開發(fā)的推薦方法，為了避免快捷符號“$”與其他JavaScript插件產(chǎn)生沖突，源碼開頭采用了下面技術(shù)：

接下來，我們分析的所有代碼都將出現(xiàn)在上面綠色區(qū)域部分，首先設(shè)置默認(rèn)參數(shù)。

通過上面綠色部分的解釋，我們可以看到所有參數(shù)的默認(rèn)值，同時，我們可以在插件使用中，根據(jù)需求確定適合的配置，插件的使用不就是這些參數(shù)的搭配組合嗎？
接下來我們再看一個函數(shù)作用域：

這段代碼很簡單，我們要在選中的集合上執(zhí)行jRating()函數(shù)，而上面的代碼首先判斷該集合是否長度大于0，如果為1或者更多，則在該集合上執(zhí)行each()函數(shù)，對集合中的每一個元素（div）進(jìn)行單獨處理。
該插件的核心代碼其實都在上面的each()函數(shù)中，我們首先看幾個函數(shù)，這幾個函數(shù)都定義在each()函數(shù)中，并被其他語句調(diào)用。

首先關(guān)注findRealLeft()函數(shù)，該函數(shù)接收名為obj的對象參數(shù)，最后返回該元素對象相對于瀏覽器左邊界的距離。注：offsetParent是指元素最近的定位（relative,absolute）祖先元素，如果沒有祖先元素是定位的話，會指向body元素。offsetLeft返回相對于offsetParent的位置。

接著關(guān)注getNote函數(shù)，首先我們看以下relativeX是一個什么東西：

上面兩行代碼是調(diào)用getNote函數(shù)前，定義relativeX變量用的，我們可以分析出relativeX的作用。這里的this是我們應(yīng)用jRating()函數(shù)的某個div，首先獲得其相對于瀏覽器的左邊距，因為上面兩行代碼是出現(xiàn)在鼠標(biāo)移動處理函數(shù)mouseenter中（稍后我們會看到），因此這里的e.pageX表示鼠標(biāo)相對于瀏覽器的橫向距離。因此，這里的relativeX表示的是鼠標(biāo)相對于<div>左邊界的橫向距離。
我們再次關(guān)注getNote函數(shù)，由widthRatingContainer = starWidth*opts.length可以看出，widthRatingContainer是左右星星圖片加起來的寬度。因此，var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);可以把分母與分子上的兩個100去掉，即(relativeX/widthRatingContainer)*opts.rateMax)，noteBrut變量最后存儲的是鼠標(biāo)選擇的比例，如果rateMax設(shè)為20，則noteBrut的范圍可以通過鼠標(biāo)來確定（0—20）。
switch函數(shù)，是通過decimalLength參數(shù)（用來設(shè)定顯示比例的小數(shù)位），最終確定（比例）顯示的位數(shù)。讀到這里，我們可以發(fā)現(xiàn)，getNote函數(shù)就是通過relativX來返回鼠標(biāo)選擇的比例，這個比例是什么，見下圖用筆刷框起來的部分：
 
接下來，我們再關(guān)注一個函數(shù)：

這個是一個比較簡單的用于初始化變量的函數(shù)，根據(jù)type屬性，初始化三個變量，分別是starWidth、starHeight、bgPath，綠色的注釋信息已能夠說明一切，不再贅述！
each()中定義的函數(shù)看完了，接下來，我們還在each()函數(shù)中進(jìn)行游蕩，按照從上到下的順序，先截取了幾行代碼如下：

接著往下看：

接下來，我們將看到新建的三個<div>，并插入到主div中

首先我們分析第一個<div>，它的類名為jRatingColor，它表示默認(rèn)比例，用黃色表示，它的長度為withColor,這里主要看一下它的樣式表：

第二個<div>樣式表如下：

但在上面的程序中，初始化時，把寬度設(shè)為0（因為鼠標(biāo)還沒選嘛），同時改變了top值：- 星高度，這樣它就和上面添加的div在縱方向上重合了。
接下來看第三個<div>,主要用來放小星星。

這個樣式表比較簡單，我們著重看一下JS中動態(tài)添加的幾個屬性值：

屬性的值設(shè)置了，但也許有人會問，問什么只看到小星星顏色是彩色的，而上面添加的前兩個<div>不是具有高度的長方形顏色條嗎？下面我們看一下小星星的圖片就明白為什么了！

不用多說，旁邊用不透明的背景，中間小星星是透明的，下面的顏色自然就顯示出來了?。?
接下來的語句很簡單，就是設(shè)置一下最外層div容器的樣式，注意z-Index屬性:

接下來會進(jìn)入相對復(fù)雜的部分，我們將關(guān)注鼠標(biāo)動作及其響應(yīng)效果，首先關(guān)注一個小邏輯：
if(!jDisabled)
//接下來的代碼
可以看出，前面我們設(shè)置的jDisable變量在這里用上了，如果jDisabled為true，就表示插件禁用了，那么接下來的鼠標(biāo)操作將不會被執(zhí)行。
接下來看鼠標(biāo)操作是如何添加到插件中的：
$(this).unbind().bind({//鼠標(biāo)事件處理代碼，下面將分別進(jìn)行討論。
}）;
首先看以一下鼠標(biāo)進(jìn)入事件處理代碼：

relativeX變量不多解釋，這里的注釋和前面都有提到，接下來，判斷showRateInfo參數(shù)是否為true,如果為true，表示要顯示比例信息（例如鼠標(biāo)下面顯示16/20），tooltip變量就是這個信息框，最后通過appendTo方法添加到body中。代碼邏輯很簡單，這個函數(shù)主要用來顯示提示框<p>，我們在這里可以重點關(guān)注一下<p>節(jié)點的樣式，它是絕對定位的，并利用代碼改變了top和Left值，看一下相關(guān)的樣式表：

接下來我們看一下鼠標(biāo)進(jìn)來后的mousemove事件的處理函數(shù)：

這個函數(shù)主要用來確定鼠標(biāo)選擇的比例，當(dāng)然這個比例是通過getNote(newWidth)來得到的，那么，確定合適的newWidth值就成了這個函數(shù)的核心，如果opts.step為true，即比例只能是整數(shù)個星星（不能為15.3等等），那么我們看一下這個邏輯：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，看一下三個簡單的處理函數(shù)

mouseover函數(shù)確保鼠標(biāo)進(jìn)入插件后的顯示樣式，mouseout也是同樣，但它將類名為average的div（紅色的）寬度變成0，mouseleave函數(shù)讓提示信息框消失。
最后一個函數(shù)，也是整個源碼的結(jié)尾，當(dāng)然也是最重要最復(fù)雜的——鼠標(biāo)點擊函數(shù)：

我們分部來，先看第一部分：

為什么這里只列出一條語句，因為它很重要，但也很簡單，我們這里一定要關(guān)注unbind()函數(shù)，它非常非常重要，當(dāng)點擊鼠標(biāo)后，首先把其他所有綁定到外圍<div>的事件都去掉了，這樣就鼠標(biāo)點擊的瞬間，該插件的外觀就固定顯示在瀏覽器中，不再隨著鼠標(biāo)事件而出現(xiàn)變化。當(dāng)然，最后給<div>添加jDisabled屬性。
我們接著往后走：

第一句不難理解，刪除提示信息框，第二句取消鼠標(biāo)點擊的默認(rèn)操作，后面兩句很簡單，不再贅述，要知道newWidth在前面已提到，表示鼠標(biāo)選擇的寬度。
最后一條語句，把選擇的比例發(fā)送到服務(wù)器端進(jìn)行持久化操作：

利用jQuery做Ajax確實很簡單，代碼中做了必要注釋，這里不再贅述，這個插件的源碼就分析完了，比較粗，但整個邏輯也許體現(xiàn)了一些，希望該學(xué)習(xí)筆記對大家能有幫助。下面我們進(jìn)入實戰(zhàn)階段。
三、實戰(zhàn)jRating插件
為了更加逼近真實應(yīng)用，我們先利用sql server建立一張數(shù)據(jù)庫表，它是一個文章類型表，有id、標(biāo)題、文章內(nèi)容、評分四個字段，截圖如下：
 
評分字段默認(rèn)為-1，表示該文章還沒有被評分。當(dāng)然，現(xiàn)在有人會說，這個表設(shè)計的很不合理，因為一篇文章不會只評分一次吧，應(yīng)該每個用戶都能進(jìn)行評論，是的，我們在這里只是為了演示jRating插件利用Ajax進(jìn)行持久化操作，因為是演示，所以一切從儉。
新建一個Web頁面，用來顯示第一篇文章（id為1）的標(biāo)題、內(nèi)容及評分插件，見前臺代碼：

后臺CS代碼如下：

為了減少數(shù)據(jù)庫連接代碼，我用了實體框架，只映射了一張表（jRatingArticle），就是上面我們看到的。獲取id為1的文章對象，并把相應(yīng)屬性賦值到Label控件的Text屬性中。
頁面效果如下：
 
我們可以看到上面前臺頁面的JS代碼中，有這樣一條語句：
phpPath: 'tempAjax.aspx/UpdateComment'
它指明了，當(dāng)鼠標(biāo)點擊插件后，要通過Ajax發(fā)送數(shù)據(jù)的地址，這里我們用.net頁面技術(shù)來處理這個異步請求。tempAjax.aspx的后臺cs代碼如下：

此時，我們還需修改jRating插件的原文件，把鼠標(biāo)單擊(click)處理函數(shù)中的$.post函數(shù)替換如下：

為什么要改變源文件，因為我想改變Ajax請求的contentType屬性，利用json格式發(fā)送請求數(shù)據(jù)，默認(rèn)是application/x-www-form-urlencoded
OK，萬事俱備，看一下執(zhí)行效果（選擇比例為16,16顆紅星嘛）：
 
看看數(shù)據(jù)庫的變化：
 
試驗成功！今天學(xué)習(xí)就到這里，希望此篇學(xué)習(xí)筆記對大家能有所幫助！

最新評論