Как создать Ajax окно в Ucoz - Шпаргалки - Статьи для веб-мастера - Скрипты для сайта
Реклама №2
Как создать Ajax окно в Ucoz
Сейчас Ajax окна используются на многих веб сайтах. Ajax окна придают сайту интенсивности и освобождает такое дорогое место на страничках сайта. Технология Ajax будет нравится и Вам и Вашим пользователям. В Ajax окне можно разместить абсолютно любые материалы - изображения, аудио и видео материалы и много много другого. Термин AJAX (Asynchronous Javascript And Xml) - методика для связи с сервером без перезагрузки страницы. Изучив этот урок и Вы сможете создать окно на своём ресурсе. Итак давайте преступим:
Создаём Ajax окно в Ucoz без файлов xml
Самое простое Ajax окно:
Code
<a href="javascript://" onclick="new _uWnd('myName','Заголовок окна',500,200,{autosize:1,maxh:300,minh:100},'Здесь находится контент окна,также могут использоваться html коды');">ССЫЛКА</a>
Вот что у нас получилось ССЫЛКА Давайте разберём эту строчку new_uWnd('myName','Заголовок окна',500,200,{autosize:1,maxh:300,minh:100},'Здесь находится контент окна,также могут использоваться html коды');">ССЫЛКА myName - это уникальное название окошка. Заголовок окна - это заголовок, который отображается вверху окошка. 500 - ширина. 200 - высота. Здесь находится контент окна,также могут использоваться html коды - контент окна, могут даже использоваться html коды. ССЫЛКА - любой текст (в данном случае ССЫЛКА), можно сделать кнопкой но об этом позже. Теперь давайте добавим пару фишек : Основа окна не отличается от предыдущего примера, поэтому я не буду снова описывать. Полный код :
Code
<a href="javascript://" onclick="new _uWnd('Name','Заголовок окна',500,200,{min:0,shadow:1,header:1,max:1,resize:0,modal:1,nomove:1},'Здесь находится контент окна,также могут использоваться html коды здесь мы используем затемнение и запрещаем перемещение окна');">ССЫЛКА</a>
Вот что у нас получилось ССЫЛКА Теперь добавился код : {min:0,shadow:1,header:1,max:1,resize:0,modal:1,nomove:1} Сразу скажу о цифрах 1 и 0 число 0 заменяет слово "Нет" число 1 заменяет слово "Да" min - отображение кнопки свернуть (у нас стоит 0). shadow - добавляет тень к окошку. header - отображение шапки (где находятся кнопки свернуть, развернуть, закрыть и название окошка). max - отображение кнопки "развернуть" (на весь экран). resize - разрешение пользователю изменить размеры окошка (у нас стоит 0, поэтому нельзя изменять размеры окна). modal - если данная опция включена, то все остальное пространство будет закрыто полупрозрачным слоем (у нас 1 ,слой полупрозрачный). nomove - перемещение окна (у нас 1 ,запрещаем).
Немного разберемся с переменными (под спойлером) :
string - Строковая переменная в одинарных кавычках '', напр.( 'Название окна' ) integer - Целое число, напр.(220) boolean - Логическая переменная. Принимает значение 1 - да, 2 - нет или true - да, false - нет, напр.( min:1 ) Теперь параметры: autosize boolean - автоопределение размеров. autosizewidth boolean - автоопределение ширины. autosizeonimages boolean - автоматически изменять размеры после загрузки картинок. hideonresize boolean - прятать содержимое при изменении размеров окна. waitimages boolean - ждать загрузки всех картинок. markload string - текст загрузки. align string - выравнивание. shadow boolean - тень. header boolean - отображать ли шапку. min boolean - отображать ли кнопку Minimize (свернуть). max boolean - отображать ли кнопку Maximize (развернуть). design string - дизайн. Является ключем объекта _uWnd.designs. close boolean - отображать ли кнопку Close (закрыть). hidden boolean - скрытое окно. modal boolean - модальное окно (все остальное пространство закрывается полупрозраным слоем). alert boolean - окно будет отображаться выше модальных окон. popup boolean - закрывать ли окно при клике на пространстве вне окна. nomove boolean - запретить перемещение окна. hideonmove boolean - скрывать содержимое окна при перемещении окна. resize boolean - разрешить изменение размеров окна пользователем. fixed boolean - фиксированное окно (прокручивается вместе со страницей). minh integer - минимальная высота. maxh integer - максимальная высота. minw integer - минимальная ширина. maxw integer - максимальная ширина. icon string - иконка для окна. Отображается в заголовке. oncontent function - функция, выполняющаяся после добавления контента в окно. onclose function - функция, выполняющаяся после закрытия окна. onbeforeclose function - функция, выполняющаяся до закрытия окна (после клика на кнопку закрытия). oninit function - функция, выполняющаяся при открытии окна. onmousemove function - функция, выполняющаяся движении мышью над контентом окошка. onposchange function - функция, выполняющаяся при каждом изменении позиции окна. onactivate function - функция, выполняющаяся при получении окошком фокуса. ondeactivate function - функция, выполняющаяся при потере окошком фокуса. closeonesc boolean - закрывать ли окно при нажатии клавиши Esc. initstate 'max'|'min' - состояние при открытии. headerh integer - высота шапки. headerc string|object - содержимое шапки. Строка или DOM-узел. hideheader boolean|object - прятать шапку при загрузке. footerh integer - высота футера. footerс string|object - содержимое футера. Строка или DOM-узел. hidefooter boolean|object - прятать футер при загрузке. center boolean - по центру. customButtons object - дополнительные кнопки. Каждому ключу name ассоциируется массив вида
Теперь давайте форму "Обратной связи" вставим в Ajax окно : Чтобы не создавать форму я взял стандартную Ucoz форму ($MFORM_1$), если Вы хотите свою форму то перейдите в Панель Управления -->Почтовые формы -->Управление почтовыми формами -->В правом верхнем углу "Создать почтовую форму".Соответственно у вас поменяется $MFORM_1$ на _2, _3, и т. д. Ставим код в html страницу сайта, я вставил в самый низ перед /body :
title="Письмо Админу" - это всплывающая подсказка при наведении на кнопку. input type="button" - стандартный html код кнопки. value="Нажми" - "Нажми" - любая Ваша надпись. Или свою кнопку :
http://megascripts.ru/images/sendemail.png - ссылка на свою кнопку/картинку. alt - это всплывающая подсказка при наведении на кнопку. border - границы вокруг элемента (кнопки). height - высота кнопки. width - ширина кнопки. Вот что получилось :
Как создать Ajax окно в Ucoz с использованием xml
Так как Ajax окно состоит и из xml файла, где описано его содержимое, то : 1. В любом текстовом редакторе потдерживающем кодировку Utf-8 (например Блокнот), пишем :
Разберём этот код : layerContentID - Уникальное имя xml и ссылки (запоминаем, в плоть до регистра) . [CDATA[ HTML код ]] - Ваш HTML код или какие нибудь надписи. 2. Создание ссылки для появления окна :
Давайте разберём код написанный выше: onclick="openLayerB('ID',0,'http://****.xml','Название окна',200,100,'1','','',0,'justify'); return false;">ССЫЛКА ID - Уникальное имя xml и ссылки (тот же ID, что и в xml файле) . http://****.xml - прямая ссылка до xml файла . Название окна - название создаваемого окна . 200,100 - где 200 - ширина и 100 - высота . ССЫЛКА - ссылка или кнопка . 1. Пример с текстовой ссылкой :ССЫЛКА 2. Пример с кнопкой : Код для вставки с кнопкой :
Code
<a href="javascript://"onclick="openLayerB('demo',0,'http://megascripts.ru/demo/demo.xml','Картинка или текст',400,400,'1','','',0,'justify'); return false;"><img src="http://megascripts.ru/images/sendemail.png" alt="Картинка или текст" border="0" height="24" width="24"></a>
Вот и все удачи !
Взято с http://megascripts.ru/publ/shpargalki/kak_sozdat_ajax_okno_v_ucoz/1-1-0-98
