Главная » Статьи » Статьи о/про uCoz » JS и JQ скрипты для uCoz

Форма обратной связи в аякс окне (юВинд / uWnd)

На форуме, а точнее на юКоз-форуме помню один спор, на счет обратной связи в аякс окне.Меня, ну, не совсем меня, а просто спрашивали, как это организовать.
Там, если чеснто, я пожадничал выкладывать просто «готовое решение» хотя и не считаю задачу уж очень интересной или сложно выполнимой.
Исправляю данную ситуацию, заодно постараюсь расписать решение её решение, чтобы в будущем, подобные вопросы у вас не возникали.
Ну а насколько хорошо это получится, если получится вообще - судить не мне.

Давайте рассмотрим исходные данные.

У вас должен быть сайт. И у вас должна быть страница с обратной связью и формой для неё на ней. Ещё у вас должен быть подключённый к страницам сайта скрипт «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"> <!--Start Контейнер-->
С помощью формы обратной связи вы можете связаться с администратором сайта.<br />
$MFORM_1$
</div> <!--/End Контейнер-->

Выглядеть должно вот так ... примерно ...


Пишем функцию, которая будет совершать запрос и загружать код в нужный нам контейнер:

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.

P.S.

...Удачи... ヅ
Flesh.





Источник: Делаем форму обратной связи открывающуюся в новом аякс окне. Для сайтов на юкоз (uCoz) хостинге
Категория: JS и JQ скрипты для uCoz | Добавил: likbezz (08.08.2010)
Просмотров: 16054 | Комментарии: 53 | Теги: uWnd, связи, юВинд, (юВинд), Аякс, JS и JQ скрипты для uCoz, Форма, обратной, окне, юкоз
Всего комментариев: 531 2 3 4 »
0  
52  Александр [Материал[13.05.2014]

Поставил я это чудо. всё вроде как работает. но обнаружил забавный баг.. в яндекс браузере, хроме, Аякс окошко уезжает.. то есть если не уменьшить сайт через контрл+колёсико мышки, мы не увидим его.
а вот в ие всё прекрасно. и в опере тоже норм... ИЕ 11.
но не в этом суть. из за чего окошко может убегать?

0  
53  likbezz [Материал[08.06.2014]

Цитата Александр
из за чего окошко может убегать?

Без понятия..
У меня ровно по центру, и в Хроме и Я.Браузере

0  
51  akre [Материал[14.03.2014]

Цитата Максим
Всем доброго времени суток. У меня такая проблема. Все сделал как написано, все получается и работает. Но стоит выйти из своего аккаунта и попробовать отправить письмо, как сразу отправляет на страницу входа, а на сайте в принципе не предусмотрена регистрация. Если открывать отдельным окном, то все отправляется. Ограничения пользователей тоже смотрел. В чем может быть проблема?

sad у меня такая же проблема может кто поможет с ее решением

0  
50  Евгений [Материал[01.08.2013]

Можно ли вызвать форму обратной связи через файловый менеджер, чтобы не было лишней страницы index/0-3 ?

0  
49  cpstriker [Материал[28.06.2013]

Елки палки у меня вопросы не заканчиваются. Я просто сайт переделываю. Скрипт работает, все супер, но все то же самое вставляю на сайт с поддоменном и не работает. Я не заливаю скрипт на ftp поддомена, просто прописал ссылку на главный сайт, где лежит скрипт и полную ссылку на страницу почтовой формы и в итоге у меня открывается просто пустое окно, даже кружочек загрузки не крутится, такое впечатление, что он просто не видит скрипт.

0  
48  cpstriker [Материал[28.06.2013]

Единственное, что я написал запрос если поле OTHER_1 заполнено, то одна ссылка на форму, если не заполнено, но другая ссылка, можно создавать и без запросов.

Код
  
<a title="" href="javascript://" onclick="openzakaz();return false;">текст или картинка</a>  
  
<a title="" href="javascript://" onclick="opennalichie();return false;">текст или картинка</a>  

0  
47  cpstriker [Материал[28.06.2013]

Вот немного приблизился к решению, но она подтягивает просто почтовую форму, таким образом если не нужно создавать дополнительные страницы, то можно просто создать формы. Возможно создавать на одной странице много форм с нужным размером.

Это вставляем туда где нужен вывод формы по клику

Код
<?if ($OTHER1$)?>
<a title="" href="javascript://" onclick="openzakaz();return false;">текст или картинка</a>
<?else?>
<a title="" href="javascript://" onclick="opennalichie();return false;">текст или картинка</a>
<?endif?>


Это вниз страницы между $GLOBAL_BFOOTER$ и </body>
Код
<div style="display:none;" id="form_1">$MFORM_1$</div>  
<div style="display:none;" id="form_4">$MFORM_4$</div>  

function openzakaz(){  
new _uWnd('zakaz','Название формы',500,500,{align:'center',shadow:1,header:1,resize:0,autosize:1},$('#form_1').html());  
};

function opennalichie(){  
new _uWnd('nalichie','Название формы',600,600,{align:'center',shadow:1,header:1,resize:0,autosize:1},$('#form_4').html());  
};


Я сделал для двух форм. Но теперь вопрос как сделать, что бы в форме был еще дополнительный текст сверху, не название формы, а допустим описать саму форму и так же остается открытым вопрос в работе формы на мобильном устройстве.

0  
46  cpstriker [Материал[28.06.2013]

Блин сижу еще голову ломаю над тем, как же сделать на одной странице 3 формы с разным разрешением окна. Нашел ID которое можно менять, как я понял, но этот ID к странице, этот же ID можно изменить в Java script, но этого ID нет в ссылке. Просто разный контент по размеру и нужно что бы каждый контент отображался в полном размере. Спасибо за помощь, понимание и простите за большое кол-во сообщений сразу smile

0  
45  cpstriker [Материал[28.06.2013]

Да по передвижению окна разобрался, нужно сделать

Код
resize:1
, но в планшете не работает!
Цитата (cpstriker)
Да по передвижению окна разобрался, нужно сделать
Код
resize:1
, но в планшете не работает!

0  
44  cpstriker [Материал[28.06.2013]

Вот нашел одно интересное решение

Код
<?if $user_agent_pda$=false ?>тут ссылка если мобильное устройство<?else?>тут ссылка на ajax окно<?endif?>

Но что то не работает sad

0  
43  cpstriker [Материал[28.06.2013]

Все класс, работает, давно капал, но нашел только одну форму которая не позволяла делать несколько ссылок на почтовые формы, так что спасибо. У меня вот такой вопрос, как сделать ajax окно передвижным, просто проблема возникает, когда я захожу через планшет, окно центрируется, только когда отдаленно, а когда приближаю, то форма съезжает и не получается ее заполнить.
Или другое тогда решение, я правда сайты под мобильные устройства еще не подгонял, но уже понимаю, что нужно. Как реализовать такое, что если с мобильного устройства зашли, то ссылка идет не на ajax окно, а просто на страницу. Спасибо за помощь.

1-10 11-20 21-30 31-35
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]