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


Posted in Javascript onJanuary 19, 2011

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

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

参数说明:

参数名称 描述 默认值 参数类型
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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
vue实现树形菜单效果
Mar 19 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 #Javascript
Jquery插件 easyUI属性汇总
Jan 19 #Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 #Javascript
Javascript调用C#代码
Jan 17 #Javascript
js的写法基础分析
Jan 17 #Javascript
js 动态文字滚动的例子
Jan 17 #Javascript
JavaScript中的Array对象使用说明
Jan 17 #Javascript
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
php使用正则验证中文
2016/04/06 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
js使用递归解析xml
2014/12/12 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python从入门到精通(DAY 1)
2015/12/20 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python如何读取文件中图片格式
2020/01/13 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
会计求职信范文
2014/05/24 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
详解Redis复制原理
2021/06/04 Redis
Win11更新失败并提示0xc1900101
2022/04/19 数码科技