Установка скрипта «Нежные окна jQuery»

Введение

Это самые красивые всплывающие окна в интернете, для системы uCoz. Это не замена стандартным uCoz uWnd окнам (в простонародьи Ajax окна), это дополнительная jQuery библиотека, для создания всплывающих окон на вашем сайте.

Дорогой Друг!

Давай вместе дорабатывать скрипт Нежные окна, если ты пользуешься окнами у себя на сайте, и у тебя появилась идея (по функционалу, api или интерфейсу) или в каком-то моменте непонятна инструкция? - поделись мыслью, или может даже кодом. Мы вместе обязательно обсудим актуальность и займёмся внедрением разработки.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Шаг 1: Установка скрипта


Загрузите на ваш сайт папку pro-scripts в ко­рень ва­шего сай­та, че­рез FTP или фай­ло­вый ме­нед­жер на сай­те, соб­лю­дая пап­ки и подпап­ки. Инструкция Как загружать файлы на FTP?

В разделе управления дизайна, в глобальный блок "Верхняя часть сайта", разместите следующий код:
(или внутрь <head></head>. Производительнее: в нижнюю часть сайта - тогда весь код вызова окон расположить после следующего кода)

<style>@import url(/pro-scripts/popWindow/pop.window.css);</style>
<script src="/pro-scripts/popWindow/jquery.pop.window.v1.0.min.js"></script>

Шаг 2: Инструкции


Этап 1. Основа для создания окон

$.popWindow(КОМАНДА, ПАРАМЕТРЫ); 
// например
$.popWindow('add', {
    id: 'gow',
    title: 'Заголовок окна',
    background: 1,
    content: '<h2>Заголовок</h2><p>Текст</p>',
    footer: 1,
});

  • КОМАНДА - string (все команды пишутся в виде текста, в кавычках)
  • ПАРАМЕТРЫ - object (объект, все параметры указываются внутри фигурных скобок {}, параметры перечисляються запятой , в виде двух значений разделённых двоеточием параметр : значение)

Этап 2. Доступные комманды

  • add - добавить новое окно
  • remove - удалить окно

У каждой комманды свои параметры

Этап 3. Параметры для каждой комманды

remove - удалить окно, напрямую указав id окна или через параметр:

  • id - имя окна, которое будет удалено 
    // пример через параметр
$.popWindow('add', {id: 'gow'});

// или напрямую
    $.popWindow('add', 'gow');
add - добавить новое окно, параметры:

  • id - уникальное имя окна, если id не указан - он будет сгенерирован автоматически
  • title - заголовок окна
  • content - содержимое окна, html код или обычный текст
  • animate - анимация появления окна, указываеться css стиль доступны следющие анимации fade_right , fade_bottom , fall , указывать в кавычках
  • background - добавляет блокирующий затемнённый фон, за окном 1 - добавляет, 0 - не добавляет
  • backgroundClose - при клике на фон - закрывает окно, значениея 1 - да 0 - нет.
  • footer - содержимое футера, html код или 1 - обычный футер с кнопкой закрыть окно
  • image - изображение - объект
    1. url  - прямая ссылка на изображение
    2. background - цвет заднего фона например #000000
    3. zoom - увеличение изображения в процентах и кавычках напрмиер '90%'
    4. y - отношение изображения по оси y т.е. по вертикали, в кавычках и пикселях например '-20px' или по центру 'center'
    5. x - так-же как ось y, только по горизонтали
    6. height - длина или высота шапки окна в пикселях и кавычках например: '150px'  
    7. pattern - при значении 1, изображение будет повторяться, для использования паттернов
  • fixed -  фиксирует окно, даже при скроллинге, 1 - фиксирует, 0 по умолчанию
  • hideClose - скрывает или показывает кнопку закрытия окна (крестика)
  • fixScroll - фиксирует скрол при объёмном контекте, прокручиваться будет только окно.
  • contentHeight - высота контента в px ( например '200px' ), ограничивая высоту при объёмном контекте появлятеся скрол-бар в окне
  • height - при значении 0, шапка не отображаеться

Шаг 3: Пример

пример 1. 

<script>
function add_window() {
    $.popWindow('add', {
        background: 1,
        content: '<h2>Добро пожаловать!</h2><p style="text-align:center">Выбрав интересующее Вас направление, Вы сможете получить информацию о предлагаемых нами товарах и услугах, а также воспользоваться услугами нашего интернет-магазина.</p>',
        footer: 1,
        image: {
            url : 'http://uscript.pro/arh/_files/img/oper.png',
            background: '#f6f8f8',
            zoom: '60%',
            y: 'center',
            x: 'center',
            height: '180px'
        }
    });
}
</script>
<button type="button" onclick="add_window();">Показать окно</button>

Пример №2

Кстати HTML код можно не указывать в одной строке а разместить код следующим образом:

<div id="dopcontent" style="display:none"> 
   <p>параграфи</p> 
   <s>Текст</s> 
</div> 

<script> 
$.popWindow('add', {
........
 content: $('#dopcontent').html(),
 footer: htmlfooter,
 fixed: 1 
........
});
 </script>

Готово


Установка завершена!
Если у вас возникли вопросы, спрашивайте в комментариях к товару.