О системе
Модули
Демо-версия
Скачать / Заказать
Документация
Поддержка
Новости Обратите внимание
Особые условия web-разработчикам
Получить профессиональную CMS и использовать в своих проектах - это выгодно! подробнее

Для некоммерческих организаций
Система управления сайтом - бесплатно! подробнее

Советы и решения

К списку

Как сделать окно на Ajax'е

Сейчас Ajax широко используется для открытия окон, например, в фотогалереях. SBS "Web-Pro" позволяет реализовать открытие окна на Ajax довольно легко.

Во-первых, используем ссылки вида:

<a href="javascript:void(null)" onclick="action_param_window('window_1')">...
Таким образом мы вызываем JavaScript-функцию, которую опишем ниже:
function action_param_window(action)
{
  var content = '<a href="javascript:JSPcloseWindow(\'action_param_window\')">Закрыть окно' +
      '<div id="action_param_window_content"></div>';
  // Окно будет по центру с отступом 200px сверху
  JSPopenWindow("action_param_window", content, "center", 200);

  document.getElementById("action_param_window").style.display = "none";

  simpleRequest("get_action_form.php", {action:action});
}
Не забываем подключить нужные JavaScript-библиотеки. Это вспомогательная библиотека для работы с окнами и собственно сама Ajax-библиотека:
<script type="text/javascript"
	 src="<?php echo _MOBJ_FOLDER_._MOBJ_ENGINE_FOLDER_ ?>eajax/eajax.js"></script>
<script type="text/javascript"
	 src="<?php echo _MOBJ_FOLDER_._MOBJ_ENGINE_FOLDER_ ?>eajax/eajax.cfg"></script>
<script type="text/javascript"
	 src="<?php echo _MOBJ_FOLDER_._MOBJ_ENGINE_FOLDER_.
	 _MOBJ_THEMES_FOLDER_ ?>sbs_wp_cp/ardzo_jsplus.js"></script>
Теперь нам нужно создать PHP-файл, который будет готовить код нашего окна. В нашем примере он называется "get_action_form.php":
<?php
u0get_var('action');

$mobj->write_hf = 0;

$content = 'Это и есть содержимое окна. Здесь можно вписать любой HTML-код';
$content = str_replace(array("\r", "\n", '"'), array(' ', '<br />', '\"'), $content);

include 'eajax/eajax.php';
eajaxResponse('
	document.getElementById("action_param_window_content").innerHTML = "'.$content.'";
	document.getElementById("action_param_window").style.display = "block";
');
?>
Осталось настроить CSS для окна, нужно указать как минимум следующие параметры:
#action_param_window {
	display: none;
	position: absolute;
}