Плагин jQuery Favicon

Favicon - плагин jQuery, который открывает возможности по манипулированию favicon (значком веб-сайта в браузере). Он позволяет динамически изменять favicon. Если браузер поддерживает элемент HTML5 сanvas, то вы можете "нарисовать" иконку в коде скрипта перед ее использованием. Если браузер не поддерживает элемент canvas, то можно просто вывести другую иконку.

Поддержка в браузерах:: Firefox 3.5, Opera 9, Chrome 4.
Примечание: IE и Safari не поддерживают динамическое изменение favicon.

Примечание: элемент сanvas поддерживается в браузерах Firefox 4.0b1+, Opera 10+, Chrome 6+, Safari 5+, IE9+

Содержание

Интерфейс плагина
Анимация с помощью функции jQuery.favicon.animate()
Сайт автора плагина
Примеры

Интерфейс плагина

/**
 * Интерфейс onDrawCallback
 * @param {Context} context		контекст элемента HTML5 сanvas 2d
 */
var DrawCallback = function (context) {};

/**
 * Интерфейс jQuery.favicon
 * @param {String} iconURL
 * @param {String} alternativeURL			(опционально) URL, который используется вместо iconURL, если браузер не поддерживает элемент HTML5 сanvas
 * @param {DrawCallback} onDrawCallback		(опционально) возвратная функция для отображения чего-либо на иконке перед выводом
 *
 * function (iconURL)
 * function (iconURL, onDraw)
 * function (iconURL, alternateURL, onDraw)
 */
jQuery.favicon = function (iconURL, alternativeURL, onDrawCallback) {};

/**
 * jQuery.favicon.animate - запускаем покадровую анимацию
 *
 * @param {String}      animationURL    Изображение, которое содержит соединенные по горизонтали кадры
 * @param {String}      alternateURL    Обычное однокадровое изображение, которое выводится в случае, когда не поддерживается элемент canvas
 * @param {Object}      options         опции 
 *
 * function (animationURL, alternateURL)
 * function (animationURL, alternateURL, {
 *   interval: 1000, // изменение кадра через X ms, значение по умолчанию - 1000ms
 *   onStart: function () {}, // вызывается при старте анимации
 *   onDraw: function (context, frame) {}, // вызывается на каждом кадре
 *   onStop: function () {}, // вызывается при остановке анимации
 *   frames: [1,3,5] // вывод только указанных кадров, значение по умолчанию - все кадры
 * })
 */
jQuery.favicon.animate = function (animationURL, alternateURL, options) {};

/**
 * jQuery.favicon.unanimate - остановить текущую анимацию
 */
jQuery.favicon.unanimate = function () {};

Анимация с помощью функции jQuery.favicon.animate()

jQuery.favicon.animate выполняет простую покадровую анимацию. Данный подход требует, чтобы все кадры анимации размещены горизонтально один за другим в одном изображении, как в примере ниже

Простая анимация с 2 кадрами, которая используется в Примере 4

Сайт автора проекта

Страница проекта в библиотеке плагинов jQuery.

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

Пример 1: Изменение favicon

jQuery.favicon('mail_icon_32_active.png');"

Пример 2: Рисуем что-нибудь на иконке перед выводом

jQuery.favicon('mail_icon_32_new_message_active_g.png', function (ctx) {
  ctx.font = 'bold 15px "helvetica", sans-serif';
  ctx.fillStyle = '#FF0000';
  ctx.fillText('XX', 10, 27);
});

Пример 3: Рисуем что-нибудь на иконке и задаем альтернативный URL

jQuery.favicon('mail_icon_32_new_message_active_w.png', 'mail_icon_32_active.png', function (ctx) {
  ctx.font = 'bold 15px "helvetica", sans-serif';
  ctx.fillStyle = '#FF00FF';
  ctx.fillText('10', 10, 27);
});

Пример 4: Простой эффект мигания с помощью функции jQuery.favicon.animate()

  var bool = false;
  function blink(button) {
    if (bool) {
       bool = false;
       jQuery.favicon.unanimate();
       return ;
    }
	
    jQuery.favicon.animate('favicon.ico', 'favicon0.ico', {
      frames: [1, 0],
      interval: 500,
      onDraw: function (ctx, frame) {
        ctx.font = 'bold 15px "helvetica", sans-serif';
        ctx.fillStyle = '#333333';
        ctx.fillText(count, 10, 27);
        if (Math.random() > .95)
          count++;
      },
      onStop: function () {
        jQuery.favicon('favicon.ico');
      }
    });
 }

архив javascript + CSS :: • до 2005 • 2006 • 2007 • 2008 • 2009 • 2010 • 2011