JavaScript
Этот урок создан на основе урока Вывод аватарок друзей, списки Online и Offline, но деление на списки будет происходить не по онлайн/оффлайн, а по указанному в анкете полу.
В этом уроке показано:
- как узнать список друзей
- разделение друзей на девушки, парни и не указавшие пол
- вывод аватарок друзей
- использование одной функции для правильных окончаний разных слов (1 подруга, 2 друга)
- использование изображения прелоадера
code.js
Код: Выделить всё
/* https://flapps.ru/forum - форум о создании приложений */ $(document).ready(function(){ VK.init(function() { // выполняем запрос получения списка друзей VK.api("getFriends", {fields:"sex,photo"}, function(data) { // узнаем количество друзей var frCount = data.response.length; var girlsCount = 0; var boysCount = 0; var someCount = 0; var girlsStr = ''; // девушки var boysStr = ''; // парни var someStr = ''; // не указан пол // массивы форм слов var friendsEnd = ['друзей','друг','друга']; var girlsEnd = ['подруг','подруга','подруги']; for (var i=0; i<frCount; i++) { if (data.response[i].sex == 1) { // если девушка girlsCount++; girlsStr += '<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 if (data.response[i].sex == 2) { boysCount++; boysStr += '<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 { someCount++; someStr += '<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,friendsEnd)); $("#girlsCount").html(girlsCount + ' ' + num_ending(girlsCount,girlsEnd)); $("#girls").html(girlsStr); $("#boysCount").html(boysCount + ' ' + num_ending(boysCount,friendsEnd)); $("#boys").html(boysStr); $("#someCount").html(someCount + ' ' + num_ending(someCount,friendsEnd) + ' - не указали пол'); $("#some").html(someStr); // скрываем прелоадер $('#loader').fadeOut(1000); }); });}); // функция формирования правильных окончаний слов// number - число, endings - массив окончаний, состоящий из 3х форм: 'друзей','друг','друга'function num_ending(number,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="girlsCount"></div><div id="girls"></div> <div id="boysCount"></div><div id="boys"></div> <div id="someCount"></div><div id="some"></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;} #girls img, #boys img, #some img{ padding:0; margin:0;}#totalCount,#girlsCount, #girls,#boysCount, #boys,#someCount, #some { display:block; clear:both;}#totalCount, #girls, #boys, #some { 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_girls_boys.rar