1）最好是若干个星星组成，用户投票时候只要鼠标点击星星就可以实现投票，可以自定义星星个数
2）未投票、投票中、完成投票，星星的样式不同
3）每个星星的都可以自定义提示 比如 “差” “一般” “还好” “不错”
4）完成投票后，动画展示投票结果并且不可再投票
2：思路描述
1、3）使用循环，最大值是星星的个数，每次循环添加一条的语句，这条超链接通过Class指定星星样式，通过title指定鼠标移到时显示的文字，循环结束后通过Jquery的append函数添加到目标内容区
2）通过Jquery的addClass、removeClass 方法可以动态地调整星星的样式，值得注意的是在打分的时候，鼠标移动到某个位置的星星，之前的星星都要添加上样式，可以使用Jquery的prevAll()获得当前位置之前的星星的引用 然后add($(this))来获得当前位置星星的引用.
打分之前：
打分之中：
打分之后:
4）根据目标区子节点里面被选择星星的位置+1来产生分数 children().index($(this)) 然后该分数通过ajax与服务器交互，返回评价分，接着清空目标区内容，添加背景图片设置成星星图片，在水平位置重复，就可以根据星星的宽度*平均分决定该的最终宽度，并使用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 starList += [''].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();
$('').addClass(originalStateClassName).prependTo(content).animate({ 'width': 16 * result + 'px', 'opacity': 1 }, 'slow');
}
});
});
};
})(jQuery);
参数说明:
永利在线企业网站管理系统(CMS)1.0 Build 20100612
下载
修正说明：1，实现真正的软件开源。2，安装界面的美化3，真正实现栏目的递归无限极分类。4，后台添加幻灯片图片的管理，包括添加，修改，删除等。5，修正添加新闻的报错信息6，修正网站参数的logo上传问题7，修正产品图片的栏目无限极分类8，修正投票系统的只能单选问题9，添加生成静态页功能10，添加缓存功能特点和优势1. 基于B/S架构，通过本地电脑、局域网、互联网皆可使用，使得企业的管理与业务不受地域
| 参数名称 | 描述 | 默认值 | 参数类型 |
| StarTip | 鼠标移到星星上的文本提示 | ['不值一看', '平平无奇', '信息靠谱', '对我很有帮助', '极品信息'] | javascript数组 [tip]:数组元素个数必须要和星星个数一致 |
| ItemAmount | 星星的个数 | 5 | 数字 |
| UnRateClassName | 还没投票时星星的样式名称 | 'star' | 字符串 |
| RateClassName | 投票中，鼠标移过时星星的样式 | 'star_on' | 字符串 |
| originalStateClassName | 投票完成后，结果展示时星星的样式 | 'OriginalState' | 字符串 |
| PostURL | ajax交互时，url参数 | '' | 字符串 |
| DoAfterPost | 投票完成后，在投票页面使用自定义方法 | '' | 字符串 |
| userID | ajax交互时用户ID，防止重复投票 | '' | 数字 |
| messageID | ajax交互时文章ID | '' | 数字 |
复制代码 代码如下:
$('#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）服务器端代码
复制代码 代码如下:
///
/// 对信息进行投票，返回值大于0代表成功
///
/// 信息ID
/// 用户ID
/// 得分
///
[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交互 请看我之前的文章
4:下载
压缩包包括 css、JS、还有星星图片
猛击我下载
