[b]1：功能描述[/b]
1）最好是若干个星星组成，用户投票时候只要鼠标点击星星就可以实现投票，可以自定义星星个数
2）未投票、投票中、完成投票，星星的样式不同
3）每个星星的都可以自定义提示 比如 “差” “一般” “还好” “不错”
4）完成投票后，动画展示投票结果并且不可再投票
[b]2：思路描述
[/b]1、3）使用循环，最大值是星星的个数，每次循环添加一条<a></a>的语句，这条超链接通过Class指定星星样式，通过title指定鼠标移到时显示的文字，循环结束后通过Jquery的append函数添加到目标内容区
2）通过Jquery的addClass、removeClass 方法可以动态地调整星星的样式，值得注意的是在打分的时候，鼠标移动到某个位置的星星，之前的星星都要添加上样式，可以使用Jquery的prevAll()获得当前位置之前的星星的引用 然后add($(this))来获得当前位置星星的引用.
打分之前：
[url=http://www.1sucai.cn/upload/201101/20110119232626100.png][img]http://files.jb51.net/upload/201101/20110119232626672.png[/img]
[/url]
打分之中：
[url=http://www.1sucai.cn/upload/201101/20110119232626417.png][img]http://files.jb51.net/upload/201101/20110119232626463.png[/img]
[/url]
打分之后:
[url=http://www.1sucai.cn/upload/201101/20110119232626774.png][img]http://files.jb51.net/upload/201101/20110119232626980.png[/img]
[/url]
4）根据目标区子节点里面被选择星星的位置+1来产生分数 children().index($(this)) 然后该分数通过ajax与服务器交互，返回评价分，接着清空目标区内容，添加<span></span>背景图片设置成星星图片，在水平位置重复，就可以根据星星的宽度*平均分决定该<span></span>的最终宽度，并使用animate实现动画效果.
[b]3：实现代码
[/b]1)javaScript代码
为了方便，我把它做成了半插件形式， AJAX交互还是写了自己的逻辑进去,代码如下
[url=#]}
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);
参数说明:
| [b]参数名称[/b] |
[b]描述[/b] |
[b]默认值[/b] |
[b]参数类型[/b] |
| 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）样式表
[url=http://xiazai.jb51.net/201101/yuanma/jquery_webmethod.rar]猛击我下载[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
