Блог
Главная » 2014 » Март » 4 » Как создать Ajax окно в Ucoz19:39 Как создать 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> Вот и все удачи ! |
|
Всего комментариев: 0 | |