Доска почёта или Рейтинг самых уважаемых
Виджет, выводящий рейтинг самых уважаемых пользователей на форуме.
Автор: Romych
Платформа: Mybb
скрипт задуман как виджет выводящий рейтинг самых уважаемых пользователей на форуме, поэтому его можно вставлять туда, где этот рейтинг хотите наблюдать (Боковая панель, Объявление, отдельная страница и т.д.)
<!--Рейтинг-->
<script type="text/javascript">
$(document).ready(function(){
$('#pun').find('#userhero').map(function(){
$('#heroes').tipsy({live: true,gravity: 'e',fade: true});
$.get('/userlist.php?username=&show_group=-1&sort_by=respect','',processRespect);
function processRespect(data){
$(data).find('div.usertable tbody tr:lt(5)').each(function(){
var JUser=$(this).find('span.usersname').text();
var ulink=$(this).find('span.usersname a').attr('href');
var UsId=ulink.slice(ulink.indexOf('id=')+3);
var UsPlus=$(this).find('td.tc3:first').text();
var numPlus=Number(UsPlus)/2;
$.get('/profile.php?section=avatar&id='+UsId,'',GetImg);
function GetImg(data) {
$(data).find('td#profile-left li div, div.fs-box').map(function () {
var ZAva = $(this).find('img').attr('src');
if (ZAva == undefined) {ZAva = 'http://petushki-city.ru/files/0002/10/47/50167.gif'};
$('#userhero').append('<tr><td width="3%" style="padding: 0;"><a href="'+ulink+'" style="padding-left: 15px;text-decoration: none;"><img id="heroes" style="border:1px solid #696969;border-radius: 7px 0 0 7px;margin: 3px 0 -2px 5px;padding: 3px;" src="/'+ZAva+'" width="26" height="26" original-title="'+JUser+'"></a></td></td><td><h1 style="background:#FF8C00;border-radius: 0 9px 9px 0;box-shadow: 20px 0 15px #40310A inset;color: #fff;font-size: 1em;font-weight: bold;height: 20px;margin-top: 2px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );width:'+numPlus+'px !important;"> '+UsPlus+' </h1></td></tr>');
});};});};});});
</script>
<table id="userhero" cellpadding="0" cellspacing="0" ></table>скрипт на данный момент работает некорректно, в том плане, что информацию о пользователях он выдает в не в убывающем порядке (это связано с тем, что для получения аватара каждого пользователя в рейтинге, делается отдельный запрос и строки выстраиваются в порядке скорости запросов, тем не менее визуально видно реальный рейтинг каждого уважаемого
сколько выводить пользователей в списке, решайте сами, но чем меньше "героев", тем меньше запросов к серверу,
регулируется число выводимых пользователей здесь:
$(data).find('div.usertable tbody tr:lt(5)').each(function(){
следует отдельно сказать о шкале "уважаемости", если её длинна слишком велика и не вписывается в дизайн форума, то регулировать её можно, меняя число деления рейтинга на большее:
var numPlus=Number(UsPlus)/2;
если у самого уважаемого количество плюсов перевалило за 1000, то пожалуй логичным будет делить уже на 10, а не на 2
ДЕМО
вариант оформления №2
<!--Рейтинг-->
<script type="text/javascript">
$(document).ready(function(){
$('#pun').find('#userhero').map(function(){
$('#heroes').tipsy({live: true,gravity: 's',fade: true});
$.get('/userlist.php?username=&show_group=-1&sort_by=respect','',processRespect);
function processRespect(data){
$(data).find('div.usertable tbody tr:lt(5)').each(function(){
var JUser=$(this).find('span.usersname').text();
var ulink=$(this).find('span.usersname a').attr('href');
var UsId=ulink.slice(ulink.indexOf('id=')+3);
var UsPlus=$(this).find('td.tc3:first').text();
$.get('/profile.php?section=avatar&id='+UsId, '',GetImg);
function GetImg(data) {
$(data).find('td#profile-left li div, div.fs-box').map(function () {
var ZAva = $(this).find('img').attr('src');
if (ZAva == undefined) {ZAva = 'http://petushki-city.ru/files/0002/10/47/50167.gif'};
$('#userhero').append('<li style="display: inline-block;padding: 5px;text-align: center;"><a href="'+ulink+'" style="text-decoration: none;"><figure><img id="heroes" style="border:1px solid #696969;border-radius: 7px 7px 7px 7px;" src="/'+ZAva+'" width="52" height="52" original-title="'+JUser+'"><figcaption style="background:#99CC33;border-radius: 0 0 7px 7px;box-shadow: 0 0 10px #40310A inset;color: #fff;font-size: 1em;font-weight: bold;height: 20px;margin-top: -20px;position: relative;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );">'+UsPlus+'</figcaption></figure></a></li>');
});};});};});});
</script>
<ul id="userhero"></ul>Отредактировано Герда (17.01.14 02:07)
