В данный период на сервисе проходит тестирование API в том варианте, в котором интерфейс был написан 2 года назад. Методы будут изменяться и дополняться.
В данной теме будут выкладываться готовые решения с применением API.
Новые возможности с применением API (тест)
Сообщений 1 страница 19 из 19
Поделиться1Ср, 16 Сен 2015 15:24:05
Поделиться2Ср, 16 Сен 2015 15:34:18
Поскольку меня всегда интересовала возможность форум внешне привести к виду платных форумных движков, то большинство моих экспериментов связанно именно с добавлением аватаров и всяких всплывающих информерах. Итак
Всплывающий мини-профиль при наведении курсора на ник в viewforum.php
пользователям с отсутствующим аватаром добавляется дефолтный по половому признаку, в случае когда указан пол
мужской и женский дефолтные аватары
установка в html-низ:
<script type = "text/javascript" > $('span.byuser').map(function () { $(this).tipsy({trigger: 'manual', gravity: 'w', fade: true, html: true}); var self = $(this); var avtor = $(this).html(); avtor = avtor.replace(/ /g, ''); $(self).bind('mouseenter',function(){ $.getJSON('/api.php?method=users.get&username='+avtor+'&fields=avatar,registered,num_posts,last_visit,sex', function(json) { var xx = json.response.users; for (var key in xx) { var val = xx[key]; var sex = val.sex; var ava = val.avatar; if (ava == '' && sex == 2) {ava = 'http://forumstatic.ru/files/0000/14/1c/45689.png'} if (ava == '' && sex <= 1) {ava = 'http://forumstatic.ru/files/0000/14/1c/70618.png'}; var reg= new Date(val.registered*1000).toISOString().slice(0,-14); var lv = new Date(val.last_visit*1000).toISOString().slice(0,-14); var InfoUs ='<table style="background: #36648B;-moz-border-radius:3px;border-radius:3px;khtml-border-radius:3px;-webkit-border-radius:3px;-moz-box-shadow: inset 0 0 5em #1C1C1C;-webkit-box-shadow: inset 0 0 5em #1C1C1C;box-shadow: inset 0 0 5em #1C1C1C;filter: progid:DXImageTransform.Microsoft.Shadow(color=#1C1C1C, Direction=145, Strength=3);border-spacing:12px;"><tr><td><img src="'+ava+'" style="float:left;margin:5px 7px 3px 3px;border:medium solid #87CEFA;" width="70" height="70"><ul style="font-weight:bold;list-style-type:none;"><li>Регистрация: '+reg+'</li><li>Сообщений: '+val.num_posts+'</li><li>Последний визит: '+lv+'</li></ul></td></tr></table>' $(self).attr('original-title', InfoUs).tipsy('show'); return false; } } ); }) .bind('mouseleave', function() { $('.tipsy').hide(); }); }); </script>
Поделиться3Ср, 16 Сен 2015 15:38:34
Отображение аватаров при просмотре ЛС
.
в html-низ:
<script language="javascript"> if(document.URL.indexOf('messages.php')!=-1) { $(document).ready(function(){ var mess_id = [], tmp = [], ava = []; $('#messages td.tc2 a').each(function (i) { mess_id[i] = $(this).attr('href').replace(/http:\/\/(.*?)\.(\w{2,4})\/profile\.php\?id=/g,''); $.each(mess_id, function(i, el){ if($.inArray(el, tmp) === -1) tmp.push(el); }); }); $.getJSON('/api.php?method=users.get&user_id='+tmp+'&fields=avatar', function(json) { var xx = json.response.users; for (var i in xx) { var val = xx[i]; ava[i] = val.avatar; if (ava[i] == '') {ava[i] = 'http://forumstatic.ru/files/0000/14/1c/20038.jpg'}; } $('#messages td.tc2 a').map(function () { $(this).prepend('<img src="http://forumstatic.ru/files/0000/14/1c/20038.jpg" width="24" height="24" style="border: 1px solid #c4cad4;border-radius: 4px;float: left;margin-right: 5px;padding: 2px;">'); var mess2 = $(this).attr('href').replace(/http:\/\/(.*?)\.(\w{2,4})\/profile\.php\?id=/g,''); for (var i=0; i<ava.length; i++) { if(ava[i].replace(/\/img\/avatars\/(\w+)\/(\w+)\/(\w+)\/(\d+)\-(\d+)\.(\w{3})/g,'$4') === mess2) { $(this).find('img').attr('src',ava[i]); } }; }); } ); }); } </script>
Поделиться4Ср, 16 Сен 2015 15:40:39
Отображение аватаров в списке Участников.
в html-низ:
<script language="javascript"> if(document.URL.indexOf('userlist.php')!=-1) { $(document).ready(function(){ var us_id = []; var ava = []; $('.tcl .usersname a').each(function (i) { var us = $(this).attr('href'); us_id[i] = us.slice(us.indexOf('id=')+3); }); $.getJSON('/api.php?method=users.get&limit=50&user_id='+us_id+'&fields=avatar', function(json) { var xx = json.response.users; for (var i in xx) { var val = xx[i]; ava[i] = val.avatar; } $('.tcl .usersname a').map(function () { $(this).prepend('<img src="http://forumstatic.ru/files/0000/14/1c/20038.jpg" width="24" height="24" style="border: 1px solid #c4cad4;border-radius: 4px;float: left;margin-right: 5px;padding: 2px;">'); var us2 = $(this).attr('href').replace(/http:\/\/(.*?)\.(\w{2,4})\/profile\.php\?id=/g,''); for (var i=0; i<ava.length; i++) { if(ava[i].replace(/\/img\/avatars\/(\w+)\/(\w+)\/(\w+)\/(\d+)\-(\d+)\.(\w{3})/g,'$4') === us2) { $(this).find('img').attr('src',ava[i]); } }; }); }); });} </script>
Поделиться5Ср, 16 Сен 2015 15:44:40
Изменяем отображение именинников
.
возраст и ник отображаются при наведении курсора на аватар
ставить лучше всего в Описание (HTML) любого открытого форума :
<style> #birthday figure {display:block;height: 36px;width: 36px;position:relative;overflow:hidden;} #birthday figcaption {display:block; width:36px;background:rgba(153,204,0,0.8);border-radius: 0 0 9px 9px;box-shadow: 0 4px 10px #557fae inset;color: #fff; font-size: 1em;font-weight: bold;height: 15px;position: absolute;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );} </style> <script language="javascript"> $(function(){ var bv,x,v,bd_id=[],ava=[],bUs=[],UsAge=[],sex=[]; $('#birthday li figure').tipsy({live: !0,gravity: 's',fade: !0, html: !0}); $('#onlinelist.item6 span a').each(function (i){ bd_id[i]=$(this).attr('href').split('=')[1]; bUs[i]=$(this).text(); }); if (!bd_id){return false;} bv = '<ul id="birthday" style="display: inline;">'; $.getJSON('/api.php?method=users.get&user_id='+bd_id+'&fields=avatar,age,sex',function(json) { x = json.response.users; for (var i in x) { v = x[i]; sex[i] = v.sex; ava[i] = v.avatar; if (!ava[i] && sex[i] == 2){ava[i] = '//forumstatic.ru/files/0000/14/1c/45689.png'} if (!ava[i] && sex[i] <= 1){ava[i] = '//forumstatic.ru/files/0000/14/1c/70618.png'}; UsAge[i] = v.age; bv +='<li style="display: inline-block;padding: 5px;text-align: center;vertical-align: middle;"><figure original-title="<strong>'+bUs[i]+'</strong>"><a href="/profile.php?id='+bd_id[i]+'"><img style="border:2px solid #557fae;border-radius: 9000em;" src="'+ava[i]+'" width="28" height="28"></a><figcaption style="top:21px;">'+UsAge[i]+'</figcaption></figure></li>'; } bv += '</ul>'; $('#onlinelist.item6 span').html(bv); }); $('#birthday li figure').live('mouseenter mouseleave', function(e){ (e.type == 'mouseenter') ? $(this).find('figcaption').stop().animate({'top':'36px'}, 200, function(){}) : $(this).find('figcaption').stop().animate({'top':'21px'}, 200, function(){}); });}); </script>
Поделиться6Ср, 16 Сен 2015 15:50:15
Просмотр репутации поста а-ля Вконтакте
устарел
живой пример работы можно посмотреть на этом форуме
(если при наведении на оценку ничего не отображается, значит эта оценка выставлена оооочернь давно)
курсор нужно подержать на оценке пару секунд, это сделано во избежание случайных запросов
в html-низ а лучше в HTML в форме ответа:
<style> #respect li {display: table-cell;} #respect figure {margin: 7px;width: 30px;} #respect figcaption {font-size: 0.9em;} .tipsy-inner {min-width: 40px !important; max-width: 800px !important;} </style> <script type="text/javascript"> $('div.post').map(function () { var postvote = Number($(this).find('div.post-rating a').text()); if(postvote != 0) { var UsID=$(this).find('li.pa-respect a').attr('href').replace(/\/respect\.php\?id=(\d+)/g,'$1'); var PostID = $(this).find('div.post-content').attr('id').slice(1,-8); var tyt = $(this).find('.post-rating p'); var TemaId, tmp_abort, Kto = [], Nuser =[], ava = []; function Clean(element) { return element != undefined; } $(tyt).bind('mouseenter',function(){ $(tyt).tipsy({trigger: 'manual', gravity: 's', fade: true, html: true, delayOut: 1000}); var who = '<ul id="respect" style="display: table-row;">'; tmp_abort=setTimeout(function(){ $.get('respect.php?id='+UsID, function(data) { var self = $(data).find('#pun-respect #pun-main tbody tr:has(a)'); $(self).each(function (i) { TemaId = $(this).find('td.tcr a').attr('href').replace(/http:\/\/(.*?)\/viewtopic\.php\?pid=(\d+)\#p(\d+)/g,'$2'); if (PostID === TemaId) { Kto[i] = $(this).find('td.tc3 a').attr('href').replace(/http:\/\/(.*?)\/profile\.php\?id=/g,''); } }); $.getJSON('/api.php?method=users.get&user_id='+Kto.filter(Clean)+'&fields=username,avatar', function(json) { var xx = json.response.users; for (var i in xx) { var val = xx[i]; Nuser[i] = val.username; ava[i] = val.avatar; if (ava[i] == '') {ava[i] = 'http://forumstatic.ru/files/0000/14/1c/20038.jpg'}; } for (var i=0; i<ava.length; i++) { who += '<li><figure><img style="border:3px solid #696969;border-radius:2px;" src="'+ava[i]+'" width="28" height="28"><figcaption>'+Nuser[i]+'</figcaption></figure></li>' }; who += '</ul>'; $(tyt).attr('original-title', who).tipsy('show'); return false; } ); }); }, 1200); }) .bind('mouseleave', function() { $('.tipsy').hide(300); clearTimeout(tmp_abort) }); } }); </script>
работает только с последними 20 оценками пользователя!
поскольку страница respect.php выдает нам по 20 оценок на страницу
Поделиться7Ср, 16 Сен 2015 15:59:29
как просматривать оценок поста больше чем 20?
для этого применяем методы jquery 1.5.2
Просмотр репутации поста а-ля Вконтакте
с подключением jquery 1.5.2 на сервисе
<style>#respect td{vertical-align:top;}#respect figure{margin:7px;overflow:hidden;width:35px;}#respect figcaption{font-size:0.9em;}.tipsy-inner{min-width:40px!important;max-width:800px!important;}</style> <script type="text/javascript"> $('div.post').map(function(){var postvote=Number($(this).find('div.post-rating a').text());if(postvote!=0){var UsID=$(this).find('li.pa-respect a').attr('href').replace(/\/respect\.php\?id=(\d+)/g,'$1');var PostID=$(this).find('div.post-content').attr('id').slice(1,-8);var tyt=$(this).find('.post-rating p');var TemaId,tmp_abort,Kto=[],Nuser=[],ava=[];function Clean(element){return element!=undefined;} $(tyt).on('mouseenter',function(){$(tyt).tipsy({trigger:'manual',gravity:'se',fade:true,html:true});var who='<table id="respect"><tr><td style="font-weight:bolder"> Оценили: </td></tr><tr>';tmp_abort=setTimeout(function(){ $.when($.get('/respect.php?id='+UsID),$.get('/respect.php?id='+UsID+'&p=2'),$.get('/respect.php?id='+UsID+'&p=3')).done(function(a1,a2,a3){ var data = a1[0]+a2[0]+a3[0]; var self=$(data).find('#pun-respect #pun-main tbody tr:has(a)');$(self).each(function(i){TemaId=$(this).find('td.tcr a').attr('href').replace(/http:\/\/(.*?)\/viewtopic\.php\?pid=(\d+)\#p(\d+)/g,'$2');if(PostID===TemaId){Kto[i]=$(this).find('td.tc3 a').attr('href').replace(/http:\/\/(.*?)\/profile\.php\?id=/g,'');}});$.getJSON('/api.php?method=users.get&limit=60&user_id='+Kto.filter(Clean)+'&fields=username,avatar',function(json){var xx=json.response.users;for(var i in xx){var val=xx[i];Nuser[i]=val.username;ava[i]=val.avatar;if(ava[i]==''){ava[i]='http://forumstatic.ru/files/0000/14/1c/20038.jpg'};} for(var j=0;j<ava.length;j++){who+='<td><figure><img style="border:3px solid #696969;border-radius:2px;" src="'+ava[j]+'" width="28" height="28"><figcaption>'+Nuser[j]+'</figcaption></figure></td>';if(j%6==5)who+='</tr><tr>';} who+='</tr></table>';$(tyt).attr('original-title',who).tipsy('show');return false;});});},1200);}).on('mouseleave',function(){$('.tipsy').hide(300);clearTimeout(tmp_abort)});}}); </script>
в данном варианте добавляется следующие 2 страницы к запросу и выдаётся 20+20+20=60 оценок
метод конечно жутко костыльный, может глядя на это Макс изменит систему выдачи оценок поста, и сделает её привязанной к конкретному id сообщения с изменённой репутацией
Поделиться8Пт, 18 Сен 2015 20:02:33
Доска почёта или Рейтинг самых уважаемых v.4
выкладываю пока только второй вариант оформления доски почёта
чем отличается эта версия от предыдущих?
1. вся нужная информация (ранжирование по уважению, аватары и т.д.) получается одним запросом, а не 11 как в предыдущих вариантах,
2. пользователям неустановившим себе аватар он присваивается автоматически, при этом дефолтные аватары для мужчин и женщин отличаются
3. по клику на автар можно перейти в Профиль пользователя, а во всплывающей подсказке присутствует ссылка на все его сообщения
4. результат уважения отображается в виде суммы плюсов и минусов поставленных пользователю
размещать доску почёта можно в объявлении, сайдбаре или на отдельной странице, для отображения в нужном месте, для начала помещаем туда элемент таблицы
<table id="userhero2" style="width: auto; margin: 0 auto;"></table>
а затем и сам код
<style> #userhero2 img{ border:1px solid #696969;border-radius: 9000em; } #userhero2 figure { display:block; height: 50px; width: 50px; position: relative; overflow:hidden; text-align: center; } #userhero2 figcaption { display:block; width:44px; background:#99CC33; background:rgba(153,204,0,.8); border-radius: 0 0 7px 7px; box-shadow: 0 0 5px #40310A inset; color: #fff; font-size: 0.8em; font-weight: bold; height: 15px; left: 3px; position: absolute; top: 30px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 ); } </style> <script type="text/javascript"> $(function(){ $.get('/api.php', { method: 'users.orderedList', sort_by: 'respect', sort_dir:'desc', limit:10, fields: 'user_id,username,avatar,respect_plus,respect_minus,sex'}, function(data) { var x = data.response.users; for (var i in x) {var v = x[i],Usex = v.sex,ava = v.avatar; if (ava == '' && Usex == 2) {ava = 'http://forumstatic.ru/files/0000/14/1c/45689.png'} if (ava == '' && Usex <= 1){ava = 'http://forumstatic.ru/files/0000/14/1c/70618.png'}; var plus = v.respect_plus,minus = v.respect_minus,summa=Number(plus-minus),numPlus = Number(summa)/10, Inf = '<strong>'+v.username+'</strong></br><a href=\'/search.php?action=show_user_posts&user_id='+v.user_id+'\' style=\'color:#fff;font-size:0.8em;\' target=\'_blank\'>Показать</br> сообщения</a>', person = '<td style="padding:0;"><figure><a href="/profile.php?id='+v.user_id+'"> <img id="heroes" src="'+ava+'" width="42" height="42" original-title="'+Inf+'"></a><figcaption style="top:50px;">+'+summa+'</figcaption></figure></td>'; $('#heroes').tipsy({live: true,gravity: 's',fade: true,html: true,delayOut: 1500}); $('#userhero2').append(person); } }, 'json' ); $('#userhero2 td figure').live('mouseenter mouseleave', function(event) { if (event.type == 'mouseenter') { $(this).find('figcaption').stop().animate({'top':'30px'}, 200, function(){}); } else { $(this).find('figcaption').stop().animate({'top':'50px'}, 200, function(){}); } }); }); </script>
Поделиться9Сб, 5 Дек 2015 15:31:38
продолжим тему
до сих пор актуально автоматическое цветовыделение ников по группам,
поскольку административный состав и составы других групп меняются довольно таки часто,
при этом каждый раз кого-то вписывать/выписывать вручную в скрипт или css код не комильфо,
поэтому предлагаю такой простенький скрипт
Автоматическое цветовыделение ников по группам
<!-- автоматическое цветовыделение ников по группам --> <script language="javascript"> $(document).ready(function(){ $.getJSON('/api.php?method=users.orderedList&limit=50&group_id=1,2&fields=user_id,username,group_id', function(json) { var x = json.response.users; for (var i in x) { var v = x[i], s = '("*"):not(.pl-email):not(#navprofile) > a[href$="/profile.php?id='+v.user_id+'"], a[href*="javascript:to(\''+v.username+'\')"]'; if (v.group_id == '1') {$(s).css('color', 'red')}; if (v.group_id == '2') {$(s).css('color', 'blue')}; } });}); </script>
начну издалека:
на каждом форуме есть набор JavaScript переменных, нас интересует работа с группами, это переменная GroupID
вот таблица стандартных групп
Группа | ID группы |
Администраторы | 1 |
Модераторы | 2 |
Гости | 3 |
Обычные пользователи | 4 |
все остальные группы вы создаёте сами и соответственно вам должен быть известен их ID
в целом скрипт уже настроен на отображение админ состава любого форума
администраторы - красным цветом
модераторы - синим
если нужно поработать с какой-то дополнительной группой, то обращаем внимание прежде на 4-ую строку скрипта, в которой осуществляется запрос:
$.getJSON('/api.php?method=users.orderedList&limit=100&group_id=1,2&fields=user_id,username,group_id',
в ней выделены цифры групп, данные которых мы запрашиваем, в данном случаем админ.состав,
запрос на дополнительную группу добавляется через запятую
с этим понятно, теперь смотрим на строки скрипта №9 и 10, в них каждой группе присваивается свой цвет
if (v.group_id == '1') {$(s).css('color', 'red')};
if (v.group_id == '2') {$(s).css('color', 'blue')};
как добавить сюда свою группу или поменять цвет, думаю понятно
p.s.
обращаю ваше внимание, что на сервере стоит лимит на выдаваемые данные, он равен 100, так что одновременный запрос можно сделать только на 100 человек (администраторы, модераторы и т.д.) не более
Поделиться10Пт, 8 Апр 2016 21:04:08
Просмотр репутации поста а-ля Вконтакте v.2.1
отличия от предыдущих версий:
1. в отдельном окне
2. отображаются оценки (кто какую поставил)
3. скрипт работает как с новыми, так и со старыми постами, всё делается одним запросом (быстрее)
4. проголосовавшие отображаются в порядке голосования, последние последними
5. работает с сообщением с "нулевым" рейтингом (в котором сначала поставили + а потом - и наоборот)
6. ник проголосовавшего является ссылкой на его профиль
7. табличку можно закрыть кликом в любом месте
<style> #respect td{vertical-align:top;}#respect figure{margin:7px;word-wrap:break-word;width:44px;}#respect figure:hover img:first-child{display:none;}#respect figcaption{font-size:0.9em;}.jGrowl .rating_theme {margin:30px;text-align:center;width: auto;} .vote{position:absolute;border-radius: 9em;box-shadow:0 3px 5px 1px #000000;-webkit-box-shadow:0 3px 5px 1px #000000;} </style> <!--Репутация поста v.2.1--> <script type="text/javascript"> var stm = 600; //время появления окна репутации при наведении курсора на оценку (в миллисекундах) var tm = 5; //время через которое закроется окно с репутацией в секундах $('div.post').map(function(){var PostID=$(this).find('div.post-content').attr('id').slice(1,-8);var tyt=$(this).find('.post-rating p');var tmp_abort,Kto=[],Nuser=[],ava=[],vote=[],iso=[];$(tyt).on('mouseenter',function(){var who='<table id="respect"><tr><td style="font-weight:bolder"> Oценили: </td></tr><tr>';tmp_abort=setTimeout(function(){$.get('/api.php',{method:'post.getVotes',limit:100,post_id:PostID,fields:'user_id,username,avatar,value,datetime'},function(data){var x=data.response.votes;for(var i in x){var v=x[i];Kto[i]=v.user_id;Nuser[i]=v.username;vote[i]=v.value;if(vote[i]==1){vote[i]='http://petushki-city.ru/files/0002/10/47/26356.png';}else{vote[i]='http://petushki-city.ru/files/0002/10/47/46689.png';};ava[i]=v.avatar;if(ava[i]==''){ava[i]='http://forumstatic.ru/files/0000/14/1c/20038.jpg'};iso[i]=v.datetime;} for(var j=0;j<ava.length;j++){who+='<td><figure><img class="vote" src='+vote[j]+'><img style="border:3px solid #696969;border-radius:2px;" src="'+ava[j]+'" width="36" height="36" title="'+iso[j]+'"><figcaption><a href="/profile.php?id='+Kto[j]+'" style="color:#fff !important;">'+Nuser[j]+'</a></figcaption></figure></td>';if(j%7==6) who+='</tr><tr>';}who+='</tr></table>';$.jGrowl(who,{theme:'rating_theme',life:tm*1000});},'json');},stm);}).on('mouseleave',function(){clearTimeout(tmp_abort);});$('body').on('click',function(){$('.jGrowl-close').trigger('click');});}); </script>
в перспективе можно сделать как вКонтакте
если проголосовало не более 6 персон, то они отображаются во всплывающей подсказке, чтоб посмотреть остальных жмётся ссылка "Понравилось людям" и открывается отдельное окно по-центру с полным списком (таблицей) проголосовавших
демонстрацию работы можно посмотреть на этом форуме удержав курсор на оценке
Поделиться11Сб, 16 Апр 2016 14:55:36
Просмотр репутации поста а-ля Вконтакте v.2.2
отличия от предыдущих версий:
1. оценившие сообщение пользователи представлены в убывающем порядке, т.е те кто проголосовал последними отображаются первыми (как в контакте)
2. при наведении курсора на никнейм проголосовавшего отображаются дата и время оценки в том формате, который у вас установлен на форуме
3. если проголосовали не более 5 пользователей, то они отображаются во всплывающей подсказке, если больше, то предлагается посмотреть всех в отдельном окне (как в контакте)
4. аватар кликабелен и является ссылкой в профиль голосовавшего
закрыть окно можно нажатием в любом месте страницы
в подсказке
в отдельном окне по-центру полный список
в html-низ:
<style> /* таблица во всплывающей подсказке */ #respect td{vertical-align:top;} #respect figure{margin:2px;word-wrap:break-word;width:44px;} #respect figure:hover img.vote{display:none;} #respect figcaption{font-size:0.8em;margin-top:-5px;} /* стиль окна а-ля вКонтакте */ .jGrowl .rating_theme {opacity: 1;padding: 3px;text-align:center;width: 485px !important;} .jGrowl .rating_theme .jGrowl-message {background: #fff; padding: 2px;} .jGrowl .rating_theme .jGrowl-header {background: #597ba5;font-size: 1.09em;height: 22px;} .jGrowl .rating_theme .person{width:78px; height:78px; } /* стиль изображения оценки */ .vote{position:absolute;border-radius: 9em;box-shadow:0 3px 5px 1px #000000;-webkit-box-shadow:0 3px 5px 1px #000000;} /* таблица в окне а-ля вКонтакте */ #vse tbody{max-height:520px!important;display:block;overflow-y:auto;overflow-x:hidden;} #vse td{vertical-align:top;} #vse figure{margin:5px;word-wrap:break-word;width:82px; -webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden;} #vse figure:before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:#597ba5;height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;} #vse figure:hover img.vote{display:none;} #vse figure:hover:before,#vse figure:focus:before,#vse figure:active:before{left:0;right:0;} #vse figcaption{color: #2b587a;font-size:0.9em;} /* настройки всплывающей подсказки */ .tipsy-inner {min-width : 40px!important;max-width : 800px!important;} .tipsy-inner .person {width:36px; height:36px; border-radius:2px;} .tipsy-inner .prof {color:#fff !important;} .tipsy-inner .prof:hover{ text-decoration:underline!important;} .tipsy-se .tipsy-arrow {left:100%!important;margin-left:-22px;} .prof {text-decoration: none !important;} </style> <!--Репутация поста v.2.2--> <script type="text/javascript"> $('div.post').map(function() {var PostID=$(this).find('div.post-content').attr('id').slice(1,-8);var tyt=$(this).find('.post-rating p');var tmp_abort,timer,ava,vote,kr=[];function cl(){$('.tipsy').fadeOut(200);setTimeout(function(){$('.tipsy').remove();},200);};function ton(){timer=setTimeout(function(){cl();},500)}$(tyt).on('mouseenter',function(){$(this).tipsy({fade:!0,gravity:'se',trigger:'manual',html:!0});var w='<table id="respect"><tr><td style="font-weight:bolder"> Oценили: </td></tr><tr>';var f='<table id="vse" width="100%"><tr>';tmp_abort=setTimeout(function(){$.get('/api.php',{method:'post.getVotes',sort_dir:'desc',limit:100,post_id:PostID,fields:'user_id,username,avatar,value,datetime'},function(data){var x=data.response.votes;for(var i in x){var v=x[i];vote=v.value;if(vote==1){vote='http://petushki-city.ru/files/0002/10/47/26356.png';}else{vote='http://petushki-city.ru/files/0002/10/47/46689.png';};ava=v.avatar;if(ava==''){ava='http://forumstatic.ru/files/0000/14/1c/20038.jpg'};kr[i]='<td><figure><img class="vote" src="'+vote+'"><a class="prof" href="/profile.php?id='+v.user_id+'"><img class="person" src="'+ava+'" title="'+v.datetime+'"><figcaption><p>'+v.username+'</p></figcaption></a></figure></td>';}w+=kr.slice(0,5).join(' ');w+='</tr></table>';if(kr.length>=6){w+='<p id="showt" style="cursor:pointer;font-weight:bold;margin:5px;"> Показать всех </p>';}$(tyt).attr('original-title',w).tipsy('show');for(var k=0;k<kr.length;k++){f+=kr[k];if(k%5==4){f+='</tr><tr>';}}f+='</tr></table>';$('#showt').on('click',function(){cl();$.jGrowl(f,{sticky:!0,position:'center',header:kr.length+' оценили',theme:'rating_theme'});});},'json');},600);}).on('mouseleave',function(){clearTimeout(tmp_abort);ton();$('.tipsy').on('mouseover',function(){clearTimeout(timer);});$('.tipsy').on('mouseout',function(){ton();});});$('body').on('click',function(){$('.rating_theme .jGrowl-close').trigger('click');}); }); </script>
работу данного скрипта можно посмотреть здесь, удержав курсор на оценке
или вот к примеру ссылка с сообщением с 10 оценками - Фото с форумчанами 6...
всплывающая подсказка смещена влево относительно оценки для корректного отображения в стилях, где ширина выставлена 100%
Поделиться12Вт, 26 Апр 2016 21:06:43
Скрипт Просмотр репутации поста а-ля Вконтакте v.2.2 оптимизирован:
1. убраны лишние телодвижения, ненужные переменные и т.д.
2. изменён формат даты оценки, которая отображается при наведении курсора на аватар,
Внимание! старый формат вывода даты в предыдущей версии скрипта, скоро перестанет поддерживаться сервисом! соответственно не будет работать у тех, кто использует старую версию скрипта
3. добавлена анимация при просмотре полного списка
Поделиться13Чт, 28 Апр 2016 11:11:06
Аватар автора поста в правой колонке
(Работает на Главной, на странице форума и в Активных темах)
Бонус: Кликабельность ника пользователя в правой колонке! (подключается параметром в скрипте)
Если установлен скрипт "Цветовыделение ников по группам" (1 или 2) - ники в правой колонке цветовыделяются автоматически! Для отображения аватарок под любым юзером необходимо включить Поиск Пользователей для всех групп
(Администрирование - Группы - Редактировать)В HTML низ:<!--Аватар автора поста в правой колонке-->
<style type="text/css">
.user-profile{
padding-left:0!important;
background:none!important;
}
em.user-avatar{float:left;height:40px;border-color:inherit;}
.tcr .user-avatar>img.ava{
width:30px; height:auto;
margin:4px 6px 3px -2px;
border-radius:2px;
border:solid 1px;
border-color:inherit;
}
.tcr .user-avatar>.on_ {
float:right;z-index:100;
position:relative;
margin:3px 6px 0 -13px;
border:1px solid #606060;
display:block!important;
height:6px;width:6px;
background: url(http://dizayn.mybb.ru/files/000a/45/08/79148.gif);
}
</style>
<script>var user_profile_lnk = 1; //Делать ники авторов кликабельными? 0 - нет, 1 - да
</script><script src="http://forumstatic.ru/files/0015/c4/3f/45681.js"></script>Вариант с кликабельностью Аватарки:
В HTML низ:<!--Аватар автора поста в правой колонке-->
<style type="text/css">
.user-profile{
padding-left:0!important;
background:none!important;
}
em.user-avatar {
float: left; min-height: 40px;
border-color: inherit;
position: relative;
}
.tcr .user-avatar img.ava{
width:30px; height:auto;
margin:4px 6px 3px -2px;
border-radius:2px;
border:solid 1px;
border-color:inherit;
}
.tcr .user-avatar>.on_ {
float:right;z-index:100;
position:relative;
margin:3px 6px 0 -13px;
border:1px solid #606060;
display:block!important;
height:6px;width:6px;
background: url(http://dizayn.mybb.ru/files/000a/45/08/79148.gif);
}
</style>
<script>var user_profile_lnk = 1; //Делать ники авторов кликабельными? 0 - нет, 1 - да
</script><script src="http://forumstatic.ru/files/0016/0b/c8/45681.js"></script>
Отредактировано Alex_63 (Сб, 28 Мар 2020 16:58:17)
Поделиться14Пт, 29 Апр 2016 00:09:21
Будет время - попробую
короче я добавил здесь везде (на главной, в темах, в списке участников, при просмотре почты) пока что так, а кликабельность никнейма убрал (лучше сделать кликабельным аватар, потом)
неактуально. Alex_63
Отредактировано Alex_63 (Сб, 28 Мар 2020 16:58:58)
Поделиться15Пт, 29 Апр 2016 00:47:47
Да, репутация нам не нужна. Не пользуемся...
тогда так, скрипт покороче и весит не 2кб меньше
неактуально. Alex_63
Отредактировано Alex_63 (Сб, 28 Мар 2020 16:59:20)
Поделиться16Вт, 3 Май 2016 16:47:08
Сейчас Просмотр репутации поста а-ля Вконтакте v.2.2 + Новый Вариант Уведомлений о новых Личных сообщениях можно протестировать прямо тут, на ЕТП,
Для теста уведомлений, можно отослать письмо в Личку самому себе, зайдя в свой Профиль:
Скриншот итога:
Поделиться17Пн, 13 Мар 2017 21:06:55
Вариант скрипта Доска почёта или Рейтинг самых уважаемых v.4 © Romych
С Выводом юзеров только из указанных групп
Табличка, куда будут выводиться юзеры - ставим куда нужно
<table id="userhero2" style="width: auto;"></table>
В HTML низ
<style>
#userhero2 img{
border:1px solid #696969;border-radius:50%;
}
#userhero2 figure {
display:block;
height: 50px;
width: 50px;
position: relative;
overflow:hidden;
text-align: center;
}
#userhero2 figcaption {
display:block;
width:44px;
background:#99CC33;
background:rgba(153,204,0,.8);
border-radius: 0 0 7px 7px;
box-shadow: 0 0 5px #40310A inset;
color: #fff; font-size: 0.8em;
font-weight: bold;
height: 15px;
left: 3px;
position: absolute;
top: 30px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );
}
</style>
<script type="text/javascript">
$(function(){
$.get( '/api.php', { method: 'users.orderedList', group_id: [1,2,4].join(','),sort_by: 'respect', sort_dir:'desc', limit:10, fields: 'user_id,username,avatar,respect_plus,respect_minus,sex'}, function(data) {
var x = data.response.users;
for (var i in x) {
var v = x[i];
var Usex = v.sex;
var ava = v.avatar;
if (ava == '' && Usex == 2) {ava = 'http://forumstatic.ru/files/0000/14/1c/45689.png'}
if (ava == '' && Usex <= 1){ava = 'http://forumstatic.ru/files/0000/14/1c/70618.png'};
var plus = v.respect_plus;
var minus = v.respect_minus
var summa= Number(plus-minus);
var numPlus = Number(summa)/10;
var Inf = '<strong>'+v.username+'</strong></br><a href=\'/search.php?action=show_user_posts&user_id='+v.user_id+'\' style=\'color:#fff;font-size:0.8em;\' target=\'_blank\'>Показать</br> сообщения</a>';
var person = '<td style="padding:0;"><figure><a href="/profile.php?id='+v.user_id+'"> <img id="heroes" src="'+ava+'" width="42" height="42" original-title="'+Inf+'"></a><figcaption style="top:50px;">+'+summa+'</figcaption></figure></td>';
$('#heroes').tipsy({live: true,gravity: 's',fade: true,html: true,delayOut: 1500});
$('#userhero2').append(person);
}
}, 'json' );
$('#userhero2 td figure').live('mouseenter mouseleave', function(event) {
if (event.type == 'mouseenter') {
$(this).find('figcaption').stop().animate({'top':'30px'}, 200, function(){});
} else {
$(this).find('figcaption').stop().animate({'top':'50px'}, 200, function(){});
} }); });
</script>Красным - группы, из которых выводим пользователей, и максимальное кол-во выводимых ников(вторая цифра)
Поделиться18Ср, 7 Мар 2018 22:58:20
на тему рейтинга позитивных/негативных.
писькомерка среди юзеров плюсами - это круто, но было бы более информативно применить это на топиках.
не знаю, есть ли возможность такая, но вот в копилку идей такие штуки:
1. виджет с рейтингом самых заплюсованных топиков
* первый пост которых собирает максимум оценок
* ИЛИ которые в целом собрали много оценок
2. выделение в списке тем топика, первый пост которого собирает более N плюсов (по аналогии выделения опросов в списке тем)
3. (это шото из серии совсем космического, но вдруг) изменение отображения рейтинга поста по типу укозовских "звездочек" (оценка от 1 до 5 баллов от участника = отображается среднее арифметическое) + вывод оценки первопоста на страницу списка тем.
Поделиться19Чт, 8 Мар 2018 00:27:10
вот в копилку идей такие штуки
я эти идеи уже давно озвучивал - Концепция развития MyBB (со своей колокольни) для реализации нужно дорабатывать api
Добавлено спустя 3 минуты 30 секунд:
хотя ... думаю, кое что можно сделать, попробую
Добавлено спустя 8 минут 29 секунд:
не, нужна доработка иначе для реализации потребуется много запросов, мои скрипты с которыми тут в прошлом попадали под запрет и цензуру от сервиса