Вконтакте JavaScript

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

В этом уроке показано:

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



Я использую jQuery, но если очень нужно, то можно обойтись без этой библиотеки.
code.js
$(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];
    }
}

index.html
<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>
</body>
</html>

style.css
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;
}


Приложение должно быть включено.

Состояние: Приложение включено и видно всем.

В настройках приложения должен быть разрешен доступ к друзьям.
Теги:
ВК IFrame
Похожие новости:
Добавлено: 17 Августа 2013 03:26:29 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...