文章评分评级jquery插件
居于jquery框架的文章评分评级插件，效果如下
数据库设计很简单，就用一个字段存储score，记录1-5星投票的人数，用“|”分隔开。循序为5星|4星|3星|2星|1星
注意：这个字段的默认值要设置为“0|0|0|0|0”
测试源代码及相关使用说明如下
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.codescore{font-size:12px;position:absolute;width:270px;border:solid 1px #cccccc;z-index:10;display:none;}
.codescore .top{height:23px;line-height:23px; vertical-align:middle;padding-left:20px;background:url(/images/startop.gif) repeat-x;}
.codescore .top img{position:absolute;right:2px;top:2px;cursor:pointer;}
.codescore .dt{height:140px;background:url(/images/starbg.gif) repeat-x;width:100%;}
.codescore .dt ul{margin:0px;list-style:none;padding:13px 0px 0px 10px;}
.codescore .dt ul li{height:22px;}
.codescore .dt ul li span{display:block;float:left;}
.codescore .dt ul li span.star{width:65px;}
.codescore .dt ul li span.picnum{width:120px;border:solid 1px #bbbbbb;height:14px;}
.codescore .dt ul li span.picnum img{height:100%;}
.codescore .dt ul li span.num{width:60px;height:20px;overflow:hidden;padding-left:10px;line-height:20px;vertical-align:bottom;}
.codescore .dt .giveScore{padding-left:10px;}
</style>
<span id="spScore"></span>
<script>
var comm = {//cookie操作，用于记录已经打分过文章
GetCookie: function (name) { var m = new RegExp(name + '=([^;]+)', 'i').exec(document.cookie); if (m) return unescape(m[1]); return ""; },
SetCookie: function (name, value, cfgTime) { var d; if ("undefined" != typeof (icfgTime)) { d = new Date(); if (cfgTime.y) d.setFullYear(d.getFullYear() + cfgTime.y); if (cfgTime.M) d.setMonth(d.getMonth() + cfgTime.M); if (cfgTime.d) d.setDate(d.getDate() + cfgTime.d); if (cfgTime.h) d.setHours(d.getHours() + cfgTime.h); if (cfgTime.m) d.setMinutes(d.getMinutes() + cfgTime.m); if (cfgTime.s) d.setSeconds(d.getSeconds() + cfgTime.s); } document.cookie = name + "=" + value + ";path=/;" + (d ? "expires=" + d.toGMTString() : ''); }
};
window.onload = function () {
(function ($) {
/*cfg配置
*red：红色星星url
*gray：灰色星星url
*half：红灰个半星星url地址
*up：打分下拉箭头url地址
*close：关闭打分弹出层下拉地址
*ptimg：分数比例图片地址
*url：分数保存地址
*score：分数
*pos：打分弹出层位置,1：居于下拉箭头左边 2：居于下拉箭头右边，默认2
******************上面的可以省略，会自动分配默认值
*id：要打分评级的文章唯一id，不能省略
*/
$.fn.score = function (cfg) {
function computePercent() {
if (_totalnum == 0) return;
for (var i = 0; i < 5; i++) _ptArr[i] = comm.round(_numArr[i] / _totalnum, 2) * 100;
}
function init() {
if (!cfg.red) cfg.red = '/images/star_red.gif';
if (!cfg.gray) cfg.gray = '/images/star_gray.gif';
if (!cfg.half) cfg.half = '/images/star_half.gif';
if (!cfg.up) cfg.up = '/images/btnup.gif';
if (!cfg.down) cfg.down = '/images/btndown.gif';
if (!cfg.close) cfg.close = '/images/close.gif';
if (!cfg.ptimg) cfg.ptimg = '/images/startiao.gif';
if (!cfg.url) cfg.url = '/ashx/score.ashx';
if (!/^\d+(\|\d+){4}$/.test(cfg.score)) cfg.score = '0|0|0|0|0';
_numArr = cfg.score.split('|');
var i = 0, m;
for (m = _numArr.length; i < m; i++) {
_numArr[i] = parseInt(_numArr[i], 10);
_totalnum += _numArr[i];
_totalscore += _numArr[i] * (5 - i);
}
computePercent();
}
function reset(e) {
var o = e ? $(this) : false, idx = e ? parseInt(o.attr('title'), 10) - 1 : 0, et = e ? e.type : 'mouseout';
clearTimeout(timer);
timer = setTimeout(function () {
if (et == 'mouseout') _stars.attr('src', cfg.gray);
else {
o.attr('src', cfg.red);
_stars.filter(':lt(' + idx + ')').attr('src', cfg.red);
_stars.filter(':gt(' + idx + ')').attr('src', cfg.gray);
}
}, 100);
}
function callserver() {
var o = $(this), idx = 5 - parseInt(o.attr('title'), 10), sp = o.parent().next();
_stars.unbind();
sp.show();
$.ajax({
url: cfg.url,
type: 'POST',
data: 'id=' + cfg.id + '&idx=' + idx,
complete: function (xhr) {
var r = comm.evalJSON(xhr);
sp.hide();
if (r.success) {
_totalnum += 1;
_numArr[idx] += 1;
_totalscore += 5 - idx;
initDOM();
_spTotal.html(_totalnum);
_ul.find('li:eq(' + idx + ') span:last').html(_numArr[idx] + '人');
computePercent();
for (var i = 0; i < 5; i++) _ul.find('li:eq(' + i + ') img:last').css('width', _ptArr[i] + '%');
comm.SetCookie('code' + cfg.id, 5 - idx, {
y: 1
});
_stars.parent().find('label').html('您的评分为');
} else {
alert(r.err);
reset();
_stars.mouseover(reset).mouseout(reset).click(callserver);
}
}
});
}
function initDOM() {
var avg, it, html = '';
avg = _totalnum == 0 ? 0 : comm.round(_totalscore / _totalnum, 1);
it = Math.floor(avg);
for (var i = 1; i <= it; i++) html += '<img src="' + cfg.red + '" />';
if (avg > eval(it + '.3')) html += '<img src="' + cfg.half + '" />';
_fontScore.html(avg);
_lbStar.html(html);
}
function InitGUI() {
if (!/^\d+$/.test(cfg.id) || !me.get(0)) return false;
var html = '', i, j, _dt, _score = comm.GetCookie('code' + cfg.id);
init();
me.html('<b>推荐：</b><font class="score"></font>星<label></label> <img src="' + cfg.down + '" alt="查看详情"/>');
_fontScore = me.find('font');
_lbStar = me.find('label');
initDOM();
_btn = me.find('img:last');
_btn.mouseover(function () {
if (!_setpos) {
_pop.css({
left: _btn.offset().left + _btn.width() - (cfg.pos==1?0:_pop.width()),
top: _btn.offset().top + _btn.height()
});
_setpos = true;
}
this.src = cfg.up;
_pop.fadeIn(100);
});
_pop = $('<div class="codescore"></div>').appendTo(document.body);
_pop.mouseout(function (e) {
var o = e.toElement || e.relatedTarget;
if (this.contains(o)) return false;
_pop.fadeOut(100);
_btn.attr('src', cfg.down);
});
_pop.html('<div class="top">评分详情(<span>' + _totalnum + '</span>人)<img alt="关闭" src="' + cfg.close + '"></div>');
_pop.find('img').click(function () {
_pop.fadeOut(100);
_btn.attr('src', cfg.down);
});
_spTotal = _pop.find('span');
if (/^[1-5]$/.test(_score)) _score = parseInt(_score, 10);
else _score = 0;
html = '<ul>';
for (i = 0; i < 5; i++) {
html += '<li><span class="star">';
for (j = i; j < 5; j++) html += '<img src="' + cfg.red + '"/>';
for (j = 5 - i; j < 5; j++) html += '<img src="' + cfg.gray + '"/>';
html += '</span><span class="picnum"><img src="' + cfg.ptimg + '" width="' + _ptArr[i] + '%"/></span><span class="num">' + _numArr[i] + '人</span></li>';
}
html += '</ul>';
html += '<div class="giveScore"><span><label>' + (_score == 0 ? '请给出' : '您的') + '评分' + (_score == 0 ? '' : '为') + '</label>：';
if (_score == 0) {
for (i = 0; i < 5; i++) html += '<img src="' + cfg.gray + '" title="' + (i + 1) + '星"/>';
html += "</span><span style='display:none;'>正在更新，请等待...</span></div>";
} else {
for (i = 0; i < _score; i++) html += '<img src="' + cfg.red + '"/>';
for (i = _score; i < 5; i++) html += '<img src="' + cfg.gray + '"/>';
}
_dt = $('<div class="dt"></div>').appendTo(_pop);
_dt.html(html);
if (_score == 0) {
_ul = _dt.find('ul');
_stars = _dt.find('div.giveScore img');
_stars.mouseover(reset).mouseout(reset).click(callserver);
}
}
var _totalnum = 0, _totalscore = 0, _numArr, _ptArr = [0, 0, 0, 0, 0], _fontScore, _btn, _lbStar, _pop, _spTotal, _stars, _ul, me = this, _setpos = false, timer = null;
InitGUI();
}
})(jQuery);
$('#spScore').score({ id: 123, score: '0|0|0|0|0',pos:1 });
}
</script>
下面给出动态页更新的方法C#方法
private void Update()
{
string Id = Request.Form["id"], star = Request.Form["star"];
if (UserCheck.IsInt(Id))//因为提交到同一个页面，所以判断下是浏览还是ajax提交
{//UserCheck.IsInt就是一个判断字符串是否为数字的函数，这里不贴出来了
string msg = "";
int s = 5;
if (!UserCheck.IsInt(star)) msg += "{success:false,err:'星级为数字！'}";
else {
s = int.Parse(star);
if (s > 5 || s < 1) msg += "{success:false,err:'星级为1-5的数字！'}";
}
if (msg == "")
{
s = 5 - s;//注意这里循序是从5-1，所以要处理下
//==============使用自己的dbhelper类获取
DBHelper db = new DBHelper();
object ss = DBHelper.ExecScalar("select 存储分数的字段 from 表 where 唯一id字段=" + Id,db.CN);
//===============
if (ss == null) msg = "{success:false,err:'要评分的软件不存在！'}";
else
{
string[] arr = ss.ToString().Split('|');
for (int i = 0; i < 5; i++) if (i == s) { arr[i] = (int.Parse(arr[i]) + 1).ToString(); break; }//遍历分数数组更新对应的人数
string UpStar = arr[0] + "|" + arr[1] + "|" + arr[2] + "|" + arr[3] + "|" + arr[4];//转换为字符串
DBHelper.ExecNoNQuery("update 表 set 存储分数的字段='" + UpStar + "' where 唯一id字段=" + Id, db.CN);//更新
msg = "{success:true}";
}
db.CloseDB();
}
Response.Write(msg);
Response.End();
}
}
下面这个是asp版本的update.asp
Id = Request.Form("id")&"":star = Request.Form("star")&""
if isnumeric(id) then'sql注入判断
if not isnumeric(star) then
response.write "{success:false,err:'星级为数字！'}"
else
s=cint(star)
if s>5 or s<1 then
response.write "{success:false,err:'星级为1-5的数字！'}"
else
s = 5 - s'注意这里循序是从5-1，所以要处理下
set cn=server.createobject("adodb.connection")
cn.open "驱动字符串"
set rs=server.createobject("adodb.recordset")
rs.open "select 存储分数的字段 from 表 where 唯一id字段=" & Id,cn,1,3
if rs.eof or rs.bof then
response.write "要评分的软件不存在！"
else
arr=split(rs(0),"|")
for i = 0 to 4'遍历分数数组更新对应的人数
if i=s then
arr(i)= cint(arr(i)) + 1):exit for
end if
next
rs(0)=arr(0)&"|"&arr(1)&"|"&arr(2)&"|"&arr(3)&"|"&arr(4)
rs.update
response.write "{success:true}"
end if
rs.close:set rs=nothing:cn.close:set cn=nothing
end if
end if
else
response.write "{success:false,err:'要评论的软件Id为数字！'}"
end if
jquery.score.js源代码
(function($) {
$.fn.score = function(cfg) {
function computePercent() {
if (_totalnum == 0) return;
for (var i = 0; i < 5; i++) _ptArr[i] = comm.round(_numArr[i] / _totalnum, 2) * 100;
}
function init() {
if (!cfg.red) cfg.red = '/images/star_red.gif';
if (!cfg.gray) cfg.gray = '/images/star_gray.gif';
if (!cfg.half) cfg.half = '/images/star_half.gif';
if (!cfg.up) cfg.up = '/images/btnup.gif';
if (!cfg.down) cfg.down = '/images/btndown.gif';
if (!cfg.close) cfg.close = '/images/close.gif';
if (!cfg.ptimg) cfg.ptimg = '/images/startiao.gif';
if (!cfg.url) cfg.url = '/ashx/score.ashx';
if (!/^\d+(\|\d+){4}$/.test(cfg.score)) cfg.score = '0|0|0|0|0';
_numArr = cfg.score.split('|');
var i = 0,
m;
for (m = _numArr.length; i < m; i++) {
_numArr[i] = parseInt(_numArr[i], 10);
_totalnum += _numArr[i];
_totalscore += _numArr[i] * (5 - i);
}
computePercent();
}
function reset(e) {
var o = e ? $(this) : false,
idx = e ? parseInt(o.attr('title'), 10) - 1 : 0,
et = e ? e.type: 'mouseout';
clearTimeout(timer);
timer = setTimeout(function() {
if (et == 'mouseout') _stars.attr('src', cfg.gray);
else {
o.attr('src', cfg.red);
_stars.filter(':lt(' + idx + ')').attr('src', cfg.red);
_stars.filter(':gt(' + idx + ')').attr('src', cfg.gray);
}
},
100);
}
function callserver() {
var o = $(this),
idx = 5 - parseInt(o.attr('title'), 10),
sp = o.parent().next();
_stars.unbind();
sp.show();
$.ajax({
url: cfg.url,
type: 'POST',
data: 'id=' + cfg.id + '&idx=' + idx,
complete: function(xhr) {
var r = comm.evalJSON(xhr);
sp.hide();
if (r.success) {
_totalnum += 1;
_numArr[idx] += 1;
_totalscore += 5 - idx;
initDOM();
_spTotal.html(_totalnum);
_ul.find('li:eq(' + idx + ') span:last').html(_numArr[idx] + '人');
computePercent();
for (var i = 0; i < 5; i++) _ul.find('li:eq(' + i + ') img:last').css('width', _ptArr[i] + '%');
comm.SetCookie('code' + cfg.id, 5 - idx, {
y: 1
});
_stars.parent().find('label').html('您的评分为');
} else {
alert(r.err);
reset();
_stars.mouseover(reset).mouseout(reset).click(callserver);
}
}
});
}
function initDOM() {
var avg, it, html = '';
avg = _totalnum == 0 ? 0 : comm.round(_totalscore / _totalnum, 1);
it = Math.floor(avg);
for (var i = 1; i <= it; i++) html += '<img src="' + cfg.red + '" />';
if (avg > eval(it + '.3')) html += '<img src="' + cfg.half + '" />';
_fontScore.html(avg);
_lbStar.html(html);
}
function InitGUI() {
if (!/^\d+$/.test(cfg.id) || !me.get(0)) return false;
var html = '',
i, j, _dt, _score = comm.GetCookie('code' + cfg.id);
init();
me.html('<b>推荐：</b><font class="score"></font>星<label></label> <img src="' + cfg.down + '" alt="查看详情"/>');
_fontScore = me.find('font');
_lbStar = me.find('label');
initDOM();
_btn = me.find('img:last');
_btn.mouseover(function() {
if (!_setpos) {
_pop.css({
left: _btn.offset().left + _btn.width() - _pop.width(),
top: _btn.offset().top + _btn.height()
});
_setpos = true;
}
this.src = cfg.up;
_pop.fadeIn(100);
});
_pop = $('<div class="codescore"></div>').appendTo(document.body);
_pop.mouseout(function(e) {
var o = e.toElement || e.relatedTarget;
if (this.contains(o)) return false;
_pop.fadeOut(100);
_btn.attr('src', cfg.down);
});
_pop.html('<div class="top">评分详情(<span>' + _totalnum + '</span>人)<img alt="关闭" src="' + cfg.close + '"></div>');
_pop.find('img').click(function() {
_pop.fadeOut(100);
_btn.attr('src', cfg.down);
});
_spTotal = _pop.find('span');
if (/^[1-5]$/.test(_score)) _score = parseInt(_score, 10);
else _score = 0;
html = '<ul>';
for (i = 0; i < 5; i++) {
html += '<li><span class="star">';
for (j = i; j < 5; j++) html += '<img src="' + cfg.red + '"/>';
for (j = 5 - i; j < 5; j++) html += '<img src="' + cfg.gray + '"/>';
html += '</span><span class="picnum"><img src="' + cfg.ptimg + '" width="' + _ptArr[i] + '%"/></span><span class="num">' + _numArr[i] + '人</span></li>';
}
html += '</ul>';
html += '<div class="giveScore"><span><label>' + (_score == 0 ? '请给出': '您的') + '评分' + (_score == 0 ? '': '为') + '</label>：';
if (_score == 0) {
for (i = 0; i < 5; i++) html += '<img src="' + cfg.gray + '" title="' + (i + 1) + '星"/>';
html += "</span><span style='display:none;'>正在更新，请等待...</span></div>";
} else {
for (i = 0; i < _score; i++) html += '<img src="' + cfg.red + '"/>';
for (i = _score; i < 5; i++) html += '<img src="' + cfg.gray + '"/>';
}
_dt = $('<div class="dt"></div>').appendTo(_pop);
_dt.html(html);
if (_score == 0) {
_ul = _dt.find('ul');
_stars = _dt.find('div.giveScore img');
_stars.mouseover(reset).mouseout(reset).click(callserver);
}
}
var _totalnum = 0,
_totalscore = 0,
_numArr, _ptArr = [0, 0, 0, 0, 0],
_fontScore,
_btn,
_lbStar,
_pop,
_spTotal,
_stars,
_ul,
me = this,
_setpos = false,
timer = null;
InitGUI();
}
})(jQuery);
加支付宝好友偷能量挖...
原创文章，转载请注明出处：文章评分评级jquery插件