Скрипт-виджет: как отобразить репутацию пользователя
На современных сайтах, особенно на форумах и в социальных сетях, репутация пользователя играет важную роль. Она помогает другим участникам быстро оценить вклад и авторитет человека. Скрипт, представленный ниже, — это простой и эффективный способ вывести информацию о репутации прямо на веб-страницу.
Как это работает?
Этот JavaScript-скрипт использует библиотеку jQuery для асинхронной подгрузки данных с сервера.
Принцип его работы довольно прост:
* Отправка запроса: Скрипт отправляет GET-запрос на адрес /index/9-$_USER_ID$-1. Здесь $_USER_ID$ — это переменная, которая автоматически подставляется для конкретного пользователя. Запрос на этот адрес возвращает HTML-код, содержащий информацию о репутации.
* Парсинг данных: Получив ответ, скрипт находит и извлекает нужные части из HTML-кода, используя селекторы jQuery.
* Отображение информации: Найденная информация о репутации ($_REPUTATION$) и история действий (#testRepa) вставляются в соответствующие элементы на странице.
* Навигация по страницам: Скрипт также обрабатывает ссылки для переключения между страницами истории репутации. Он заменяет стандартный обработчик onclick на собственную функцию oddRep(nPage). Это делает переход между страницами плавным, без перезагрузки всей страницы.
Этот скрипт — отличное решение для веб-мастеров, которые хотят добавить на свой сайт интерактивный виджет репутации, не нагружая сервер и обеспечивая удобный пользовательский опыт.
Код
<script id="scriptRep" type="text/javascript"></script>
<div style="border:1px solid #ccc; background:#fff;">
<div style="padding:5px; border:0px; border-bottom:1px solid #ccc;">
<div id="editRep" style="float:right;"></div>
Репутация <u>$_USERNAME$</u> составляет - <b id="kdfjeu2">$_REPUTATION$</b></div>
<div id="testRepa" style="padding:5px; text-align:center; max-height:153px; overflow: auto;"></div>
</div>
<style>div.u-rep-history-item>div {
max-width: 95%;
}</style>
<script type="text/javascript">var user_id = "$_USER_ID$";</script>
<script type="text/javascript">
$.get('/index/9-' + user_id + '-1', function(data) {
var conts = $('cmd[p="content"]', data).text();
$("#editRep").html($('td[nowrap="nowrap"]', conts).next().next().find('div').html());
$("#editRep").find("img").css({'height': '10px', 'width': '10px', 'margin-left': '2px'});
$("#editRep").find('a:first img').attr({'src': '/usrep/icon_edit.png'});
$("#editRep").find('a:eq(1) img').attr({'src': '/usrep/icon_out.png'});
$("#editRep").find('a:eq(2) img').attr({'src': '/usrep/icon_delete.png'});
$("#testRepa").html($('div[id^="blr"]:first', conts).parent('div').html());
$("#testRepa").find('hr:last').hide();
$("#scriptRep").html(eval($('cmd[p="js"]', data).text()));
$("#testRepa").find('a.pgSwch').each(function() {
var nPage = $(this).text();
$(this).removeAttr('onclick').attr({href: 'javascript:oddRep(' + nPage + ')'});
});
});
function oddRep(nPage) {
$.get('/index/9-' + user_id + '-' + nPage, function(datas) {
var conts = $('cmd[p="content"]', datas).text();
$("#testRepa").html($('div[id^="blr"]:first', conts).parent('div').html());
$("#testRepa").find('hr:last').hide();
$("#scriptRep").html(eval($('cmd[p="js"]', datas).text()));
$("#testRepa").find('a.pgSwch').each(function() {
var nPage = $(this).text();
$(this).removeAttr('onclick').attr({href: 'javascript:oddRep(' + nPage + ')'});
});
});
};
</script>
<div style="border:1px solid #ccc; background:#fff;">
<div style="padding:5px; border:0px; border-bottom:1px solid #ccc;">
<div id="editRep" style="float:right;"></div>
Репутация <u>$_USERNAME$</u> составляет - <b id="kdfjeu2">$_REPUTATION$</b></div>
<div id="testRepa" style="padding:5px; text-align:center; max-height:153px; overflow: auto;"></div>
</div>
<style>div.u-rep-history-item>div {
max-width: 95%;
}</style>
<script type="text/javascript">var user_id = "$_USER_ID$";</script>
<script type="text/javascript">
$.get('/index/9-' + user_id + '-1', function(data) {
var conts = $('cmd[p="content"]', data).text();
$("#editRep").html($('td[nowrap="nowrap"]', conts).next().next().find('div').html());
$("#editRep").find("img").css({'height': '10px', 'width': '10px', 'margin-left': '2px'});
$("#editRep").find('a:first img').attr({'src': '/usrep/icon_edit.png'});
$("#editRep").find('a:eq(1) img').attr({'src': '/usrep/icon_out.png'});
$("#editRep").find('a:eq(2) img').attr({'src': '/usrep/icon_delete.png'});
$("#testRepa").html($('div[id^="blr"]:first', conts).parent('div').html());
$("#testRepa").find('hr:last').hide();
$("#scriptRep").html(eval($('cmd[p="js"]', data).text()));
$("#testRepa").find('a.pgSwch').each(function() {
var nPage = $(this).text();
$(this).removeAttr('onclick').attr({href: 'javascript:oddRep(' + nPage + ')'});
});
});
function oddRep(nPage) {
$.get('/index/9-' + user_id + '-' + nPage, function(datas) {
var conts = $('cmd[p="content"]', datas).text();
$("#testRepa").html($('div[id^="blr"]:first', conts).parent('div').html());
$("#testRepa").find('hr:last').hide();
$("#scriptRep").html(eval($('cmd[p="js"]', datas).text()));
$("#testRepa").find('a.pgSwch').each(function() {
var nPage = $(this).text();
$(this).removeAttr('onclick').attr({href: 'javascript:oddRep(' + nPage + ')'});
});
});
};
</script>
