Code based on Jquery and WebMethod voting function_jquery

1: Function description
1) It is best to consist of several stars. When users vote, they can vote by simply clicking on the stars with the mouse. The number of stars can be customized
2) Not voting, voting After completing the voting, the star styles are different
3) Each star can have customized prompts such as "poor", "average", "ok" and "good"
4) After completing the voting, the voting results will be displayed in animation And no more voting is allowed

2: Idea description
1, 3) Use a loop, the maximum value is the number of stars, and add an statement, this hyperlink specifies the star style through Class, and specifies the text displayed when the mouse moves over it through title. After the loop is completed, it is added to the target content area through Jquery's append function
2) Through Jquery's addClass and removeClass This method can dynamically adjust the style of stars. It is worth noting that when scoring, when the mouse moves to a star at a certain position, the style of the previous star must be added. You can use Jquery's prevAll() to obtain the star before the current position. Reference and then add($(this)) to get the reference of the star at the current position.
Before scoring:

During scoring:

After scoring:

4) Generate a score based on the position 1 of the selected star in the target area child node children().index($( this)) Then the score interacts with the server through ajax and returns the evaluation score. Then clear the content of the target area, add and set the background image to a star image. Repeat it in the horizontal position, and you can adjust it according to the width of the star. *The average score determines the final width of the , and uses animate to achieve animation effects.

3: Implementation code
1) javaScript code
For convenience, I made it into a semi-plugin form. I still wrote my own logic for AJAX interaction. The code is as follows

Copy code The code is as follows:

(function ($) {
$.fn.Rate = function (options) {
options = options || {};
var StarTip = options.StarTip || ['Not worth a look', 'Mediocre', 'Reliable information', 'Very helpful to me', 'Excellent information'];
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 = [''].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();
$('').addClass(originalStateClassName).prependTo(content).animate({ 'width': 16 * result 'px', 'opacity': 1 }, 'slow');
}
});
});

};

})(jQuery);

参数说明:

参数名称	描述	默认值	参数类型
StarTip	鼠标移到星星上的文本提示	['不值一看', '平平无奇', '信息靠谱', '对我很有帮助', '极品信息']	javascript数组 [tip]:数组元素个数必须要和星星个数一致
ItemAmount	星星的个数	5	数字
UnRateClassName	还没投票时星星的样式名称	'star'	字符串
RateClassName	投票中，鼠标移过时星星的样式	'star_on'	字符串
originalStateClassName	投票完成后，结果展示时星星的样式	'OriginalState'	字符串
PostURL	ajax交互时，url参数	''	字符串
DoAfterPost	投票完成后，在投票页面使用自定义方法	''	字符串
userID	ajax交互时用户ID，防止重复投票	''	数字
messageID	ajax交互时文章ID	''	数字

2) Front-end reference code

Copy code The code is as follows:

$('#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('You have already voted');
}
}
});
}

4) Style sheet

Copy code The code is as follows:

.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) Server-side code

Copy code The code is as follows:

/// < ;summary>
/// Vote on the message, a return value greater than 0 means success
///
/// Message ID< /param>
/// UserID
/// Score
///
[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);
}

About JsonConvert.SerializeObject For an introduction to the content and interaction with front-end Jquery, please see my previous article
4: Download the
compressed package including css, JS, and star images
Click me to download