基于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 相关文章推荐
javascript 手动给表增加数据的小例子
Jul 10 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
js实现圆盘记速表
Aug 03 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
初识javascript 文档碎片
2010/07/13 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python实现的括号匹配判断功能示例
2018/08/25 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
揠苗助长教学反思
2014/02/04 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
党建目标管理责任书
2014/07/25 职场文书
经验交流材料格式
2014/12/30 职场文书
委托收款证明
2015/06/23 职场文书
英语读书笔记
2015/07/02 职场文书
2016大学军训心得体会
2016/01/11 职场文书
2016年学校招生广告语
2016/01/28 职场文书
mysql知识点整理
2021/04/05 MySQL
MySQL 时间类型的选择
2021/06/05 MySQL
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技