Главная » Статьи » Статьи о/про uCoz » JS и JQ скрипты для uCoz
Подробно о создании uWnd (аякс) окошек (примеры реализации)

Немного теории

Диалоговое окно (англ. dialog box) - в графическом пользовательском интерфейсе специальный элемент интерфейса, окно, предназначенное для вывода информации и (или) получения ответа от пользователя. Получил своё название потому, что осуществляет двустороннее взаимодействие компьютер-пользователь («диалог»): сообщая пользователю что-то и ожидая от него ответа.

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

Простейшим типом диалогового окна является окно сообщения (англ. message box, англ. alert box), которое выводит сообщение и требует от пользователя подтвердить, что сообщение прочитано.


Не модальные (англ. modeless) диалоговые окна используются в случаях, когда выводимая в окне информация не является существенной для дальнейшей работы системы. Поэтому окно может оставаться открытым, в то время как работа пользователя с системой продолжается.


Модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет.

© Википедия

Юкозовские юВинд (аякс) окна, вполне можно отнести к разряду диалоговых окон. Они тоже могут быть «модальными» и «не модальными»,что указывается в параметрах вызова, но об этом позже.
Сейчас же, покажу как создавать простейшие юВинд окошки, и немного расскажу о функциях вызова.


юВинд окошко создаётся следующим кодом:

Code (JavaScript)
<a href="javascript://" onclick="new _uWnd('name','title',500,200,{autosize:1,maxh:300,minh:100},content);return false;">Яссылка</a>

Где:

namestring - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами. Уникальное.

titlestring -заголовок окошка. Отображается в шапке.

500integer - ширина окошка.

200integer - высота окошка.

{autosize:1,maxh:300,minh:100}object - дополнительные параметры:

autosize:1 - автоопределение размеров -то есть, будет ли окошко подогнано под содержимое (1\0- да\нет - true\false - здесь и далее)

maxh:300,minh:100 - максимальная и минимальная высота (в пикселях).

contentobject | string | function -контент. Может быть строкой, объектом или функцией, возвращающей строку.

Подробнее, о дополнительных параметрах , читать вотздесь: «helper.ucoz.ru»

Вот ещё, достаточно часто используемые параметры вызова:

maxh:300,minh:100 - максимальная и минимальная высота (в пикселях).

maxw:300,minw:100 - максимальная и минимальная ширина (в пикселях).

popup:1 - закрывать ли окно при клике на пространстве вне окна. (1\0 - да\нет)

modal:0 - модальное окно (все остальное пространство закрывается полупрозрачным слоем).

waitimages:30000 - ждать загрузки всех картинок (время в миллисекундах).

autosizewidth:1 - автоопределение ширины.

hideonresize:1 - скрывать содержимое при изменении размеров окна.

minh:100 - минимальная высота (в пикселях).

minw:100 - минимальная ширина (в пикселях).

min:0 - отображать ли кнопку Minimize (свернуть). Кнопка Minimize

max:0 - отображать ли кнопку Maximize (развернуть). Кнопка Maximize

resize:1 - разрешить изменение размеров окна пользователем.

closeonesc:1 - закрывать ли окно при нажатии клавиши Esc ...

align:'center'string - позиционирование содержимого (варианты:«center», «left», «right»).

iconstring - иконка для окна. Отображается в заголовке.

{url:'http://my_site.ucoz.ru/file.xml'} - ссылка на xml-документ c контентом создаваемого окошка - только с вашего домена ...


Обращаю внимание:
Дополнительные параметры в функции вызова юВинд окошка перечисляются через запятую. Строковые значения (string) - в одинарных кавычках.

Примеры:

Окошко номер 1 (Контент - текст)

Code (JavaScript)
<a href="javascript://" onclick="new _uWnd('New1','Моё окно 1',500,300,{autosize:1,maxh:300,minh:100},'Здесь мой контент');return false;">Окошко номер 1</a>

» Смотреть пример: Окошко номер 1 (Контент - текст)

Окошко номер 2 (Контент - картинка)

Code (JavaScript)
<a href="javascript://" onclick="new _uWnd('New2','Моё окно 2',500,300,{autosize:1,minh:100},'<img src=\'/_content/_publ/_files/01/_01_800x600.jpg\'width=\'800\' height=\'600\' alt=\'Контент - картинка\' />');return false;">Окошко номер 2</a>

» Смотреть пример: Окошко номер 2 (Контент - картинка)

Обращаю внимание:
Кавычки в скрипте, а это в данном случае, скрипт, нужно экранировать обратным слешем, либо вообще не писать.

Окошко номер 3 (Контент - ифрейм)

Code (JavaScript)
<a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',500,300,{autosize:1,maxh:300,minh:100},'<iframesrc=\'/_content/_publ/_files/01/uWnd_frame.html\' style=\'margin:0;padding:0;width:100%;height:300px;\'scrolling=\'auto\'></iframe>');return false;">Окошко номер 3</a>

» Смотреть пример: Окошко номер 3 (Контент - ифрейм)

Кроме ифрейма, контентом создаваемого окошка может быть и внешний файл, формата xml.

Например:

Code (JavaScript)
<a href="javascript://" onclick="new _uWnd('New4','Моё окно 4',500,300,{autosize:1,maxh:300,minh:100,align:'left'},{url:'/_content/_publ/_files/01/uWnd_xml.xml'});return false;">Окошко номер 4</a>

» Смотреть пример: Окошко номер 4 (Контент - xml-файл)

Формат XML-файла такой:

Code (HTML)
< ?xml version="1.0" encoding="UTF-8"? >
<ajax>
<cmd p="content"><![CDATA[
Здесь ваш контент
]]></cmd>
</ajax>

Контент внешнего файла может быть практически любым, кромеJavaScript-функций с document.write('');.


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

Варианты:

oncontent - функция, выполняющаяся после добавления контента в окно.

onclose - функция, выполняющаяся после закрытия окна.

onbeforeclose - функция, выполняющаяся до закрытия окна (после клика на кнопку закрытия).

oninit - функция, выполняющаяся при открытии окна.

onmousemove - функция, выполняющаяся при движении мышью над контентом окошка.

onposchange - функция, выполняющаяся при каждом изменении позиции окна.

onactivate - функция, выполняющаяся при получении окошком фокуса.

ondeactivate - функция, выполняющаяся при потере окошком фокуса.


Примеры вызова:

Code (JavaScript)
<a href="javascript://" onclick="new _uWnd('New5','Моё окно 5',500,300,{autosize:1,maxh:300,minh:100,align:'left',oncontent:function(){alert('Контент получен');}},{url:'/_content/_publ/_files/01/uWnd_xml.xml'});return false;">Окошко номер 5</a>

» Смотреть пример: Окошко номер 5 (Контент - xml-файл+функция oncontent();)

Code (JavaScript)
<a href="javascript://" onclick="new_uWnd('New6','Моё окно 6',500,300,{autosize:1,maxh:300,minh:100,align:'left',onbeforeclose:function(){alert('Вы точно хотите закрыть окно?');}},{url:'/_content/_publ/_files/01/uWnd_xml.xml'});return false;">Окошко номер 6</a>

» Смотреть пример: Окошко номер 6 (Контент - xml-файл+функция onbeforeclose();)

Функцию вызова юВинд окна можно прописать как контекстом (прямо в коде элемента, как показано выше), так и отдельной функцией, что зачастую более удобно, так как её можно вынести из кода страницы в отдельный JavaScript-файл.
Нарпимер:

Code (HTML)
<script type="text/javascript">
function popUp(el){var title=el.title||'uWnd',src=el.href||false;
if(src){new _uWnd('uWnd',title,500,300,{max:1,min:1,popup:0,autosize:0,resize:0,closeonesc:1,align:'center'},'<iframe src="'+src+'" frameborder="0" scrolling="auto" allowtransparency="true" style="border:0 none;margin:0;padding:0;width:100%;height:255px;"></iframe>');return false;}};
</script>
<a title="Контент - ифрейм «Что такое фреймы»" href="/_content/_publ/_files/01/uWnd_frame.html" onclick="popUp(this);return false;" target="_blank">Окошко номер 7</a>

» Смотреть пример: Окошко номер 7 (Контент - ифрейм+функция открытия окна)

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

Нарпимер:


» Смотреть пример: Окошко номер 8 (Контент - XML+функция выбора и закрытия окна))

Исходники
Code (HTML)
<form action="/" method="get" onsubmit="return false;">
<label style="display:block;" for="my_region"><a href="javascript://" onclick="new _uWnd('uWnd_region','Выбрать регион',350,470,{modal:1,popup:1,autosize:1,shadow:1}, {url:'/_content/_publ/_files/01/uWnd_region.xml'});return false;"><strong>» Выбрать регион «</strong></a></label>
<p>Регион:&nbsp;<input value="" id="my_region" name="my_region" size="30" style="width:300px;" maxlength="70" type="text" /></p>
</form>

