Вывод аватарок друзей, списки Online и Offline

Готовые уроки IFrame + ВКонтакте API

Вывод аватарок друзей, списки Online и Offline

Сообщение Александр » 06 июн 2011, 22:10

Вывод аватарок друзей, списки Online и Offline
JavaScript

В этом уроке показано:
- как узнать список друзей
- разделение друзей на online и offline
- вывод аватарок друзей
- правильные окончания (1 друг, 2 друга, 5 друзей)
- использование изображения прелоадера

Изображение

Я использую jQuery, но если очень нужно, то можно обойтись без этой библиотеки.

code.js
  1. /*
  2.  
  3.  https://flapps.ru/forum - форум о создании приложений
  4.  
  5. */
  6.  
  7. $(document).ready(function(){
  8.     VK.init(function() {
  9.     // выполняем запрос получения списка друзей
  10.     VK.api("friends.get", {fields:"online,photo"}, function(data) {
  11.         // узнаем количество друзей
  12.         var frCount = data.response.length;
  13.  
  14.         var onlineCount = 0;
  15.         var offlineCount = 0;
  16.  
  17.         var onlineStr = ''; // html код списка друзей Online
  18.         var offlineStr = ''; // html код списка друзей Offline
  19.  
  20.         for (var i=0; i<frCount; i++) {
  21.             if (data.response[i].online == 1) { // если онлайн
  22.                 onlineCount++; // прибавляем счетчик онлайн пользователей
  23.                 onlineStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';
  24.             }
  25.             else {
  26.                 offlineCount++;
  27.                 offlineStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';
  28.             }
  29.         }
  30.  
  31.         $("#totalCount").html('У вас ' + frCount + ' ' + num_ending(frCount));
  32.         $("#onCount").html(onlineCount + ' ' + num_ending(onlineCount) + ' онлайн');
  33.         $("#online").html(onlineStr);
  34.         $("#offCount").html(offlineCount + ' ' + num_ending(offlineCount) + ' оффлайн');
  35.         $("#offline").html(offlineStr);
  36.        
  37.         // скрываем прелоадер
  38.         $('#loader').fadeOut(1000);
  39.     });
  40.     });
  41. });
  42.  
  43.  
  44. function num_ending(number) {
  45.     var endings = ['друзей','друг','друга'];
  46.     var num100 = number % 100;
  47.     var num10 = number % 10;
  48.     if (num100 >= 5 && num100 <= 20) {
  49.         return endings[0];
  50.     } else if (num10 == 0) {
  51.         return endings[0];
  52.     } else if (num10 == 1) {
  53.         return endings[1];
  54.     } else if (num10 >= 2 && num10 <= 4) {
  55.         return endings[2];
  56.     } else if (num10 >= 5 && num10 <= 9) {
  57.         return endings[0];
  58.     } else {
  59.         return endings[2];
  60.     }
  61. }
  62.  
  63. /* flapps.ru */


index.html
  1. <html>
  2. <head>
  3. <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  4. <script src="js/code.js" type="text/javascript"></script>
  5. <link rel="stylesheet" href="css/style.css" type="text/css" />
  6. <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>
  7.  
  8. </head>
  9. <body>
  10. <div id="loader"><img src="http://vk.com/images/upload.gif" alt="" width="32" height="8" border="0" /></div>
  11.  
  12. <div id="totalCount"></div>
  13.  
  14. <div id="onCount"></div>
  15. <div id="online"></div>
  16.  
  17.  
  18. <div id="offCount"></div>
  19. <div id="offline"></div>
  20.  
  21.  
  22. <br />
  23. <a href="https://flapps.ru/" target="_blank">https://flapps.ru/</a>
  24.  
  25. </body>
  26. </html>


