Wiki

Clone wiki

CMS / Работа-с-aJax-окнами-2.0

Создание окна

Примечание: при создании окна, у которого имя совпадает с существующим, существующее окно обновит контент на версию из нового окна и, если было скрыто, появится.

Основная функция

Новое окно создается следующим кодом:

fpsWnd(name, title, content, params)

name - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами.

title - заголовок окошка. Отображается в шапке.

content - текст, выводимый в окне.

params - дополнительные параметры. Список ниже. Необязательное поле.

Отправка формы

Функция отправляет форму на сервер и открывает окно со статусом выполненного действия

sendu(id, title, params)

id - уникальное имя отправляемой формы и название окна. Нигде не отображается, но используется при работе с ним.

title - заголовок окошка. Отображается в шапке.

params - дополнительные параметры. Список ниже. Необязательное поле.

Параметры

Параметры можно задать внутри двух фигурных скобок через запятую с использованием двоеточия.

close - показывать ( true ) или скрывать ( false ) кнопку закрытия окна. По-умолчанию true

time - время в милисекундах, после которого окно закроется. По-умолчанию 0 (не закрывать)

align - задает выравнивание контента ( left, center, right ). По-умолчанию left

css - строка со стилями окна

Пример:

{close: false, time: 3000, align: 'center', css: 'opacity: 0.5'}

Действия над окнами

Скрыть окно

fpsWnd.hide(name)

name - уникальное имя окна

Показать окно

fpsWnd.show(name)

name - уникальное имя окна

Cменить заголовок окна

fpsWnd.header(name, content)

name - уникальное имя окна

title - новый заголовок окошка

Cменить контент окна

fpsWnd.content(name, content)

name - уникальное имя окна

content - текст, выводимый в окне

Примечание

Ну вот и всё. Как видите, всё довольно просто. Если возникнут вопросы, обращайтесь на форум.

Для работоспособности всего этого, должны быть подключены стандартные библиотеки AtomM CMS. Например так

<link type="text/css" rel="StyleSheet" href="{{ template_path }}/css/style.css" /> <script language="JavaScript" type="text/javascript" src="{{ www_root }}/sys/js/jquery-1.8.1.min.js"></script> <script language="JavaScript" type="text/javascript" src="{{ www_root }}/sys/js/send_message.js"></script>

Причём send_message.js нужно взять из моего форка, потому что пока что только в нём есть^[4^W даже в нём нет aJax окнон 2.0, но очень скоро будут.

Ну и сам код вызова окон должен быть внутри тегов "script", так как является джаваскриптом. Пример

<script type="text/javascript"> fpsWnd('test', 'Новое окно', 'Я создал окошко!', '') </script>

Другой пример: создадим два блока, по нажатию на первый создадим окно, по нажатию на второй сменим у окна контент.

<div onclick="fpsWnd('test2', 'Новое окно', 'Я открыл новое окошко!', '')">Открыть окно</div> <div onclick="fpsWnd.content('test2', 'Новый контент окошка')">Сменить контент</div>

Updated