Как создать Ajax окно в Ucoz - Шпаргалки - Статьи для веб-мастера - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Где сидел кузнечик в детской песни Н.Носова ?
Всего ответов: 1269
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Для Веб-Мастера » Шпаргалки

Как создать 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 ,запрещаем).

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

Теперь давайте форму "Обратной связи" вставим в Ajax окно :
Чтобы не создавать форму я взял стандартную Ucoz форму ($MFORM_1$), если Вы хотите свою форму то перейдите в Панель Управления -->Почтовые формы -->Управление почтовыми формами -->В правом верхнем углу "Создать почтовую форму".Соответственно у вас поменяется $MFORM_1$ на _2, _3, и т. д.
Ставим код в html страницу сайта, я вставил в самый низ перед /body :
Code
<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$ на свой номер
'Обратная связь' - на свой заголовок.
Этот код в то место где хотите видеть кнопку :
Code
<a title="Письмо Админу" href="javascript://" onclick="mySensForm();return false;"><input type="button" value="Нажми"></a>

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

Или свою кнопку :
Code
<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 (например Блокнот), пишем :
Code
<ajax><cmd t="layerContentID" p="innerHTML"><![CDATA[HTML код]]></cmd></ajax>

Разберём этот код :
layerContentID - Уникальное имя xml и ссылки (запоминаем, в плоть до регистра) .
[CDATA[ HTML код ]] - Ваш HTML код или какие нибудь надписи.
2. Создание ссылки для появления окна :
Code
<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 - высота .
ССЫЛКА - ссылка или кнопка .
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>


Вот и все удачи !



При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:

Добавил: Гость (13.10.2012) | Просмотров: 11999 | Комментарии: 18 | Рейтинг: 4.2/13
Теги: статья, окна, аякс окна, AJAX, создать Ajax окно, оздать аякс окно, Ajax окно
Всего комментариев: 181 2 »
Сообщение №1 от Alex
Добавлен: 20.02.2013

Здрасти всем!
не получается вставить форму обратной связи...вернее я её вставляю а при нажатии на кнопку не чего не происходит в чём может быть проблема?
заранее спасибо!
Сообщение №2 от Олег
Добавлен: 20.02.2013

Дайте ссылку на страницу где вы ставите форму.
Сообщение №3 от Alex
Добавлен: 20.02.2013

Этот код ставлю в редакторе страниц перед /body

И на саму кнопку вставляю в самый низ главной страницы вот ссылка
Понять не могу почему «не фурычит», наверно потому-что нуб!
Сообщение №4 от Олег
Добавлен: 21.02.2013

Попробуйте так
ПУ сайта, Главная » Редактор страниц » Управление материалами » Обратная связь , жмём «изменить» и заключаем всю форму в контейнер:

<div id="msgForm">
$MFORM_1$
</div>

Должно работать.
Сообщение №5 от Сергей
Добавлен: 20.10.2013

Всем - здравствуйте!
Понравилась эта форма обратной связи, пытаюсь вставить, но с места: "Ставим код в html страницу сайта, я вставил в самый низ перед /body :" ничего не получается . Буду очень благодарен, если кто-то знающий поможет осуществить задуманное.
P.S. Я пока всё пытаюсь сделать на тестовом (черновом) сайте.
Сообщение №6 от Олег
Добавлен: 20.10.2013

Здравствуйте !
Дайте ссылку на сайт. Попробуем Вам помочь.
Сообщение №7 от Олег
Добавлен: 20.10.2013

А где у вас строчка <div style="display:none;" id="msgForm">$MFORM_1$</div>
Я её не нашёл !!! - это первое
Сообщение №8 от Олег
Добавлен: 20.10.2013

Короче, вставьте это в левый контейнер "Обратная связь"


Потом

ПУ сайта, Главная » Редактор страниц » Управление материалами » Обратная связь , жмём «изменить»:
И должно быть так.
<div id="msgForm">
$MFORM_1$
</div>

Описал, по полочкам - подробней некуда.
Сообщение №9 от Сергей
Добавлен: 20.10.2013

Всё понял - заработало!
Старый-то скрипт у тега /body я забыл удалить. Удалил и стало всё открываться.
Большое спасибо за помощь, Олег!
Сообщение №10 от Сергей
Добавлен: 20.10.2013

И ещё, пожалуйста, ответьте на один вопрос - надо уж тему до конца выяснить - а как мне эту форму увязать так, чтобы сообщение уходило по определенному адресу. Куда этот адрес вписывать?
Сообщение №11 от Сергей
Добавлен: 20.10.2013

Ещё раз большое спасибо за код - я уже всё нашёл, куда надо адрес вставить.
Сообщение №12 от Ruslan
Добавлен: 22.12.2013

Доброго времени суток! Могли бы подсказать как сделать на сайте форму регистрации как у вас в мондальном окне? Скажите пожалуйста, а то уже вторую неделю как ищу и не могу найти.. А у вас зачетная форма! Спасибо заранее!
Сообщение №13 от Олег
Добавлен: 22.12.2013

Если я понял о чём Вы меня спрашиваете то вот http://megascripts.ru/load....-1-0-37
Сообщение №14 от Роман
Добавлен: 05.01.2014

Доброго времени суток! Подскажите как поставить такие же скрипты на сторонние сайты? У меня собственный сайт написанный вручную на php и попробовав поставить окно обратной связи, оно не работает! Заранее спасибо!
Сообщение №15 от Олег
Добавлен: 05.01.2014

Здравствуйте Роман !
К сожалению ничем не могу Вам помочь. С PHP плохо знаком.
Сообщение №16 от Роман
Добавлен: 05.01.2014

Ну а для html? Не ucoz!
Сообщение №17 от Олег
Добавлен: 05.01.2014

Здесь написано как создать Ajax окно в ucoz а не окно обратной связи. Обратная связь здесь стоит для примера. Как сделать ФОРМУ ОБРАТНОЙ СВЯЗИ на рукописном движке Я НЕ ЗНАЮ.
1-10 11-11
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Морской лайнер при сжигании каждого галлона дизельного топлива продвигается только на 6 дюймов.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта