基于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 call和apply方法
Nov 24 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
angular十大常见问题
Mar 07 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 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
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python实现ID3决策树算法
2017/12/20 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python print出共轭复数的方法详解
2019/06/25 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
大专生自荐信
2013/10/04 职场文书
四年级评语大全
2014/04/21 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
win10更新失败无限重启解决方法
2022/04/19 数码科技