JavaScript
В этом уроке показано:
- как узнать список друзей
- разделение друзей на online и offline
- вывод аватарок друзей
- правильные окончания (1 друг, 2 друга, 5 друзей)
- использование изображения прелоадера
Я использую jQuery, но если очень нужно, то можно обойтись без этой библиотеки.
code.js
Код: Выделить всё
/* https://flapps.ru/forum - форум о создании приложений */ $(document).ready(function(){ VK.init(function() { // выполняем запрос получения списка друзей VK.api("friends.get", {fields:"online,photo"}, function(data) { // узнаем количество друзей var frCount = data.response.length; var onlineCount = 0; var offlineCount = 0; var onlineStr = ''; // html код списка друзей Online var offlineStr = ''; // html код списка друзей Offline for (var i=0; i<frCount; i++) { if (data.response[i].online == 1) { // если онлайн onlineCount++; // прибавляем счетчик онлайн пользователей 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>'; } else { offlineCount++; 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>'; } } $("#totalCount").html('У вас ' + frCount + ' ' + num_ending(frCount)); $("#onCount").html(onlineCount + ' ' + num_ending(onlineCount) + ' онлайн'); $("#online").html(onlineStr); $("#offCount").html(offlineCount + ' ' + num_ending(offlineCount) + ' оффлайн'); $("#offline").html(offlineStr); // скрываем прелоадер $('#loader').fadeOut(1000); }); });}); function num_ending(number) { var endings = ['друзей','друг','друга']; var num100 = number % 100; var num10 = number % 10; if (num100 >= 5 && num100 <= 20) { return endings[0]; } else if (num10 == 0) { return endings[0]; } else if (num10 == 1) { return endings[1]; } else if (num10 >= 2 && num10 <= 4) { return endings[2]; } else if (num10 >= 5 && num10 <= 9) { return endings[0]; } else { return endings[2]; }} /* flapps.ru */
Код: Выделить всё
<html><head><script src="js/jquery-1.6.1.min.js" type="text/javascript"></script><script src="js/code.js" type="text/javascript"></script><link rel="stylesheet" href="css/style.css" type="text/css" /> <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script> </head><body><div id="loader"><img src="http://vk.com/images/upload.gif" alt="" width="32" height="8" border="0" /></div> <div id="totalCount"></div> <div id="onCount"></div><div id="online"></div> <div id="offCount"></div><div id="offline"></div> <br /><a href="https://flapps.ru/" target="_blank">https://flapps.ru/</a> </body></html>
Код: Выделить всё
body { padding:0; margin:0; font-family: tahoma, verdana, arial, sans-serif, Lucida Sans; font-size: 11px;} #online img, #offline img{ padding:0; margin:0;}#totalCount,#onCount, #online,#offCount, #offline { display:block; clear:both;}#totalCount, #online, #offline { margin-bottom:20px;} /* изображение прелоадер */#loader { width: 100%; height: 100%; position: fixed; text-align: center; z-index: 1000; background-color: #fff; opacity: 0.80;} #loader img{ position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px;}
Состояние: Приложение включено и видно всем.
В настройках приложения должен быть разрешен доступ к друзьям.
Исходник: https://flapps.ru/example/friends_get_o ... ffline.rar