快捷導航

基于Jquery與WebMethod投票功能實現(xiàn)代碼

更新時間：2011年01月19日 23:26:31 作者：

基于Jquery與WebMethod投票功能實現(xiàn)代碼，需要的朋友可以參考下。

1：功能描述
1）最好是若干個星星組成，用戶投票時候只要鼠標點擊星星就可以實現(xiàn)投票，可以自定義星星個數(shù)
2）未投票、投票中、完成投票，星星的樣式不同
3）每個星星的都可以自定義提示比如 “差” “一般” “還好” “不錯”
4）完成投票后，動畫展示投票結(jié)果并且不可再投票

2：思路描述
1、3）使用循環(huán)，最大值是星星的個數(shù)，每次循環(huán)添加一條<a></a>的語句，這條超鏈接通過Class指定星星樣式，通過title指定鼠標移到時顯示的文字，循環(huán)結(jié)束后通過Jquery的append函數(shù)添加到目標內(nèi)容區(qū)
2）通過Jquery的addClass、removeClass 方法可以動態(tài)地調(diào)整星星的樣式，值得注意的是在打分的時候，鼠標移動到某個位置的星星，之前的星星都要添加上樣式，可以使用Jquery的prevAll()獲得當前位置之前的星星的引用然后add($(this))來獲得當前位置星星的引用.
打分之前：

打分之中：

打分之后:

4）根據(jù)目標區(qū)子節(jié)點里面被選擇星星的位置+1來產(chǎn)生分數(shù) children().index($(this)) 然后該分數(shù)通過ajax與服務(wù)器交互，返回評價分，接著清空目標區(qū)內(nèi)容，添加<span></span>背景圖片設(shè)置成星星圖片，在水平位置重復，就可以根據(jù)星星的寬度*平均分決定該<span></span>的最終寬度，并使用animate實現(xiàn)動畫效果.

3：實現(xiàn)代碼
1)javaScript代碼
為了方便，我把它做成了半插件形式， AJAX交互還是寫了自己的邏輯進去,代碼如下

復制代碼代碼如下:

 
(function ($) { 
$.fn.Rate = function (options) { 
options = options || {}; 
var StarTip = options.StarTip || ['不值一看', '平平無奇', '信息靠譜', '對我很有幫助', '極品信息']; 
var ItemAmount = options.ItemAmount || 5; 
var UnRateClassName = options.UnRateClassName || 'star'; 
var RateClassName = options.RateClassName || 'star_on'; 
var originalStateClassName = options.originalStateClassName || 'OriginalState'; 
var PostURL = options.PostURL || ''; 
var DoAfterPost = options.DoAfterPost || function () { }; 
var userID = options.userID || ''; 
var messageID = options.messageID || ''; 
var content = $(this); 
var starList = ''; 
for (var i = 0; i < ItemAmount; i++) { 
starList += ['<a href="#" class="', UnRateClassName, '" title="', StarTip[i], '"></a>'].join(''); 
} 
content.empty().append(starList).find('a').hover(function () { 
$(this).prevAll().add($(this)).addClass(RateClassName); 
}, function () { 
$(this).prevAll().add($(this)).removeClass(RateClassName); 
}).one('click', function () { 
var score = parseInt(content.children().index($(this))) + 1; 
$.ajax({ 
type: "POST", 
url: PostURL, 
data: "{messageID:" + messageID + ",userID:" + userID + ",Score:" + score + "}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function (msg) { 
var result = (jQuery.parseJSON(msg.d)).SuccessFlag; 
DoAfterPost(result); 
content.empty().removeClass(); 
$('<span></span>').addClass(originalStateClassName).prependTo(content).animate({ 'width': 16 * result + 'px', 'opacity': 1 }, 'slow'); 
} 
}); 
}); 

}; 

})(jQuery); 

參數(shù)說明:

參數(shù)名稱	描述	默認值	參數(shù)類型
StarTip	鼠標移到星星上的文本提示	['不值一看', '平平無奇', '信息靠譜', '對我很有幫助', '極品信息']	javascript數(shù)組 [tip]:數(shù)組元素個數(shù)必須要和星星個數(shù)一致
ItemAmount	星星的個數(shù)	5	數(shù)字
UnRateClassName	還沒投票時星星的樣式名稱	'star'	字符串
RateClassName	投票中，鼠標移過時星星的樣式	'star_on'	字符串
originalStateClassName	投票完成后，結(jié)果展示時星星的樣式	'OriginalState'	字符串
PostURL	ajax交互時，url參數(shù)	''	字符串
DoAfterPost	投票完成后，在投票頁面使用自定義方法	''	字符串
userID	ajax交互時用戶ID，防止重復投票	''	數(shù)字
messageID	ajax交互時文章ID	''	數(shù)字

2）前端引用代碼

復制代碼代碼如下:

 
$('#left table tr:eq(1) td:eq(0) #StarRate').Rate({ 
PostURL: 'http://www.cnblogs.com/ServiceProvider/MessageInfoService.asmx/VoteMessage', 
userID: UserID, 
messageID: messageID, 
DoAfterPost: function (data) { 
if (data > 0) { 
$(voteResultContext).html(data); 
} 
else { 
ProcessNoticeShow('您已經(jīng)投過票了'); 
} 
} 
}); 
} 

4）樣式表

復制代碼代碼如下:

 
.star{ height:16px; width:16px;float:left; background:url(../images/star.gif) no-repeat 0 0;} 
.star_on{ background: url(../images/star.gif) no-repeat 0 -32px !important;} 
.OriginalState{ width:0px;background: url(../images/star.gif) repeat-x 0 -16px !important;opacity:0;height:16px; display:block;} 

3）服務(wù)器端代碼

復制代碼代碼如下:

 
/// <summary> 
/// 對信息進行投票，返回值大于0代表成功 
/// </summary> 
/// <param name="messageID">信息ID</param> 
/// <param name="userID">用戶ID</param> 
/// <param name="Score">得分</param> 
/// <returns></returns> 
[WebMethod] 
public string VoteMessage(int messageID, int userID ,int Score) 
{ 
SQLCMD = new SqlCommand("MessageInfo_Add_VoteUsefull_MessageIDUserID", SQLConnect); 
SQLCMD.CommandType = CommandType.StoredProcedure; 
SQLCMD.Parameters.Add(new SqlParameter("@messageID",SqlDbType.Int)); 
SQLCMD.Parameters["@messageID"].Value = messageID; 
SQLCMD.Parameters.Add(new SqlParameter("@userID",SqlDbType.Int)); 
SQLCMD.Parameters["@userID"].Value = userID; 
SQLCMD.Parameters.Add(new SqlParameter("@Score", SqlDbType.Int)); 
SQLCMD.Parameters["@Score"].Value = Score; 
float SuccessFlag = basicSQLAccess.ExeScalarReturnValueFloat(SQLCMD); 
Hashtable HTFlag = new Hashtable(); 
HTFlag.Add("SuccessFlag", SuccessFlag); 
return JsonConvert.SerializeObject(HTFlag); 
} 