jQuery плагин для динамической смены favicon

Favicon — это значок веб-сайта, который отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. В последнее время фавикон используется в разных веб сервисах, в том числе поисковыми системами.

Favicon jQuery плагин предназначен для управления этим значком. Он позволяет менять изображение динамически. Если браузер поддерживает HTML5 Canvas, можно сразу же отрисовывать иконку на канве. Для остальных браузеров можно использовать альтернативную иконку.

И в начале о грустном — плагин полностью поддерживает лишь Firefox 3.5, Opera 9, Chrome 4. В IE и Safari невозможно осуществить динамическую смену favicon. Работа с канвой доступна в Firefox 4.0b1+, Opera 10+, Chrome 6+, Safari 5+, IE9+. Не забывайте об этом, пользуясь этим плагином.

Скачать этот jQuery плагин отсюда.

Теперь разберемся как пользоваться плагином.

Чтобы установить иконку следует использовать такой код:

jQuery.favicon = function (iconURL, alternativeURL, onDrawCallback);

Здесь:

  • iconURL — путь к фавикону,
  • alternativeURL — альтернативная иконка для браузеров, не поддерживающих HTML5 Canvas, необязательный,
  • onDrawCallback —
    функция, которая что-либо рисует на favicon перед тем, как показать, указывать необязательно

Например, чтобы нарисовать что-нибудь на иконке, а если рисование не поддерживается браузером, подгрузить обычную, можно использовать такой код:

  1. jQuery.favicon('mycoolfavicon.png', 'defaultfavicon.png', function (ctx) {
  2.   ctx.font = 'bold 15px "helvetica", sans-serif';
  3.   ctx.fillStyle = '#FF00FF';
  4.   ctx.fillText('N', 2, 2);
  5. });

Он нарисует букву N на фавиконке.

Favicon jQuery плагин имеет еще два интересных метода: animate и unanimate:

jQuery.favicon.animate = function (animationURL, alternateURL, options);
 
jQuery.favicon.unanimate = function () {};

jQuery.favicon.animate в качестве параметров принимает:

  • animationURL — изображение с кадрами, расположенными горизонтально,
  • alternateURL — альтернативная иконка,
  • options — настройки
    • interval — частота смены кадров, по умолчанию — 1000 мс
    • onDraw: function (context) {} — функция, вызываемая при отрисовке каждого кадра
    • onStop: function () {} — вызывается при завершении работы анимирования
    • frames: [1,3,5] — порядок показа кадров, по умолчанию — друг за другом<
    • /ul>

    Использовать плагин можно в разных целях. Например можно сделать эффект как на вконтакте при проигрывании аудио — иконка меняется в зависимости от того проигрывается музыка или нет. Можно использовать, чтобы уведомлять пользователя о каком либо изменении на сайте, ведь страница сайта может быть открыта в другой вкладке браузера, а заголовок с иконкой будет виден почти всегда. Например, можно оповещать пользователя о новом сообщении или о том, что опубликована новая статья :) А в каких целях favicon jQuery плагин использовали бы Вы?

Запись опубликована в рубрике JS & jQuery с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">