Wiki
Clone wikiCMS / Работа с 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