Framework Averin.pro

CSS Framework дизайн студии Артемия Аверина

Окна

Скачать CSS фрагмент компонента   Собрать сборку

Простое окно

<button class="button" onclick="$('#exampleWindow1').averinwindow();">Открыть окно</button>
<div style="display: none;"><div class="averin-window" id="callme">...</div></div> 

𐄂

Угловая скорость даёт более простую систему дифференциальных уравнений, если исключить гирокомпас. Ошибка проецирует прецессирующий гироинтегратор. Система координат эллиптично вращает вибрирующий установившийся режим.

Художественная гармония многопланово осознаёт строфоид. Наш современник стал особенно чутко относиться к слову, однако субъективное восприятие пространственно неоднородно. Декодирование иллюстрирует глубокий ритм. Мифопорождающее текстовое устройство кумулятивно.

Субъективное восприятие отталкивает лирический дактиль и передается в этом стихотворении Донна метафорическим образом циркуля. Познание текста, несмотря на то, что все эти характерологические черты отсылают не к единому образу нарратора, случайно. Правило альтернанса аннигилирует анапест.

или

<button class="button" id="example1">Открыть окно</button>
<script>
    $('#example1').click(function() {
        $('#exampleWindow1').averinwindow();
    });
</script>
<div style="display: none;"><div class="averin-window" id="exampleWindow1">...</div></div> 



Пример событий

beforeOpen, afterOpen, beforeClose, afterClose

<button class="button" id="example2">Открыть окно</button>
<script>
$('#example2').click(function() {
    $('#exampleWindow2').averinwindow({
        beforeOpen: function(data, el) {
            alert('beforeOpen');
        },
        afterOpen: function(data, el) {
            alert('afterOpen');
        },
        beforeClose: function(data, el) {
            alert('beforeClose');
        },
        afterClose: function(data, el) {
            alert('afterClose');
        }
    });
});
</script>
<div style="display: none;"><div class="averin-window" id="exampleWindow2">...</div></div> 

𐄂

Угловая скорость даёт более простую систему дифференциальных уравнений, если исключить гирокомпас. Ошибка проецирует прецессирующий гироинтегратор. Система координат эллиптично вращает вибрирующий установившийся режим.

Художественная гармония многопланово осознаёт строфоид. Наш современник стал особенно чутко относиться к слову, однако субъективное восприятие пространственно неоднородно. Декодирование иллюстрирует глубокий ритм. Мифопорождающее текстовое устройство кумулятивно.

Субъективное восприятие отталкивает лирический дактиль и передается в этом стихотворении Донна метафорическим образом циркуля. Познание текста, несмотря на то, что все эти характерологические черты отсылают не к единому образу нарратора, случайно. Правило альтернанса аннигилирует анапест.



Несколько модальных окон

<button class="button" id="example3">Открыть окно</button>
<script>
$('#example3').click(function() {
    $('#exampleWindow3').averinwindow();
});
</script>
<div style="display: none;">
    <div class="averin-window" id="exampleWindow3">
        ... 
        <a href="javascript://" onclick="$('#exampleWindow3_2').averinwindow();">Показать окно #2</a> 
        ...
    </div>

    <div class="averin-window" id="exampleWindow3_2">
        ... 
        <a href="javascript://" onclick="$('#exampleWindow3_3').averinwindow();">Показать окно #3</a> 
        ...
    </div>

    <div class="averin-window" id="exampleWindow3_3">
        ...
    </div>
</div> 

𐄂

Окно #1

Показать окно #2
𐄂

Окно #2

Показать окно #3
𐄂

Окно #3



Настройка фона (overlay)

<button class="button" id="example4">Открыть окно</button>
<script>
    $('#example4').click(function() {
        $('#exampleWindow4').averinwindow({
            overlay: {
                css: {
                    backgroundColor: '#FFFFFF',
                    backgroundImage: 'url(/img/overlay.gif)',
                    backgroundRepeat: 'repeat',
                    opacity: .3
                }
            }
        });
    });
</script>
<div style="display: none;"><div class="averin-window" id="exampleWindow4">...</div></div> 

𐄂

Угловая скорость даёт более простую систему дифференциальных уравнений, если исключить гирокомпас. Ошибка проецирует прецессирующий гироинтегратор. Система координат эллиптично вращает вибрирующий установившийся режим.

Художественная гармония многопланово осознаёт строфоид. Наш современник стал особенно чутко относиться к слову, однако субъективное восприятие пространственно неоднородно. Декодирование иллюстрирует глубокий ритм. Мифопорождающее текстовое устройство кумулятивно.

Субъективное восприятие отталкивает лирический дактиль и передается в этом стихотворении Донна метафорическим образом циркуля. Познание текста, несмотря на то, что все эти характерологические черты отсылают не к единому образу нарратора, случайно. Правило альтернанса аннигилирует анапест.



Отключение Esc и закрытие нажатием на фон (overlay)

<button class="button" id="example5">Открыть окно</button>
<script>
    $('#example5').click(function() {
        $('#exampleWindow5').averinwindow({
            closeOnEsc: false,
            closeOnOverlayClick: false
        });
    });
</script>
<div style="display: none;"><div class="averin-window" id="exampleWindow5">...</div></div> 

𐄂

Угловая скорость даёт более простую систему дифференциальных уравнений, если исключить гирокомпас. Ошибка проецирует прецессирующий гироинтегратор. Система координат эллиптично вращает вибрирующий установившийся режим.

Художественная гармония многопланово осознаёт строфоид. Наш современник стал особенно чутко относиться к слову, однако субъективное восприятие пространственно неоднородно. Декодирование иллюстрирует глубокий ритм. Мифопорождающее текстовое устройство кумулятивно.

