欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于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)前位置星星的引用.
打分之前:
UnScore 
打分之中:
Scoreing
打分之后:
beenScore
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);
}

有關(guān)JsonConvert.SerializeObject的內(nèi)容介紹以及與前端Jquery交互 請(qǐng)看我之前的文章 <通過Jquery遍歷Json的兩種數(shù)據(jù)結(jié)構(gòu)>
4:下載
壓縮包包括 css、JS、還有星星圖片
猛擊我下載

相關(guān)文章

最新評(píng)論