Добро пожаловать на форум, -=Лузер=-, это ваша панель
Страница 1 из 11
Форум » Скрипты для uCoz » FAQ по uCoz системе » Как сделать собственное ajax окно!
Как сделать собственное ajax окно!
[У]никальны[Й]Дата: Вторник, 09.02.2010, 17:06:06 | Сообщение # 1


ВипаРеК
Сообщений: 565
Репутация: off
Все функции, относящиеся к созданию динамических окон на сайтах ucoz находятся в автоматически подключаемом файле http://s21.ucoz.net/src/u.js . Для того чтобы создать окно, нам нужен xml файл с содержимым окна и собственно ссылка для формирования окна. В одном xml файле может содержаться большое количество информации из разных окон. Определить, какую именно информацию отобразить, скрипту помогает идентификатор, который так же указывается в тексте ссылки.

Давайте вместе создадим новое окно. Сначала создадим файл с расширением .xml и вот таким содержанием:

Code
<?xml version="1.0" encoding="UTF-8"?>  
<ajax>  

<cmd t="layerContentHallo" p="innerHTML"><![CDATA[  
        Hallo World!  
        ]]></cmd>  

<cmd t="layerContentSmth" p="innerHTML"><![CDATA[  
        Что ни будь...  
        ]]></cmd>  
</ajax>

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

Обратите внимание на параметр t. Он содержит запись вида layerContentSomething. Слово помеченное красным и есть идентификатор окна. Он задается произвольно и именно его мы и будем указывать в наших ссылках. А вот код ссылки:

Code
<a href="javascript:openLayerB('ИДЕНТИФИКАТОР ОКНА',0,'ПУТЬ К XML ФАЙЛУ','НАЗВАНИЕ ОКНА',ШИРИНА,ВЫСОТА);">Ссылка</a>  

<!-- Пример -->  
<a href="javascript://" onclick="openLayerB('DopInfo',0,'/xml/dopinfo.xml','Дополнительная информация',380,150,'1');return false;" class="servmenu">Дополнительно</a>
eXzДата: Вторник, 09.02.2010, 17:29:23 | Сообщение # 2
Сообщений:
Репутация: off





Red-Dog, Как сделать окно на Ajax'е

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

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

Code
<a href="javascript:void(null)" onclick="action_param_window('window_1')">...

Таким образом мы вызываем JavaScript-функцию, которую опишем ниже:

Code
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-библиотека:

Code
<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":

Code
<?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 для окна, нужно указать как минимум следующие параметры:

Code
#action_param_window {
  display: none;
  position: absolute;
}
eXzДата: Суббота, 13.02.2010, 09:08:18 | Сообщение # 3
Сообщений:
Репутация: off





Форум » Скрипты для uCoz » FAQ по uCoz системе » Как сделать собственное ajax окно!
Страница 1 из 11
Поиск: