[Ликбез] |
Форма входа |
Меню сайта |
Categories | ||||
|
Главная » Статьи » Статьи о/про uCoz » JS и JQ скрипты для uCoz |
Немного теорииДиалоговое окно (англ. 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 - дополнительные параметры:
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 (свернуть). max:0 - отображать ли кнопку 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> Окошко номер 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> Обращаю внимание: Кавычки в скрипте, а это в данном случае, скрипт, нужно экранировать обратным слешем, либо вообще не писать. Окошко номер 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> Кроме ифрейма, контентом создаваемого окошка может быть и внешний файл, формата 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> Формат XML-файла такой: Code (HTML) < ?xml version="1.0" encoding="UTF-8"? > Контент внешнего файла может быть практически любым, кроме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> 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> Функцию вызова юВинд окна можно прописать как контекстом (прямо в коде элемента, как показано выше), так и отдельной функцией, что зачастую более удобно, так как её можно вынести из кода страницы в отдельный JavaScript-файл. Code (HTML) <script type="text/javascript"> Как и было написано выше, контент внешнего Нарпимер: Исходники Code (HTML) <form action="/" method="get" onsubmit="return false;"> Code (XML) < ?xml version="1.0" encoding="UTF-8"? > И, на последок, достаточно очевидное, но зачастую забываемое - это «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> По теме на форуме: Источник: Диалоговое окно, модальные и не модальные окна, простые, уВинд, окошки, аякс, диалоговое окно, простые, увинд, окошки, | |
Всего комментариев: 14 | 1 2 » | |||||||||
| ||||||||||
1-10 11-12 | ||||||||||