基于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)去,代碼如下
(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);
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>
/// 對(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、還有星星圖片
猛擊我下載
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ù)字 |
復(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、還有星星圖片
猛擊我下載
您可能感興趣的文章:
- PHP+MySql+jQuery實(shí)現(xiàn)的"頂"和"踩"投票功能
- 基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼(附源碼下載)
- jquery彩色投票進(jìn)度條簡(jiǎn)單實(shí)例演示
- 基于PHP+jQuery+MySql實(shí)現(xiàn)紅藍(lán)(頂踩)投票代碼
- jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫效果無刷新柱狀圖投票代碼
- PHP結(jié)合jQuery實(shí)現(xiàn)紅藍(lán)投票功能特效
- 基于jquery的多彩百分比 動(dòng)態(tài)進(jìn)度條 投票效果顯示效果實(shí)現(xiàn)代碼
- 基于jQuery的投票系統(tǒng)顯示結(jié)果插件
- 基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析
相關(guān)文章
jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
用jQuery調(diào)用其他項(xiàng)目的WebService的代碼,需要的朋友可以參考下。2010-03-03JQuery自適應(yīng)IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
很高興,終于使用jquery實(shí)現(xiàn)了點(diǎn)擊外部鏈接,更改iframe內(nèi)容時(shí),iframe的高度自適應(yīng)問題。2011-03-03使用jQuery的ajax功能實(shí)現(xiàn)的RSS Reader 代碼
Rss閱讀器挺不錯(cuò)的。我覺得如果在igoogle或是dropthings這種形式的portal下來放很多RSS模塊顯示自己每天需要關(guān)注的信息那將會(huì)減少大家很多的打開瀏覽器和輸入網(wǎng)址的時(shí)間。2009-09-09修改Jquery Dialog 位置的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄薷腏query Dialog 位置的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jQuery .attr()和.removeAttr()方法操作元素屬性示例
本文為大家詳細(xì)介紹下如何使用jQuery的.attr()和.removeAttr()方法讀取,添加,修改,刪除元素的屬性,不會(huì)的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07