Про uCoz ajax окна уже дано всё знают: как они смотрятся, перемещаются, сколько разных параметров и тд. В интернете уже много таких статьей как создать самим окно,при попытке результат не получался либо был совсем неудобен, этот способ оптимальный даже для самого нового новичка, внимательно читайте и практикуйтесь!
Структура: Code
new _uWnd('уникальный id','Название окна',Высота,Ширина,{
// Параметры окна
},{//контент
});
уникальный id - любые словосочетание (предназначен для обращения к окну, пример закрыть окно нажав на кнопку, указав id у нас закроется именно - это указанное окно )
Название окна - То что будет отображаться в заголовке.
Высота, Ширина - Указываются размеры соответственно окна.
Параметры окна - Параметры предназначены для изменения окна. Пример добавить иконку к заголовку, задать максимальный или минимальный размер окна и тд. вы ознакомитесь ниже.
контент - то что будет отображаться внутри окна - это может быть как текст, так и html код. Основа параметров:
string - Вставка параметров в кавычках '' пример( 'Название окна' )
integer - Вставка напрямую без ' ' пример( 220 )
boolean - Значение 1 - да, 2 - нет пример( min:1 ) Параметры:
autosize boolean - автоопределение размеров.
autosizeonimages boolean - автоматически изменять размеры после загрузки картинок.
hideonresize boolean - прятать содержимое при изменении размеров окна.
waitimages boolean - ждать загрузки всех картинок.
markload string - текст загрузки.
align string - выравнивание.
shadow boolean - тень.
header boolean - отображать ли шапку.
min boolean - отображать ли кнопку Minimize (свернуть).
max boolean - отображать ли кнопку Maximize (развернуть).
close boolean - отображать ли кнопку Close (закрыть).
hidden boolean - скрытое окно.
modal boolean - модальное окно (все остальное пространство закрывается полупрозраным слоем).
alert boolean - окно будет отображаться выше модальных окон.
popup boolean - закрывать ли окно при клике на пространстве вне окна.
nomove boolean - запретить перемещение окна.
resize boolean - разрешить изменение размеров окна пользователем.
fixed boolean - фиксированное окно (прокручивается вместе со страницей).
minh integer - минимальная высота.
maxh integer - максимальная высота.
minw integer - минимальная ширина.
maxw integer - максимальная ширина.
icon string - иконка для окна. Отображается в заголовке.
Все параметры Контент
Контент можно использовать несколькими способами.
1.) Самый простой внутренний, пример: Code
<script type="text/javascript">
$(function(){
new _uWnd('example1','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},'Внутренний контент<br>перевод на новую строку<br> \'Кавычки\' <br>uArts');
});
</script>
Существуют главные одинарные кавычки, в середине которых можно также их вставлять но прибавлять к (только внутренним) ним \ то есть - \' .
2.)Получить из элемента, например у нас есть < /d iv> придумаем ему id, получаем < di v i d="ex ampl ediv" >< /d iv>. Спрячем этот div от показа на странице, позже заставим показываться только в окне. Напишем туда чего-нибудь < d iv id="exam plediv" st yle="displ ay:no ne" >Контент кавычки""" '''''< /di v >.
цепляем к окну, меняем контент, где id недавно созданного di v ex am p ediv: Code
<script type="text/javascript">
$(function(){
new _uWnd('example2','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},$('#examplediv').html();
});
</script>
3.) Xml и iframe
Скачаиваем http://uarts.ucoz.ru/s/x/example3.xml в нём находим layerContentExaxmple3
заменяем id на ваш вымышленный ! примерно так layerContentNewAjax.
находим: Code
<![CDATA[
XML контент<br>перевод на новую строку<br> \'Кавычки\'
jhjhjhjhjh
uarts
]]>
< ![CDATA[ Тут пишем контент то есть html]] >
! Xml сохраняем в кодировке utf-8, обязательно заливаем на сайте где будет окно.
подключаем! Code
<script type="text/javascript">
$(function(){
new _uWnd('Exaxmple3','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},{url:'путь к файлу',xml:true});
});
</script>
iframe Code
<script type="text/javascript">
$(function(){
new _uWnd('Exaxmple4','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},'<iframe src="путь к Странице" scrolling="no" style="width:100%; height:100%; margin:0px; border:0px;"></iframe>');
});
</script>
Как вызвать окно при нажатии на кнопку
регистрируем функцию (действие в второй строке) Code
<script type="text/javascript">
function open_ajax(){
new _uWnd('example5','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},'Внутренний контент<br>перевод на новую строку<br> \'Кавычки\' <br>uArts');
};
</script>
ссылка: Code
<a href="javascript://" onclick="open_ajax();">пример</a>
кнопка: Code
<input type="button" value="Пример" onclick="open_ajax();"/>
как передать текст по нажатию
добавим переменную к примеру exam Code
<script type="text/javascript">
function open_ajax1(exam){
new _uWnd('example6','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},exam);//изменяем контент на переменную
};
</script>
Вызов: Code
<input type="button" value="Пример" onclick="open_ajax1('Контент, контент,\'l\' lolollo, uarts');"/>
Добавим Кнопку закрытия окна: Code
<script type="text/javascript">
var button =_uButton(null, 'button',{ text: 'Закрыть окно', content: 'onclick="_uWnd.close(\'example7\')"' });
function open_ajax2(exam){
new _uWnd('example7','Название окна',220,320,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},exam+button);//изменяем контент на переменную
};
</script>
Вызов: Code
<input type="button" value="Пример" onclick="open_ajax2('Контент, контент,\'l\' lolollo, uarts');"/>
End.