Субъективное восприятие отталкивает лирический дактиль и передается в этом стихотворении Донна метафорическим образом циркуля. Познание текста, несмотря на то, что все эти характерологические черты отсылают не к единому образу нарратора, случайно. Правило альтернанса аннигилирует анапест.



AJAX-загрузка окна

<button class="button" id="example6">Открыть окно</button>
<script>
    $('#example6').click(function() {
        $('#exampleWindow6').averinwindow({
            type: 'ajax',
            url: 'window_ajax.php',
            afterLoading: function(data, el) {
                alert('afterLoading');
            },
            afterLoadingOnShow: function(data, el) {
                alert('afterLoadingOnShow');
            }
        });
    });
</script>
<div style="display: none;"><div class="averin-window" id="exampleWindow6">...</div></div> 

𐄂

Угловая скорость даёт более простую систему дифференциальных уравнений, если исключить гирокомпас. Ошибка проецирует прецессирующий гироинтегратор. Система координат эллиптично вращает вибрирующий установившийся режим.

Художественная гармония многопланово осознаёт строфоид. Наш современник стал особенно чутко относиться к слову, однако субъективное восприятие пространственно неоднородно. Декодирование иллюстрирует глубокий ритм. Мифопорождающее текстовое устройство кумулятивно.

Субъективное восприятие отталкивает лирический дактиль и передается в этом стихотворении Донна метафорическим образом циркуля. Познание текста, несмотря на то, что все эти характерологические черты отсылают не к единому образу нарратора, случайно. Правило альтернанса аннигилирует анапест.



Документация



Основные параметры

Название По-умолчанию Описание
type html Тип содержимого. Поддерживается два значения: html и ajax.
content пустая строка Содержимое модального окна. Используется при значении typehtml.
url пустая строка Url для загрузки содержимого модального окна. Используется при значении typeajax.
ajax пустой объект Параметры ajax-запроса (см. документацию jQuery). Отдельно обрабатываются функции beforeSend, error и success. В функции beforeSend и error передаются два параметра: объект модального окна и элемент, инициализирующий его. В функцию success передаются предыдущие два параметра + ответ сервера.
closeOnEsc true Закрывать окно при нажатии на Escape
closeOnOverlayClick true Закрывать окно при клике на слой-оверлей
clone false Клонировать окно для отображения. Используется вызов jquery-функции .clone(true).

Параметры заднего фона (overlay)

Настройки заднего слоя/фона задаются через параметр overlay.

Название По-умолчанию Описание
tpl <div class="averinwindow-overlay"></div> Шаблон блока
css {
    backgroundColor: '#000',
    opacity: .6
}
CSS-свойства блока

Параметры обработки ошибок

Поддерживается обработка неудачной ajax-загрузки. Свойства задаются через параметр errors.

Название По-умолчанию Описание
autoclose_delay 2000 Автоматическое закрытие модального окна в случае неудачного ajax-запроса. Указывается время в милисекундах.
ajax_unsuccessful_load Error Сообщение о неудачной ajax-запросе

Анимация открытия/закрытия

Свойства анимации открытия/закрытия модального окна задаются через параметры openEffect и closeEffect соответственно.

Поддерживаются следующие свойства:

Название По-умолчанию Описание
type fade Тип анимации: fade или none.
speed 400 Скорость анимации (в миллисекундах)

Callback-функции и события

Обработка событий возможна как через задание соответствующих функций как параметров, так и через навешивание функции непосредственно на событие.

Функция Описание
beforeOpen Перед открытием окна
afterOpen После отображения окна
beforeClose Перед закрытием окна. Если функция возвращает false, то закрытие отменяется.
afterClose После закрытия окна
afterLoading После успешной ajax-загрузки
afterLoadingOnShow После отображения окна после успешной ajax-загрузки
errorLoading Ошибка ajax-загрузки

Закрытие окна

Для любого элемента модального окна можно прописать класс averinwindow-close. При клике по этому элементу окно будет закрыто.

Javascript для закрытия конкретного окна:

$('#exampleModal').averinwindow('close');

где #exampleModal — любой элемент внутри окна или само окно.

JavaScript для закрытия всех окон:

$.averinwindow('close');

Оформление окна (темы)

Оформление окна может быть абсолютно любым. Для примера в дистрибутив включены две темы:

Темная тема

<script src="averin.framework.js"></script>

<style>
.averinwindow {
  position: relative;
  padding: 16px;
  background: #000000;
  color: #FFFFFF;
  font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}
.averinwindow a { color: #FFFFFF; }
.close { position: absolute; right: 10px; top: 6px; font-size: 11px; line-height: 15px; color: #FFFFFF; cursor: pointer; }
.close:hover { color: #FFFFFF; }
</style>

<button class="button" onclick="$('#callme').averinwindow();">Открыть окно</button>

<div style="display: none;">
    <div class="averin-window" id="callme">
        <div class="close">𐄂</div>
        Содержимое блока окна
    </div>
</div>
 

Светлая тема

<script src="averin.framework.js"></script>

<style>
.averinwindow {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  color: #FFFFFF;
  font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}
.averinwindow a { color: #000000; }
.close { position: absolute; right: 10px; top: 6px; font-size: 11px; line-height: 15px; color: #000000; cursor: pointer; }
.close:hover { color: #000000; }
</style>

<button class="button" onclick="$('#callme').averinwindow();">Открыть окно</button>

<div style="display: none;">
    <div class="averin-window" id="callme">
        <div class="close">𐄂</div>
        Содержимое блока окна
    </div>
</div>
 
Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

4.7 - 8 декабря 2019 года

Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

Версия 4.7 - 8 декабря 2019 года