Wiki

Clone wiki

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

Только в этом форке есть так называемые aJax окна 2.0, а просто говоря обновлённые окошки. По сравнению со старой версией здесь добавлены множество новых функций по работе с окнами, облегчён их вызов.

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

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


Простое создание окна

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

fpsWnd(name, title, content, params)

  • name - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами.
  • title - заголовок окошка. Отображается в шапке.
  • content - текст, выводимый в окне.
  • params - дополнительные параметры. Список ниже. Необязательное поле.

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

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

Кроме того, можно использовать как инструмент показа содержимого страницы по переданному адресу в ajax окне, для этого нужно вызвать функцию sendu() из ссылки, имеющей атрибут href

sendu(e, title, params)

  • e - передаёт информацию, с какой формой работаем. Если передаём по событию прямо из тега формы, можно написать this, иначе необходимо явно указать уникальный идентификатор формы, например, 'mainformid'
  • title - заголовок окошка. Отображается в шапке.
  • params - дополнительные параметры. Список ниже. Необязательное поле.

Параметры

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

  • close - показывать ( true ) или скрывать ( false ) кнопку закрытия окна. По-умолчанию true
  • time - время в милисекундах, после которого окно закроется. По-умолчанию 0 (не закрывать)
  • align - задает выравнивание контента ( left, center, right ). По-умолчанию left
  • css - строка со стилями окна

Пример:

#!text
{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. Например так

#!html
<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>

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

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

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

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

Updated