Вот как это работает простыми словами:Вид на странице: На сайте отображается три элемента:Кнопка «Не нравится» (для отрицательной оценки).
Число, показывающее текущий рейтинг (например, +5 или -3).
Кнопка «Нравится» (для положительной оценки).
Что происходит при клике:Когда пользователь нажимает «Нравится» или «Не нравится», запускается функция rateForm.
Эта функция отправляет запрос на сервер с информацией о том, какую оценку поставили (+1 за «нравится», -1 за «не нравится»), и указывает ID объекта (например, поста или комментария).
Пока запрос обрабатывается, кнопки «нравится» и «не нравится» временно скрываются, чтобы избежать повторных кликов.
Обработка на сервере:Сервер получает запрос, обновляет рейтинг и возвращает новое значение.
Если всё прошло успешно, рейтинг обновляется на странице, и число подсвечивается: зелёным (если рейтинг положительный), красным (если отрицательный) или серым (если ноль).
Появляется сообщение: «Оценка засчитана!».
Если что-то пошло не так:Если сервер вернёт ошибку, скрипт попробует её обработать, но рейтинг не изменится.
Технические детали:Рейтинг рассчитывается как сумма всех оценок минус двойное количество голосов (чтобы учесть начальное значение).
Скрипт использует jQuery для работы с элементами страницы и отправки запросов.
Стили (positiveRate, negativeRate, nullRate) задают внешний вид числа рейтинга в зависимости от его значения.
В общем, это удобная система для голосования, которая позволяет пользователям оценивать контент и сразу видеть результат.
Каталог файлов в нудное место
Код
<div class="rate_my_post">
<a class="orating_m" title="Не нравится" href="#" onclick="rateForm(-1,$ID$);return false"></a>
<a class="<?if(($RATING$*$RATED$-2*$RATED$)=0)?>nullRate<?else?><?if(($RATING$*$RATED$-2*$RATED$)<0)?>negativeRate<?else?>positiveRate<?endif?> <?endif?>" href="javascript://" title="Общий рейтинг"><b id="rate_$ID$"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b> </a>
<a class="orating_p" title="Нравится" href="#" onclick="rateForm(1,$ID$);return false"></a>
</div>
<a class="orating_m" title="Не нравится" href="#" onclick="rateForm(-1,$ID$);return false"></a>
<a class="<?if(($RATING$*$RATED$-2*$RATED$)=0)?>nullRate<?else?><?if(($RATING$*$RATED$-2*$RATED$)<0)?>negativeRate<?else?>positiveRate<?endif?> <?endif?>" href="javascript://" title="Общий рейтинг"><b id="rate_$ID$"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b> </a>
<a class="orating_p" title="Нравится" href="#" onclick="rateForm(1,$ID$);return false"></a>
</div>
Js код
Код
<script>rateForm = function(c, d, f, g) {
if (typeof d == 'undefined' || typeof c == 'undefined' || (c != 1 && c != -1)) return false;
c += 2;
if (!f) f = location.pathname.match(/[^\\\/]+/i) + '';
if (!f) return false;
var h = $('#rate_' + d);
g = $.extend({
'before': function(a) {
a.prev('a').remove();
a.next('a').remove()
},
'after-success': function(a, b) {
a.html(b).addClass(b > 0 ? 'positiveRate' : (b == 0 ? 'nullRate' : 'negativeRate'));
_uWnd.alert('Оценка засчитана!')
},
'after-error': function(a) {
try {
eval(a)
} catch (e) {}
}
}, g || {});
g.before(h);
$.post('/' + f + '/', {
'a': '65',
'id': d,
'mark': c,
'mod': f,
'ajax': '2'
}, function(a) {
a = $('cmd:first', a).text();
var b = a.match(/рейтинг:\s*([\d.]+)\/(\d+)/i);
if (!b) return g['after-error'](a);
b = Math.round(b[1] * b[2]) - 2 * b[2];
g['after-success'](h, b)
})
};
</script>
if (typeof d == 'undefined' || typeof c == 'undefined' || (c != 1 && c != -1)) return false;
c += 2;
if (!f) f = location.pathname.match(/[^\\\/]+/i) + '';
if (!f) return false;
var h = $('#rate_' + d);
g = $.extend({
'before': function(a) {
a.prev('a').remove();
a.next('a').remove()
},
'after-success': function(a, b) {
a.html(b).addClass(b > 0 ? 'positiveRate' : (b == 0 ? 'nullRate' : 'negativeRate'));
_uWnd.alert('Оценка засчитана!')
},
'after-error': function(a) {
try {
eval(a)
} catch (e) {}
}
}, g || {});
g.before(h);
$.post('/' + f + '/', {
'a': '65',
'id': d,
'mark': c,
'mod': f,
'ajax': '2'
}, function(a) {
a = $('cmd:first', a).text();
var b = a.match(/рейтинг:\s*([\d.]+)\/(\d+)/i);
if (!b) return g['after-error'](a);
b = Math.round(b[1] * b[2]) - 2 * b[2];
g['after-success'](h, b)
})
};
</script>
CSS оформление
Код
<style>.rate_my_post {
height: 24px;
position: relative;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 15px;
}
a.orating_m, a.orating_p{
height:21px;
width:21px;
background:url('/img/128_orating.png') no-repeat;}
a.orating_m{
background-position: -21px -24px;
margin: -3px 1px 0 0;
}
a.orating_m:hover{
background-position:-21px 100%;
}
a.orating_m.orated{
background-position:-21px -24px;
}
a.orating_p{
background-position: 0 -24px;
margin: -3px 0 0 1px;
}
a.orating_p:hover{
background-position:0 100%;
}
a.orating_p.orated{
background-position:0 100%;
}
.negativeRate, .positiveRate, .nullRate {
background: #64b327;
font-size: 8px;
padding: 4px 10px;
border-radius: 5px;
margin-bottom: 1px;
font: 10px / 15px 'Open Sans'!important;
color:white!important;
}
.negativeRate{
background: #cd4040;
}
a.orating_res:hover{
color:#f0f0f0;
}
</style>
height: 24px;
position: relative;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 15px;
}
a.orating_m, a.orating_p{
height:21px;
width:21px;
background:url('/img/128_orating.png') no-repeat;}
a.orating_m{
background-position: -21px -24px;
margin: -3px 1px 0 0;
}
a.orating_m:hover{
background-position:-21px 100%;
}
a.orating_m.orated{
background-position:-21px -24px;
}
a.orating_p{
background-position: 0 -24px;
margin: -3px 0 0 1px;
}
a.orating_p:hover{
background-position:0 100%;
}
a.orating_p.orated{
background-position:0 100%;
}
.negativeRate, .positiveRate, .nullRate {
background: #64b327;
font-size: 8px;
padding: 4px 10px;
border-radius: 5px;
margin-bottom: 1px;
font: 10px / 15px 'Open Sans'!important;
color:white!important;
}
.negativeRate{
background: #cd4040;
}
a.orating_res:hover{
color:#f0f0f0;
}
</style>
Картинку залить к себе на сайт в папку img, На этом установке окончена.