style.css
  1. body {
  2.     padding:0;
  3.     margin:0;
  4.     font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
  5.     font-size: 11px;
  6. }
  7.  
  8. #online img, #offline img{
  9.     padding:0;
  10.     margin:0;
  11. }
  12. #totalCount,
  13. #onCount, #online,
  14. #offCount, #offline {
  15.     display:block;
  16.     clear:both;
  17. }
  18. #totalCount, #online, #offline {
  19.     margin-bottom:20px;
  20. }
  21.  
  22. /* изображение прелоадер */
  23. #loader {
  24.     width: 100%;
  25.     height: 100%;
  26.     position: fixed;
  27.     text-align: center;
  28.     z-index: 1000;
  29.     background-color: #fff;
  30.     opacity: 0.80;
  31. }
  32.  
  33. #loader img{
  34.     position: absolute;
  35.     left: 50%;
  36.     top: 50%;
  37.     margin: -40px 0 0 -40px;
  38. }


Приложение должно быть включено.
Состояние: Приложение включено и видно всем.
В настройках приложения должен быть разрешен доступ к друзьям.

Исходник: Чтобы увидеть ссылку - зарегистрируйтесь

За это сообщение автора Александр поблагодарили - 4:
amadeusgil, Gas, kostya74, oleg0032
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Вывод аватарок друзей, списки Online и Offline

Сообщение revizor » 07 июн 2011, 16:53

хороши друзья )
Аватара пользователя
revizor
FL Team
FL Team
 
Сообщения: 1034
Зарегистрирован: 18 ноя 2009, 20:22
Благодарил (а): 6 раз.
Поблагодарили: 49 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение manok » 12 июн 2011, 20:33

Не работает. По-крайней мере, может раньше и работало, но сейчас нет. Идёт меню "загрузки" и зависает.

p.s. ff 4.0
manok

 
Сообщения: 1
Зарегистрирован: 20 мар 2011, 13:53
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение Александр » 13 июн 2011, 19:03

manok
Исходник скачал? Там чуть не тот метод был. Вместо friends.get, оставил getProfiles. Поправь вручную как в тексте урока или перекачай исходник.
Если хочешь сам замечать и исправлять ошибки, используй Charles.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение kostya74 » 10 авг 2011, 00:42

Я залил файлы исходника на сайт, указал адресс iframe, но всё равно идёт постоянно загрузка, всё включил, почему так может быть?
kostya74

 
Сообщения: 59
Зарегистрирован: 09 авг 2011, 11:25
Благодарил (а): 14 раз.
Поблагодарили: 0 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение kostya74 » 10 авг 2011, 10:10

всё нашёл у себя ошибку. всё работает спс
kostya74

 
Сообщения: 59
Зарегистрирован: 09 авг 2011, 11:25
Благодарил (а): 14 раз.
Поблагодарили: 0 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение amadeusgil » 17 авг 2011, 15:06

kostya74, у меня проблема как у тебя. Поделись решением. В чем проблема?
amadeusgil

 
Сообщения: 2
Зарегистрирован: 17 авг 2011, 15:04
Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение amadeusgil » 17 авг 2011, 15:10

ок. Вроде разобрался: нужно права доступа поставить. Но другая проблема: не распознает кирилицу. Как поправить?
amadeusgil

 
Сообщения: 2
Зарегистрирован: 17 авг 2011, 15:04
Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение garymar » 17 авг 2011, 17:15

Привет! А как можно сделать определение пользователя онлайн когда он находится в самом приложении?? То есть, юзер зашел в приложение - онлайн, вышел из него (закрыл браузер) - оффлайн... Как это проконтролировать...???
garymar

 
Сообщения: 30
Зарегистрирован: 26 авг 2010, 14:57
Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение Александр » 17 авг 2011, 21:11

amadeusgil писал(а):Но другая проблема: не распознает кирилицу. Как поправить?

кодировка файла utf-8 без BOM.

garymar
Как-то записывать в базе у себя на сервере находится ли пользователь в приложении. Проверять каждые n минут.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

След.

Вернуться в Уроки IFrame ВКонтакте



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0