На форуме, а точнее на юКоз-форуме помню один спор, на счет обратной связи в аякс окне.Меня, ну, не совсем меня, а просто спрашивали, как это организовать. Там, если чеснто, я пожадничал выкладывать просто «готовое решение» хотя и не считаю задачу уж очень интересной или сложно выполнимой. Исправляю данную ситуацию, заодно постараюсь расписать решение её решение, чтобы в будущем, подобные вопросы у вас не возникали. Ну а насколько хорошо это получится, если получится вообще - судить не мне. Давайте рассмотрим исходные данные. У вас должен быть сайт. И у вас должна быть страница с обратной связью и формой для неё на ней. Ещё у вас должен быть подключённый к страницам сайта скрипт «u.js». Если у вас сайт на хостинге юКоз, и вы не совершали никаких действий по отключению скрипта - он у вас есть, так как подключён по умолчанию. Если вы всё это имеете, предлагаю начать. Для начала, неплохо бы вспомнить, как вообще создаются модальные окна. Здесь и далее - имеется в виду сервис от юКоз прим.автора. На сайтах в uCoz, есть стандартная функция вызова модального окна, с дизайном, выбранном вами для Панели Управления - далее ПУ. Напомню, что в ПУ, по умолчанию, доступны несколько вариантов цветового оформления:
При написании - будет использоваться «blue» - не потому что мне нравиться этот или не нравятся другие - просто напросто - он включён изначально и менять на другой не вижу смысла. Новое модальное окно (uWnd - здесь и далее ...) создается следующим принципиальным кодом: Code new _uWnd(name, title, width, height, opts, content, menuitems, app)
Подробнее о параметрах, доступных при создании, можно почитать вот здесь. В данном случае заморачиваться не буду и возьму простейшие параметры: Code new _uWnd('myForm','Обратная связь',430,345,{align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0,oncontent:function(){}},'content');
Где: myForm - имя окна - нигде не отображается, но позволяет обращаться именно к этому окну. Из скриптов, например. Обратная связь - отображается в шапке окна (заголовке). Можете написать своё. 430,345 - размеры - по горизонтали и вертикали. align:'left' - выравнивание по горизонтали контента в новом окне. min:1 - отображать ли кнопку Minimize (свернуть). Доступные значения - здесь и далее - 1\0, true\false. max:1 -отображать ли кнопку Maximize (развернуть). shadow:1 - наличие тени. header:1 - отображать ли шапку. resize:0 - разрешить изменение размеров окна пользователем. oncontent:function(){} - функция, выполняющаяся после добавления контента в окно. 'content' - сам контент .... ヅ
В простейшем варианте, мы можем уже создать окно. Вот таким кодом: Code <a title="" href="javascript://" onclick="new _uWnd('myForm','Обратная связь',430,345,{align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0,oncontent:function(){}},'content');return false;"><b>Новое Ювинд окно</b></a>
Новое Ювинд окно Можете сами попробовать. Выглядеть будет вот так:
Задачу помним? Нам нужно, чтобы вместо «просто надписи» content - была форма обратной связи. Для этого нужно, как минимум, две вещи: - 1.Контейнер, куда будем динамически подгружать форму.
- 2.Сама форма, желательно в контейнере, для удобства обращения к ней.
Ну а для удобства написания и, в последующем использовании - пишем простую функцию: Code function mySensForm(el){new _uWnd('myForm','Обратная связь',430,345,{align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0,oncontent:function(){}},'<div id="myForm" style="width:410px;height:320px;"><img src="/_theme/_st/img/ico/ajax.gif" /></div>'); };
В которой определяем место назначения - конечный контейнер для формы: <div id="myForm" style="width:410px;height:320px;"></div> - и назначаем ему ID - уникальный идентификатор. <img src="/_theme/_st/img/ico/ajax.gif" /> - и картинку, которая будет отображаться пока будет выполняться запрос и загружаться форма. function mySensForm(el) - задаём имя (уникальное на странице) функции.
Теперь, мы можем её вызвать вот так: Code <a title="" class="" href="javascript://" onclick="mySensForm(this);return false;"><b>Новое Ювинд окно</b></a>
Новое Ювинд окно_v0 И выглядит оно уже вот так:
Далее, идём в ПУ сайта, Главная » Редактор страниц » Управление материалами » Обратная связи , жмём «изменить» () и заключаем всю форму, нужную нам/вам, в контейнер: Code <div id="msgForm"> С помощью формы обратной связи вы можете связаться с администратором сайта.<br /> $MFORM_1$ </div>
Выглядеть должно вот так ... примерно ...
Пишем функцию, которая будет совершать запрос и загружать код в нужный нам контейнер: Code $.get(el.href,{},function(data){$('#myForm').html($('#msgForm',data).html())});
Где: $.get(el.href - запрос на URL, который мы передадим из ссылки, на страницы с формой. $('#myForm') - контейнер - приёмник. '#msgForm' - контейнер источник.
Собираем всё вместе: Code function mySensForm(el){new _uWnd('myForm','Обратная связь',430,345,{align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0, oncontent:function(){$.get(el.href,{},function(data){$('#myForm').html($('#msgForm',data).html())});}},'<div id="myForm" style="width:410px;height:320px;"><img src="/_theme/_st/img/ico/ajax.gif" /></div>'); };
И сама ссылка/кнопка - по желанию - сами оформите ... Code <a title="Написать администратору" class="myClass" href="/index/0-3" onclick="mySensForm(this);return false;"><b>Написать администратору</b></a>
Где: /index/0-3 - ссылка на вашу страницу с формой обратной связи. onclick="mySensForm(this);return false;" - вызов функции и отмена действия по умолчанию (переход по ссылке) Пример. (был - рабочий ... ヅ ...) Написать администратору Скриншоты:
Как использовать эту функцию, я думаю вы и сами придумаете, если уж дочитали до этого абзаца... Можете, например, организовать сообщение на мыло, о «битой» ссылке, или задать вопрос по теме админу ... или ещё что. Функция будет работать не только к этой форме, так как ссылку, на страницу с формой, мы передаём из самой ссылки .... так что если у вас форма не одна - просто заключайте их в контейнеры и меняйте ссылки. Работает в браузерах: MSIE v7+ (в шестой не проверял ... ヅ ), Apple Safari, Mozilla Firefox, Google Chrome, Opera, Flock.
Источник: Делаем форму обратной связи открывающуюся в новом аякс окне. Для сайтов на юкоз (uCoz) хостинге |