基于Jquery与WebMethod投票功能实现代码_Javascript教程-查字典教程网
基于Jquery与WebMethod投票功能实现代码
基于Jquery与WebMethod投票功能实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:1:功能描述1)最好是若干个星星组成,用户投票时候只要鼠标点击星星就可以实现投票,可以自定义星星个数2)未投票、投票中、完成投票,星星的样式...

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="#", 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);

参数说明:

参数名称 描述 默认值 参数类型
StarTip 鼠标移到星星上的文本提示 ['不值一看', '平平无奇', '信息靠谱', '对我很有帮助', '极品信息'] javascript数组

[tip]:数组元素个数必须要和星星个数一致

ItemAmount 星星的个数 5 数字
UnRateClassName 还没投票时星星的样式名称 'star' 字符串
RateClassName 投票中,鼠标移过时星星的样式 'star_on' 字符串
originalStateClassName 投票完成后,结果展示时星星的样式 'OriginalState' 字符串
PostURL ajax交互时,url参数 '' 字符串
DoAfterPost 投票完成后,在投票页面使用自定义方法 '' 字符串
userID ajax交互时用户ID,防止重复投票 '' 数字
messageID ajax交互时文章ID '' 数字
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('您已经投过票了');

}

}

});

}

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)服务器端代码

复制代码 代码如下:

/// <summary>

/// 对信息进行投票,返回值大于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);

}

有关JsonConvert.SerializeObject的内容介绍以及与前端Jquery交互 请看我之前的文章 <通过Jquery遍历Json的两种数据结构>

4:下载

压缩包包括 css、JS、还有星星图片

猛击我下载

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类