Code (XML)
< ?xml version="1.0" encoding="UTF-8"? >
<ajax><cmd p="content"><![CDATA[
<style type="text/css">
#reg_rus_wind{text-align:left;}
#reg_rus_wind li:hover{color:red!important;cursor:pointer;}
</style>
<fieldset><legend>Выберите регион</legend>
<ul id="reg_rus_wind">
<li>Москва и Московская область</li>
<li>Санкт-Петербург и Ленинградская область</li>
<li>Алтайский край</li>
<li>Амурская область</li>
<li>Архангельская область</li>
<li>Астраханская область</li>
<li>Белгородская область</li>
<li>Брянская область</li>
<li>Владимирская область</li>
<li>Волгоградская область</li>
<li>Вологодская область</li>
<li>Воронежская область</li>
<li>Еврейская автономная область</li>
<li>Забайкальский край</li>
<li>Ивановская область</li>
<li>Иркутская область</li>
<li>Кабардино-Балкарская Республика</li>
<li>Калининградская область</li>
<li>Калужская область</li>
<li>Камчатский край</li>
<li>Карачаево-Черкесская Республика</li>
<li>Кемеровская область</li>
<li>Кировская область</li>
<li>Костромская область</li>
<li>Краснодарский край</li>
<li>Красноярский край</li>
<li>Курганская область</li>
</ul>И так далее ...</fieldset>
<script type="text/javascript">$('#reg_rus_wind li').click(function(){
$('#my_region').val($(this).html());setTimeout("_uWnd.close('uWnd_region')",300);return false;
});</script>
]]></cmd></ajax>


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

Как показано в примере выше (№ 8), при выборе региона,через 300мс окошко закрывается.
Реализовано это действие функцией:

Code (JavaScript)
setTimeout("_uWnd.close('uWnd_region')",300);

Где:

_uWnd.close('uWnd_region') - функция закрытия окна с именем «uWnd_region», которое задаётся при открытии (первый аргумент при создании окна):

Code (HTML)
<a href="javascript://" onclick="new_uWnd('uWnd_region','Выбрать регион',350,470,{modal:1,popup:1,autosize:1,shadow:1},{url:'/_content/_publ/_files/01/uWnd_region.xml'});return false;">» Выбрать регион «</a>


По теме на форуме:


Автор: Likbezz aka Flesh

Использовались материалы с сайта: U.Helper
Архив с примерами и сопутствующими файлами (87.6 Kb)




Источник: Диалоговое окно, модальные и не модальные окна, простые, уВинд, окошки, аякс, диалоговое окно, простые, увинд, окошки,
Категория: JS и JQ скрипты для uCoz | Добавил: likbezz (05.08.2011)
Просмотров: 18535 | Комментарии: 14 | Теги: пользователь, функция, аякс, юВинд, окошко, модальный, диалоговый, окно, работа
Всего комментариев: 141 2 »
0  
14  Роман [Материал]  [21.08.2013]

Добрый день, может Вы мне тоже чем нибудь поможете, проблема такая, создал аякс окно, в нем розместил фреим, после открытия аякс окна фрейм перекидывает на другой сайт, можно ли как то заблокировать этот переход

0  
13  CSS _uWnd [Материал]  [18.05.2013]

Можно ли сделать разным _uWnd-окнам на одном сайте разные стили? (Если предполагается использовать их для разных целей.)

0  
12  Василий [Материал]  [17.03.2013]

Огромное спасибо за статью.
Хотел разместить в AJAX-окно слайдшоу от Ucoz.
Там xml-файл написан по другому ( http://turka.at.ua/photo/57-0-0-21 )

<ajax>
<cmd p="innerHTML" t="slideshowBlock7">
<![CDATA[ <object data="/.s/flash/slideshow.swf" ........

............</object>]]>
</cmd>
</ajax>

Можно ли тут что-то сделать ?

0  
11  fart [Материал]  [27.10.2012]

подскажите, почему не работает скрипт? Вот у меня есть кнопка регистрации

Code

<script type="text/javascript">  
  function spoutreg(){new _uWnd('spoutreg','Регистрация',320,500,{align:0,shadow:1,autosize:1,resize:0},'<iframe src="/index/3" style="width: 500px; height:450px; margin:0px; border:0px;"></iframe>'); }</script>  
  <a href="javascript:;" onclick="spoutreg();return false;"><b>Зарегистрироваться</b></a>


после регистрации человека перекидывает в этом же аякс окне на страницу входа, там у меня стоит вот эта кнопка

Code
<a href="javascript://" onclick="_uWnd.close(\'spoutreg\');new _uWnd(\'LF\',\' \',400,250,{autosize:0,closeonesc:1,resize:1},{url:'/log_form.xml'});return false;">Ввести данные для входа</a>


надо чтобы она закрывала предыдущее окно и открыла новое с формой входа, но почему то не происходит ни того ни другого! Иначе, если не закрыть предыдущее окно то сайт перезагрузится в нем

0  
9  Koeshiro [Материал]  [24.05.2012]

я вот пытался сделать таблицу внутри аякса но не получилось не подскажите в чём проблема?

Code
<a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',500,300,{autosize:1,maxh:300,minh:100},'<table width=\"600\" height=\"500"\ title=\"Скриншоты"\ style=\" background-image: url(/1.png) ; background-size: cover;\" border=\"2\">  
<thead>  
<script type=\"text/javascript\">function changeBg(e){  
document.getElementById('scrinblock');};  
</script></thead>  
<tbody>  
<tr align=\"center\" >  
<td>  

