Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Новые возможности с применением API (тест)


Новые возможности с применением API (тест)

Сообщений 1 страница 17 из 17

1

В данный период на сервисе проходит тестирование API в том варианте, в котором интерфейс был написан 2 года назад. Методы будут изменяться и дополняться.
В данной теме будут выкладываться готовые решения с применением API.

+2

2

Поскольку меня всегда интересовала возможность форум внешне привести к виду платных форумных движков, то большинство моих экспериментов связанно именно с добавлением аватаров и всяких всплывающих информерах. Итак

Всплывающий мини-профиль при наведении курсора на ник в viewforum.php

пользователям с отсутствующим аватаром добавляется дефолтный по половому признаку, в случае когда указан пол
мужской и женский дефолтные аватары
http://forumfiles.ru/files/0000/14/1c/45689.pnghttp://forumfiles.ru/files/0000/14/1c/70618.png

вид всплывающего мини-профиля
http://s6.uploads.ru/t/ad67V.jpg

установка в 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(/&nbsp;/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://forumfiles.ru/files/0000/14/1c/45689.png'}
	if (ava == '' && sex <= 1)
	{ava = 'http://forumfiles.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>

+2

3

Отображение аватаров при просмотре ЛС.

http://s7.uploads.ru/t/tmXY5.jpg

в 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://forumfiles.ru/files/0000/14/1c/20038.jpg'};
	}	
	$('#messages td.tc2 a').map(function () {
	$(this).prepend('<img src="http://forumfiles.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>

+2

4

Отображение аватаров в списке Участников.

в 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://forumfiles.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>

+2

5

Изменяем отображение именинников.

http://sa.uploads.ru/EbtTO.jpg
возраст и ник отображаются при наведении курсора на аватар

ставить лучше всего в Описание (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] = 'http://forumfiles.ru/files/0000/14/1c/45689.png'}
if (!ava[i] && sex[i] <= 1){ava[i] = 'http://forumfiles.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>

+2

6

Просмотр репутации поста а-ля Вконтакте устарел

живой пример работы можно посмотреть на этом форуме
(если при наведении на оценку ничего не отображается, значит эта оценка выставлена оооочернь давно)

http://s2.uploads.ru/t/gZHPs.jpg

курсор нужно подержать на оценке пару секунд, это сделано во избежание случайных запросов

в 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://forumfiles.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 оценок на страницу

+1

7

как просматривать оценок поста больше чем 20?
для этого применяем методы jquery 1.5.2

Просмотр репутации поста а-ля Вконтакте
с подключением  jquery 1.5.2 на сервисе

http://s6.uploads.ru/sn0M2.jpg

Код:
<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://forumfiles.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 сообщения с изменённой репутацией

0

8

Доска почёта или Рейтинг самых уважаемых v.4
http://s2.uploads.ru/NvqxV.jpg

выкладываю пока только второй вариант оформления доски почёта
чем отличается эта версия от предыдущих?
1. вся нужная информация (ранжирование по уважению, аватары и т.д.) получается одним запросом, а не 11 как в предыдущих вариантах,
2. пользователям неустановившим себе аватар он присваивается автоматически, при этом дефолтные аватары для мужчин и женщин отличаются
3. по клику на автар можно перейти в Профиль пользователя, а во всплывающей подсказке присутствует ссылка на все его сообщения
4. результат уважения отображается в виде суммы плюсов и минусов поставленных пользователю

размещать доску почёта можно в объявлении, сайдбаре или на отдельной странице, для отображения в нужном месте, для начала помещаем туда элемент таблицы

Код:
<table id="userhero2" style="width: 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];
                var Usex = v.sex;
   var ava = v.avatar;
   if (ava == '' && Usex == 2) {ava = 'http://forumfiles.ru/files/0000/14/1c/45689.png'}
   if (ava == '' && Usex <= 1){ava = 'http://forumfiles.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>

ДЕМО

+3

9

продолжим тему
до сих пор актуально автоматическое цветовыделение ников по группам,
поскольку административный состав и составы других групп меняются довольно таки часто,
при этом каждый раз кого-то вписывать/выписывать вручную в скрипт или css код не комильфо,
поэтому предлагаю такой простенький скрипт

Автоматическое цветовыделение ников по группам

http://s7.uploads.ru/jKEYG.jpg

Код:
<!--  автоматическое цветовыделение ников по группам -->
<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 человек (администраторы, модераторы и т.д.) не более

+6

10

Просмотр репутации поста а-ля Вконтакте v.2.1

отличия от предыдущих версий:
1. в отдельном окне
2. отображаются оценки (кто какую поставил)
3. скрипт работает как с новыми, так и со старыми постами, всё делается одним запросом (быстрее)
4. проголосовавшие отображаются в порядке голосования, последние последними
5. работает с сообщением с "нулевым" рейтингом (в котором сначала поставили + а потом - и наоборот)
6. ник проголосовавшего является ссылкой на его профиль
7. табличку можно закрыть кликом в любом месте

http://s5.uploads.ru/Bk7Fy.jpg

Код:
<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://forumfiles.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>

в перспективе можно сделать как вКонтакте
http://s7.uploads.ru/LEzga.jpg
если проголосовало не более 6 персон, то они отображаются во всплывающей подсказке, чтоб посмотреть остальных жмётся ссылка "Понравилось людям" и открывается отдельное окно по-центру с полным списком (таблицей) проголосовавших
демонстрацию работы можно посмотреть на этом форуме удержав курсор на оценке

+5

11

Просмотр репутации поста а-ля Вконтакте v.2.2

отличия от предыдущих версий:
1. оценившие сообщение пользователи представлены в убывающем порядке, т.е те кто проголосовал последними отображаются первыми (как в контакте)
2. при наведении курсора на никнейм проголосовавшего отображаются дата и время оценки в том формате, который у вас установлен на форуме
http://s7.uploads.ru/YVsU2.jpg
3. если проголосовали не более 5 пользователей, то они отображаются во всплывающей подсказке, если больше, то предлагается посмотреть всех в отдельном окне (как в контакте)
4. аватар кликабелен и является ссылкой в профиль голосовавшего
закрыть окно можно нажатием в любом месте страницы

в подсказке
http://s3.uploads.ru/TqW0J.jpg

в отдельном окне по-центру полный список
http://sh.uploads.ru/kHGEf.jpg

в 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://forumfiles.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%

+10

12

Скрипт Просмотр репутации поста а-ля Вконтакте v.2.2 оптимизирован:
1. убраны лишние телодвижения, ненужные переменные и т.д.
2. изменён формат даты оценки, которая отображается при наведении курсора на аватар,
Внимание! старый формат вывода даты в предыдущей версии скрипта, скоро перестанет поддерживаться сервисом! соответственно не будет работать у тех, кто использует старую версию скрипта
3. добавлена анимация при просмотре полного списка
http://s0.uploads.ru/4uQNK.jpg

+8

13

Аватар автора поста в правой колонке(Работает на Главной, на странице форума и в Активных темах)http://s7.uploads.ru/J3vbe.png
Бонус: Кликабельность ника пользователя в правой колонке! (подключается параметром в скрипте)
Если установлен скрипт "Цветовыделение ников по группам" (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://forumfiles.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://forumfiles.ru/files/0016/0b/c8/45681.js"></script>

+10

14

Alex_63 написал(а):

Будет время - попробую

короче я добавил здесь везде (на главной, в темах, в списке участников, при просмотре почты) пока что так, а кликабельность никнейма убрал (лучше сделать кликабельным аватар, потом)

Код:
<style type="text/css">
.user-profile{padding-left:0!important;background:none!important;
}
em.user-avatar{float:left;height:32px;}
img.ava {
    border: 0.2em solid #557fae !important;
    border-radius: 9em;
    height: 28px;
    margin: 1px 5px 2px -2px;
    opacity: 0.85;
    width: 28px;
}
img.ava:hover {opacity: 1;}
img.on_ {
    background: url("http://forumfiles.ru/files/000a/45/08/79148.gif") no-repeat scroll 0 0;
    border: 1px solid #606060 !important;
    border-radius: 9em;
    display: block !important;
    float: right;
    height: 5px;
    margin: 3px 5px 0 -13px;
    position: relative;
    width: 5px;
    z-index: 100;
}
</style>
<script src="http://forumfiles.ru/files/0000/14/1c/50460.js"></script>

+2

15

прогресссссс написал(а):

Да, репутация нам не нужна. Не пользуемся...

тогда так, скрипт покороче и весит не 2кб меньше ;)

Код:
<style type="text/css">
.user-profile{padding-left:0!important;background:none!important;
}
em.user-avatar{float:left;height:32px;}
img.ava {
    border: 0.2em solid #557fae !important;
    border-radius: 9em;
    height: 28px;
    margin: 1px 5px 2px -2px;
    opacity: 0.85;
    width: 28px;
}
img.ava:hover {opacity: 1;}
img.on_ {
    background: url("http://forumfiles.ru/files/000a/45/08/79148.gif") no-repeat scroll 0 0;
    border: 1px solid #606060 !important;
    border-radius: 9em;
    display: block !important;
    float: right;
    height: 5px;
    margin: 3px 5px 0 -13px;
    position: relative;
    width: 5px;
    z-index: 100;
}
</style>
<script src="http://forumfiles.ru/files/0012/b1/41/94852.js"></script>

+1

16

Сейчас  Просмотр репутации поста а-ля Вконтакте v.2.2 + Новый Вариант Уведомлений о новых Личных сообщениях можно протестировать прямо тут, на ЕТП,
Для теста уведомлений, можно отослать письмо в Личку самому себе, зайдя в свой Профиль:
http://s5.uploads.ru/kYJPX.png



Скриншот итога:

http://s3.uploads.ru/MQtN4.png

+5

17

Вариант скрипта Доска почёта или Рейтинг самых уважаемых 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://forumfiles.ru/files/0000/14/1c/45689.png'}
   if (ava == '' && Usex <= 1){ava = 'http://forumfiles.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>

Красным - группы, из которых выводим пользователей, и максимальное кол-во выводимых ников(вторая цифра)

+2


Вы здесь » Единый форум поддержки » Новые возможности форумов » Новые возможности с применением API (тест)