基于Jquery与WebMethod投票功能实现代码

1:功能描述
1)最好是若干个星星组成,用户投票时候只要鼠标点击星星就可以实现投票,可以自定义星星个数
2)未投票、投票中、完成投票,星星的样式不同
3)每个星星的都可以自定义提示 比如 “差” “一般” “还好” “不错”
4)完成投票后,动画展示投票结果并且不可再投票

2:思路描述
1、3)使用循环,最大值是星星的个数,每次循环添加一条<a></a>的语句,这条超链接通过Class指定星星样式,通过title指定鼠标移到时显示的文字,循环结束后通过Jquery的append函数添加到目标内容区
2)通过Jquery的addClass、removeClass 方法可以动态地调整星星的样式,值得注意的是在打分的时候,鼠标移动到某个位置的星星,之前的星星都要添加上样式,可以使用Jquery的prevAll()获得当前位置之前的星星的引用 然后add($(this))来获得当前位置星星的引用.
打分之前:
 
打分之中:

打分之后:

4)根据目标区子节点里面被选择星星的位置+1来产生分数 children().index($(this)) 然后该分数通过ajax与服务器交互,返回评价分,接着清空目标区内容,添加<span></span>背景图片设置成星星图片,在水平位置重复,就可以根据星星的宽度*平均分决定该<span></span>的最终宽度,并使用animate实现动画效果.

3:实现代码
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="#" 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);


参数说明:

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

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdffdp.html