基于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与服务器交互，返回评价分，接着清空目标区内容，添加背景图片设置成星星图片，在水平位置重复，就可以根据星星的宽度*平均分决定该的最终宽度，并使用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="#" 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(); $('').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、还有星星图片猛击我下载

　　推荐阅读

　　如jQuery般易用的api风格代码分享

回到正题，如jQuery般易用的api风格？那到底是什么样的风格呢？个人觉得比较重要的有两点，一是对dom操作的链式调用，并且都呈队列状态，不仅仅使代码的可读语义变得通俗易懂，而且省去了对同一dom元素的多个链式操>>>详细阅读

本文标题：基于Jquery与WebMethod投票功能实现代码

地址：http://www.17bianji.com/kaifa2/JS/24989.html

1/2 1