Badger

Супер сексуальные бэджи в стиле iOS. Плагин jQuery.

Badger позволяет просто добавить прекрасные бэджи к элементам на ваших страницах без использования изображений. Оформленные в стиле iOs (iPhone и iPad), такие бэджи являются отличным способом для информирования посетителей вашего сайта.

Демонстрация

Элемент div должен иметь свойство position:relative. Зачем? Чтобы прикрепить бэдж.

  • $('#MyBadge').badger('2');
  • $('#MyBadge').badger('+4');
  • $('#MyBadge').badger('-11');
  • $('#MyBadge').badger('');
  • Данный блок демонстрирует вид бэджа с текстом. Предполагается, что извещения будут маленькие и простые. Рекомендуется использовать одно короткое слово (не более 7 символов).

  • $('#WordBadge').badger('Новый');
  • $('#WordBadge').badger('Готово!');
  • $('#WordBadge').badger('48');
  • $('#WordBadge').badger('');
  • Как использовать

    Добавить бэдж очень просто. Вставляем вызов бибилиотеки jQuery в раздел head вместе с файлами Badger (код JavaScript и CSS).

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="badger.js"></script>
    <link rel="stylesheet" href="badger.css" type="text/css" />

    Затем вызываем Badger для нужного элемента!

    <script>
    $(document).ready(function()
      {
        $('#MyDiv').badger('5');
      });
    </script>

    Badger может выполнять операции сложения и вычитания, но лучше передавать ему готовую строку для вывода. Если нужно узнать, что в текущий момент выводит бэдж, просто добавьте возвратную функцию.

    $('#MyDiv').badger('+2', function(r) { alert(r); });

    Настройка

    Badger стилизован по образу iOS (iPhone/iPad). Если вы хотите изменить внешний вид бэджа, то модифицируйте соответствующий класс CSS. Для получения эффекта закругления рамки устанавливайте радиус скругления границы равным примерно половине высоты бэджа.