<img id="scrinblock" src=\"+e.src+\" width=\"700"\ />  

</td></tr>  
<tr align=\"center\"><td>  
<img onclick=\"changeBg(thes);\" src=\"ссылка на скрин\"  width=\"70\" height=\"70\" />  
<img src=\"ссылка на скрин\"  height=\"70\" width=\"70\" />  
<img src=\"ссылка на скрин\\"  height=\"70\" width=\"70\" />  
<img src=\"ссылка на скрин\"  height=\"70\" width=\"70\" />  

</td></tr></tbody></table>');return false;"> Скриншоты</a>

0  
10  likbezz [Материал]  [26.05.2012]

Quote (Koeshiro)
я вот пытался сделать таблицу внутри аякса но не получилось не подскажите в чём проблема?

В переносах строк, в строке скрипта их не ложно быть.
Типа:
Code
<a href="javascript://" onclick="new _uWnd('New3','Моё окно 3',500,300,{autosize:1,maxh:300,minh:100},'<table width=\"600\" height=\"500"\ title=\"Скриншоты"\ style=\"background-image:url(/1.png);background-size:cover;\" border=\"2\"><thead><script type=\"text/javascript\">function changeBg(e){ document.getElementById('scrinblock');};</script></thead><tbody><tr align=\"center\" ><td><img id="scrinblock" src=\"+e.src+\" width=\"700"\ /></td></tr><tr align=\"center\"><td><img onclick=\"changeBg(thes);\" src=\"ссылка на скрин\" width=\"70\" height=\"70\" /><img src=\"ссылка на скрин\" height=\"70\" width=\"70\" /><img src=\"ссылка на скрин\\" height=\"70\" width=\"70\" /><img src=\"ссылка на скрин\" height=\"70\" width=\"70\" /> </td></tr></tbody></table>');return false;"> Скриншоты</a>

0  
8  Сергей [Материал]  [24.05.2012]

Вот спасибо!
применил
{_uWnd.getbyname('Имя_окна').checksize();}
в самом .load сработало

Вот благодаря таким примерам и комментариям начинаешь немного понимать, что к чему, спасибо еще раз!

0  
7  Сергей [Материал]  [03.05.2012]

Приветствую! Отличная статья, все варианты попробовал.
likbezz, подскажи пожалуйста
Вставил jQuery в ajax-окно с функцией load. Проблема в том, что размер аякс окна определяется до того, как подгружается html по функции load. Появляется полоса прокрутки. Это можно как-то устранить?

0  
6  tax [Материал]  [10.04.2012]

всем привет! тема супер! biggrin
скажите, как окошко с предложением зарегистрироваться на сайте

Code
<?else?><script type="text/javascript">window.onload = function () {new _uWnd('site','',-275,-70,{align:'center',header:0,resize:0,nomove:1,modal:0},'<div>Надоело это окошко?<br>Зарегистрируйся, и забудешь о его существовании!</div><hr><a href="/index/3">Регистрация</a> | <a href="javascript://" onclick="_uWnd.close(\'site\');new _uWnd(\'LF\',\' \',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:\'/index/40\'});return false;">Быстрый вход</a> | <a href="javascript://" onclick="_uWnd.close(\'site\')">Закрыть окно</a><hr>');}</script><?endif?>

расположить в левом нижнем углу, и что-бы оно показывалось каждому уникальному гостю только один раз в сутки? вообще возможно так сделать?

0  
5  Евгений [Материал]  [24.02.2012]

Kikbezz, ты не прав, можно поставить информер в аякс

Code
<!--Информер в аякс--!>
<script type="text/javascript">
function openchat(){new _uWnd('chat','Мини-чат',300,100,{align:0,shadow:0,close:1,autosize:1,maxh:500,minh:100,resize:0}, $("#chat").html() )}
</script>
<div style="display:none;" id="chat">информер</div>

<a href="#" onclick="openchat();">Ссылка открытия</a>
<!--end Информер в аякс--!>

0  
3  Татьяна [Материал]  [18.02.2012]

А возможно ли внутри такого окошка вызвать почтовую форму?

0  
4  likbezz [Материал]  [21.02.2012]

Татьяна,

Quote (Татьяна)
А возможно ли внутри такого окошка вызвать почтовую форму?

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

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