Макеты
  • EXMO affiliate program
  • Выгодный курс обмена валюты

  • Здесь может быть Ваш текст или баннер номер №3...
    Пишите Свободно

NEW: 
Ajax окно в Ucoz

Описание Web разработки: Сейчас Ajax окна используются на многих веб сайтах. Ajax окна придают сайту интенсивности и освобождает такое дорогое место на страничках сайта. Технология Ajax будет нравится и Вам и Вашим пользователям. В Ajax окне можно разместить абсолютно любые материалы - изображения, аудио и видео материалы и много много другого.
Термин AJAX (Asynchronous Javascript And Xml) - методика для связи с сервером без перезагрузки страницы.
Изучив этот урок и Вы сможете создать окно на своём ресурсе. Итак давайте преступим:
Создаём Ajax окно в Ucoz без файлов xml
Установка: Самое простое Ajax окно:

Код


<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 коды.
ССЫЛКА - любой текст (в данном случае ССЫЛКА), можно сделать кнопкой но об этом позже.
Теперь давайте добавим пару фишек :
Основа окна не отличается от предыдущего примера, поэтому я не буду снова описывать.
Полный код :

Код


<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 ,запрещаем).

Немного разберемся с переменными (под спойлером) :



Теперь давайте форму "Обратной связи" вставим в Ajax окно :
Чтобы не создавать форму я взял стандартную Ucoz форму ($MFORM_1$), если Вы хотите свою форму то перейдите в Панель Управления -->Почтовые формы -->Управление почтовыми формами -->В правом верхнем углу "Создать почтовую форму".Соответственно у вас поменяется $MFORM_1$ на _2, _3, и т. д.
Ставим код в html страницу сайта, я вставил в самый низ перед /body :

Код


<script type="text/javascript">function mySensForm(){new_uWnd('myForm','Обратная связь',440,400,{align:'center',waitimages:3000,fadeclosetype:1,shadow:1,header:1,resize:0,autosize:1,modal:1}  
,$('#msgForm').html());};</script>  
<div style="display:none;" id="msgForm">$MFORM_1$</div>



Если вы ставите свою форму поменяйте $MFORM_1$ на свой номер
'Обратная связь' - на свой заголовок.
Этот код в то место где хотите видеть кнопку :

Код


<a title="Письмо Админу" href="javascript://" onclick="mySensForm();return false;"><input type="button" value="Нажми"></a>



title="Письмо Админу" - это всплывающая подсказка при наведении на кнопку.
input type="button" - стандартный html код кнопки.
value="Нажми" - "Нажми" - любая Ваша надпись.



Или свою кнопку :

Код


<img onclick="mySensForm();return false;" src="http://megascripts.ru/images/sendemail.png" alt="Письмо Админу" border="0" height="24" width="24"></a>



http://megascripts.ru/images/sendemail.png - ссылка на свою кнопку/картинку.
alt - это всплывающая подсказка при наведении на кнопку.
border - границы вокруг элемента (кнопки).
height - высота кнопки.
width - ширина кнопки.
Вот что получилось :
Письмо Админу

Как создать Ajax окно в Ucoz с использованием xml
Так как Ajax окно состоит и из xml файла, где описано его содержимое, то :
1. В любом текстовом редакторе потдерживающем кодировку Utf-8 (например Блокнот), пишем :

Код


<ajax><cmd t="layerContentID" p="innerHTML"><![CDATA[HTML код]]></cmd></ajax>



Разберём этот код :
layerContentID - Уникальное имя xml и ссылки (запоминаем, в плоть до регистра) .
[CDATA[ HTML код ]] - Ваш HTML код или какие нибудь надписи.
2. Создание ссылки для появления окна :

Код


<a href="javascript://" onclick="openLayerB('ID',0,'http://****.xml','Название окна',200,100,'1','','',0,'justify'); return false;">ССЫЛКА</a>



Давайте разберём код написанный выше:
onclick="openLayerB('ID',0,'http://****.xml','Название окна',200,100,'1','','',0,'justify'); return false;">ССЫЛКА
ID - Уникальное имя xml и ссылки (тот же ID, что и в xml файле) .
http://****.xml - прямая ссылка до xml файла .
Название окна - название создаваемого окна .
200,100 - где 200 - ширина и 100 - высота .
ССЫЛКА - ссылка или кнопка .

Код для вставки с кнопкой :

Код


<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

Автор/Источник: http://megascripts.ru/publ/shpargalki/kak_sozdat_ajax_okno_v_ucoz/1-1-0-98



Выгодный курс обмена валюты

Категория: Ucoz | Добавил: ♔Ďęŕჳҝuŭ♔ | Теги: AJAX, Окно, uCoz Ajax окно в Ucoz AJAX, Окно, uCoz

Похожие новости:

Имя *:
Email *: