基于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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 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实现采集程序原理和简单示例代码
2007/03/18 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
js的event详解。
2006/09/06 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
vue弹窗消息组件的使用方法
2020/09/24 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
简单租房协议书
2014/04/09 职场文书
大学班级文化建设方案
2014/05/06 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
介绍信模板
2015/01/31 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang