Оглавление

• Виджет состава семьи
• Виджет списка Авторитетов
• Форматирование ника игрока

Вместо введения

Веб-виджет (web widget) — это фрагмент кода, который может быть встроен пользователем в любую HTML-страницу и использоваться без значительной модификации. Как правило, при создании веб-виджетов используются технологии DHTML, JavaScript или Adobe Flash.

Статья рассчитана на людей, которые имеют понятие об HTML, CSS, JavaScript и знакомы с их синтаксисом.

Подключение виджетов

Для использования любого виджета необходимо подключить JavaScript-файл https://www.mafiaonline.ru/api/widgets.min.js:

<script src="https://www.mafiaonline.ru/api/widgets.min.js?099" type="text/javascript"></script>

Обратите внимание, на сервере «Мафии онлайн» включено кэширование js-файлов. Для того, чтобы быть уверенными в том, что подгружается актуальная версия скрипта, указывайте её в качестве GET-параметра. На данный момент актуальная версия — 0.9.9 (17.07.2019).

Для функционирования виджетов необходим фреймворк jQuery. Если он не используется на вашем сайте, его можно подключить, например, из CDN Яндекса или Google. Например, так:

<script src="https://yastatic.net/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

Виджет Состава семьи

Известно, что, согласно Семейному кодексу здравому смыслу, на сайте семьи всегда должен содержаться актуальный состав семьи. К сожалению, когда состав сделан статическим (вручную), иногда возникают трудности с его актуализацией. Во избежание этой проблемы разработана возможность внедрять на сайт всегда актуальный состав семьи из «Мафии онлайн», обновляемый динамически.

Использование

Для вставки списка членов семьи следует вызвать функцию famMembers (div, params[, css]), которая принимает три аргумента:

• div — имя блока, в который будет выведен текст виджета;
• params — параметры инициализации виджета, js-объект с полями:
  • id — id семьи, состав которой выводим;
  • date — отображать ли дату приёма игрока в семью (true|false, по умолчанию — false)
  • job — отображать ли дату должность игрока в семье (true|false, по умолчанию — false)
  • location — отображать ли текущую локацию игрока (true|false, по умолчанию — false)
  • extra — дополнительные персонажи, не включённые в официальный состав семьи (js-массив ников, параметр необязателен)
  • outcast_title — «должность» персонажей в перечне «дополнительных персонажей» (по умолчанию — Временно вне состава семьи)
• css — возможность указать свои CSS-правила для оформления таблицы членов семьи. Текстовая строка. Если параметр опущен, применяются следующие правила:

.members {width: 100%;} /* класс, применённый к таблице с игроками */
.members th {text-align: left;} /* ячейки в заголовке таблицы */ 
.online {color: darkgreen; font-weight: bold;} /* online-индикатор */
.offline {color: red;} /* offline-индикатор */
.hidden {color: darkgrey;} /* индикатор скрытого месторасположения */
/* вместе с классом online, offline или hidden применяется класс location */
.login img {border: 0} /* класс login - у ячейки со ссылкой на инфу */
.nick {font-weight: bold;} /* ник игрока */

Пример использования

<script src="https://yastatic.net/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://www.mafiaonline.ru/api/widgets.min.js?099" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  famMembers ('fm', {
    id: 666,
    date: true,
    job: true,
    location: true,
    extra: [
      'Вася Пупкин',
      'АцЦкИйСоТоНа'
    ]
  });
});
</script>
<div id="fm"></div>

В действии

По состоянию на 01.03.2015 на виджет можно посмотреть на:

• сайте семьи Aderente (ссылка);
• сайте семьи Вооруженные силы (ссылка);
• сайте семьи Русская Мафия (ссылка);
• сайте семьи Ночные снайперы (ссылка);
• сайте семьи Hot Fuzz (ссылка);
• сайте семьи Кавказская мафия (ссылка);
• сайте семьи Упийцы (ссылка);

Виджет состава Авторитетов

Аналогичен виджету состава семьи. Функция avtList(div[, css]) не принимает дополнительных настроек (см. param виджета семей): только имя блока (div) и опционально css-стили (css).

<script src="https://yastatic.net/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://www.mafiaonline.ru/api/widgets.min.js?099" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
avtList ('avt');
});
</script>

Посмотреть в действии можно на сайте Авторитетов.

Форматирование ника игрока

Эту возможность удобно использовать, например, на страницах форума в шапках сообщений.

Вызов: showUser(containter, params[, css]);

Параметры:

• containter — идентификатор блока (либо сам блок), в котором нужно разместить итоговый код
• params — параметры:
  • login — точный логин пользователя в «Мафии онлайн»
  • mask — ник пользователя (в таком виде будет отображаться логин пользователя, не обязательно должен совпадать с логином)
  • prepend — HTML-код, который необходимо добавить непосредственно перед ником
  • append — HTML-код, который необходимо добавить непосредственно после ника

Пример использования

Если мы вызовем код таким образом:

<span id="u4410">Евгенька</span>
<script type="text/javascript">showUser("u4410", {login: "MissZlo", prepend: "<a href=\"profile.php?id=135\">", append: "</a>", mask: "Евгенька"});</script>

В результате получим следующее:

<span id="u4410"><a target="_blank" href="https://www.mafiaonline.ru/info/MissZlo"><img src="https://www.mafiaonline.ru/images/icons/info-w.png" align="absmiddle" border="0"></a>&nbsp;<strong><a href="profile.php?id=135">Евгенька</a></strong>&nbsp;<img src="https://www.mafiaonline.ru/images/clans/20/417-1.png" align="absmiddle"></span>

В действии

На 01.03.2015 посмотреть в действии подобное форматирование ников можно:

• на форуме семьи Русская Мафия (ссылка);
• на странице Как играть? Быстрый старт (ссылка);