Скрипт "Нежные уведомления jQuery"

Установка:

1. Загрузите папку pro-scripts в файловый менеджер или через ftp.
2. В шапку вашего сайта обычно это шаблон Верхняя часть сайта установите следующий код:

<script src="/pro-scripts/balert/jquery.bottomAlert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/pro-scripts/balert/styles.min.css">

Как пользоваться ?

Для использования, нужны минимальные знания JavaScript, по всем вопросам обращайтесь за платной помощью на uscript.pro или vk.com/reslear.

Использовать:

• одиночно (независимо размещая код)
• встраивать в другие скрипты

Для чего:

• Отображение информаций об ошибках, проблемах, успехе, предупреждениях
• Вывод загрузчика с текстом или изображением loader
• Реклама (текстовая, в виде ссылки, изображение)
• Короткие новости
• и др.

Реальные примеры:

• текст - "Ошибка загрузки скрипта", "Сообщение успешно отправлено", "Удаление завершено", "Внимание! данные будут навсегда удалены"
• Изображение с загрузчиком, во время отправки сообщения
• Реклама, в виде изображения или текста
• "Наш сайт обновился, подробнее.."

Основа вызова

  $.bottomAlert('ФУНКЦИЯ', {ПАРАМЕТР : ЗНАЧЕНИЕ});

• ФУНКЦИЯ - определяет что сделать с уведомлением
  • add - создать новое уведомление
  • remove - удалить уведомление
• ПАРАМЕТРЫ - индивидуальные настройки уведомления, пишуться в виде ПАРМЕТР: ЗНАЧЕНИЕ, ПАРАМЕТР2 : ЗНАЧЕНИЕ2 то есть через запятую.
  • id - (поумолчанию генерируеться в виде: число дата время) айди уведомления, можно не указывать, если в дальнейшем не нужна с ним манипуляция, например указываеться для ручного удаления уведомления.
  • html - Содержимое уведомления, текст или html код.
  • color - (red, orange, blue, green или ваш стиль) Стиль окна, соответствует классу css, например содержимое красного цвета:
    .balert-text.green{background: rgba(67, 203, 131, 1);} можно создать свой стиль:
    .balert-text.mystyle{background: #fff;border-radius: 5px; box-shadow: 0 0.3em 1em 0 rgba(0, 0, 0, 0.7);}
  • type - (html - по умолчанию, url) определяет обычный текст или при нажатии на уведомление перейти на страницу или выполнить функцию другого скрипта.
  • url - дополнительный параметр если type: 'url' имеет параметры:
    • href - ссылка на страницу для перехода
    • target - по умолчанию открывать в новом окне _blank, или в этом _self
    • onclick - по умолчанию пустая функция при нажатии вместо перехода по ссылке, удобно для сторонних скриптов.
  • timer - ( число 6 - по умолчанию) указываеться время в секундах после которого уведомление удалиться, кстати число 0 отключает исчезновение.

• Кстати если значение по умолчанию, его можно не указывать, как в примере №2 у параметра url - target по умолчанию _blank, то есть открыть в новой вкладке, если нужно в этой вкладке то параметр нужно уже указать target: '_self', как в примере №3

Пример для одиночного встраивания:

<script>
$(function(){
  $.bottomAlert('add', { // параметр создания
      html: 'Моё первое уведомление :)', // указываем содержимое уведомления
      timer: 3, // время исчезновения 3 секунды
      color: 'blue' // стиль синего цвета
  });
});
</script>

Пример №2 :

<script>
$(function(){
  $.bottomAlert('add', { // параметр создания
      html: 'Купить скрипт "Нежные окна" ?', // указываем содержимое уведомления
      type: 'url', // указываем тип, что это ссылка
      url: { // настраиваем параметры ссылки
        href: 'https://uscript.pro/shop/111/item/nezhnye-okna-jquery' // указываем ссылку
      }
      timer: 0, // без исчезновения
      color: 'green' // стиль зелёного цвета
  });
});
</script>

Пример №3 :

<script>
$(function(){
  $.bottomAlert('add', { // параметр создания
      id: 'newnotifigg', //указываем id уведомления для дальнейшего его удаления    
      html: 'Купить скрипт "Нежные окна" ?', // указываем содержимое уведомления
      type: 'url', // указываем тип, что это ссылка
      url: { // настраиваем параметры ссылки
        href: 'https://uscript.pro/shop/111/item/nezhnye-okna-jquery' // указываем ссылку
        target: '_self', // открыть в этой вкладке
        onclick: function(){ // переход по ссылке не будет выполнен, т.к. указан этот параметр, при нажатии вы получите обычное браузерное окошко с текстом, вместо перехода.
            alert('Вы нажали на меня xD'); 
        }
      }
      timer: 0, // без исчезновения
      color: 'green' // стиль зелёного цвета
  });
});
</script>

Пример №4 удаление окна :

<script>
  $.bottomAlert('remove', { // параметр удаления
      id: 'newnotifigg', //указываем id уведомления для удаления    
  });
</script>