快捷導(dǎo)航

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

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

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

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

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

打分之中：

打分之后:

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

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

復(fù)制代碼代碼如下:

 
(function ($) { 
$.fn.Rate = function (options) { 
options = options || {}; 
var StarTip = options.StarTip || ['不值一看', '平平無奇', '信息靠譜', '對(duì)我很有幫助', '極品信息']; 
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ù)名稱	描述	默認(rèn)值	參數(shù)類型
StarTip	鼠標(biāo)移到星星上的文本提示	['不值一看', '平平無奇', '信息靠譜', '對(duì)我很有幫助', '極品信息']	javascript數(shù)組 [tip]:數(shù)組元素個(gè)數(shù)必須要和星星個(gè)數(shù)一致
ItemAmount	星星的個(gè)數(shù)	5	數(shù)字
UnRateClassName	還沒投票時(shí)星星的樣式名稱	'star'	字符串
RateClassName	投票中，鼠標(biāo)移過時(shí)星星的樣式	'star_on'	字符串
originalStateClassName	投票完成后，結(jié)果展示時(shí)星星的樣式	'OriginalState'	字符串
PostURL	ajax交互時(shí)，url參數(shù)	''	字符串
DoAfterPost	投票完成后，在投票頁面使用自定義方法	''	字符串
userID	ajax交互時(shí)用戶ID，防止重復(fù)投票	''	數(shù)字
messageID	ajax交互時(shí)文章ID	''	數(shù)字

2）前端引用代碼

復(fù)制代碼代碼如下:

 
$('#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）樣式表

復(fù)制代碼代碼如下:

 
.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ù)器端代碼

復(fù)制代碼代碼如下:

 
/// <summary> 
/// 對(duì)信息進(jìn)行投票，返回值大于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); 
} 