Ajax-окна придают сайту большего функционала, оперативности обмена и удобства.
И так приступим к творению.
Code
new _uWnd('Уникальный id','Название окна', Высота, Ширина,{
// Параметры
},{//контент
});
- слово или словосочетание (нужен далее для обращения к этому окну, обработки событий с этим окном)
Название окна - То что будет отображаться в заголовке окна.
Высота, Ширина - Размеры окна.
Параметры - Параметры окна. Например кнопки управления окном, максимальные/минимальный размеры окна.
Контент - Текст или html код, отображаемый внутри окна.
Немного разберемся с переменными: string - Строковая переменная в одинарных кавычках '', напр.( 'Название окна' )
integer - Целое число, напр.(220)
boolean - Логическая переменная. Принимает значение 1 - да, 2 - нет или true - да, false - нет, напр.( min:1 )
Теперь параметры:
autosize boolean - автоопределение размеров.
autosizewidth boolean - автоопределение ширины.
autosizeonimages boolean - автоматически изменять размеры после загрузки картинок.
hideonresize boolean - прятать содержимое при изменении размеров окна.
waitimages boolean - ждать загрузки всех картинок.
markload string - текст загрузки.
align string - выравнивание.
shadow boolean - тень.
header boolean - отображать ли шапку.
min boolean - отображать ли кнопку Minimize (свернуть).
max boolean - отображать ли кнопку Maximize (развернуть).
design string - дизайн. Является ключем объекта _uWnd.designs.
close boolean - отображать ли кнопку Close (закрыть).
hidden boolean - скрытое окно.
modal boolean - модальное окно (все остальное пространство закрывается полупрозраным слоем).
alert boolean - окно будет отображаться выше модальных окон.
popup boolean - закрывать ли окно при клике на пространстве вне окна.
nomove boolean - запретить перемещение окна.
hideonmove boolean - скрывать содержимое окна при перемещении окна.
resize boolean - разрешить изменение размеров окна пользователем.
fixed boolean - фиксированное окно (прокручивается вместе со страницей).
minh integer - минимальная высота.
maxh integer - максимальная высота.
minw integer - минимальная ширина.
maxw integer - максимальная ширина.
icon string - иконка для окна. Отображается в заголовке.
oncontent function - функция, выполняющаяся после добавления контента в окно.
onclose function - функция, выполняющаяся после закрытия окна.
onbeforeclose function - функция, выполняющаяся до закрытия окна (после клика на кнопку закрытия).
oninit function - функция, выполняющаяся при открытии окна.
onmousemove function - функция, выполняющаяся движении мышью над контентом окошка.
onposchange function - функция, выполняющаяся при каждом изменении позиции окна.
onactivate function - функция, выполняющаяся при получении окошком фокуса.
ondeactivate function - функция, выполняющаяся при потере окошком фокуса.
closeonesc boolean - закрывать ли окно при нажатии клавиши Esc.
initstate 'max'|'min' - состояние при открытии.
headerh integer - высота шапки.
headerc string|object - содержимое шапки. Строка или DOM-узел.
hideheader boolean|object - прятать шапку при загрузке.
footerh integer - высота футера.
footerс string|object - содержимое футера. Строка или DOM-узел.
hidefooter boolean|object - прятать футер при загрузке.
center boolean - по центру.
customButtons object - дополнительные кнопки. Каждому ключу name ассоциируется массив вида
Code
[init_visible,actionfunc,thispar,param]
Здесь:
-
init_visible boolean - показывать ли кнопку при инициализации окна.
-
actionfunc function
- функция, которая будет вызвана при клике на - кнопку. Аргументы:
[ссылка на окно, параметры]. Объект this будет указывать на thispar.
-
thispar mixed - второй аргумент для функции.
-
param mixed - параметр. Если не указан, используется имя окна.
-
Классы кнопки: 'xt-name' - обычное состояние, 'xt-name-over' - при наведении, где name - ключ. Файл спрайтов кнопок.
-
havemenu boolean - наличие меню. Определяется автоматически, в зависимости от аргумента menuitems.
-
menuopts object - Опции меню.
-
content object | string | function - контент. Может быть строкой, объектом или функцией, возвращающей строку. Объект может содержать следующие свойства и методы:
-
url string - ссылка на документ.
-
form string - ID формы, данные которой нужно отправить серверу.
-
xml boolean - обрабатывать полученный код как XML или нет.
-
type 'GET' | 'POST' - тип запроса.
-
cache boolean - разрешить / запретить кеширование.
-
async boolean - устанвить режим запроса (синхронный / асинхронный).
-
success function - функция, срабатывающая после успешного получения данных. Принимает 2 аргумента:
-
data string | object - непосредственно запрошенный документ.
-
status integer - статус.
-
error function - функция обработки ошибок.
-
dataType string - тип данных. Нужен для функции success.
Контент Контент можно использовать несколькими способами.
1.) Простой вид контента:
Code
<script type="text/javascript">
$(function(){
new _uWnd('test1','Название окна',250,350,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},'Контент<br>перевод на новую строку<br> \'Кавычки\'');
});
</script>
Именно так нужно оформлять кавычки внутри контента \'.
2.)Взять контент из элемента. Например, есть <div> дадим ему id:
<div id="divtest" ></div>. Спрячем этот div, а позже покажем
его только в ajax-окне. Что-нибудь напишем <div id="divtest"
style="display:none;">Все, что "Вы" пожелаете</div>.
цепляем к окну, меняем контент, где id недавно созданного div divtest:
Code
<script type="text/javascript">
$(function(){
new _uWnd('test2','Название окна',250,350,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},$('#divtest').html();
});
</script>
3.) Xml и iframe
Скачаиваем http://cut.moy.su/skriny/test3.xml в нём находим:
Code
<![CDATA[
XML Контент<br>перевод на новую строку<br> \'Кавычки\'
Ни один классик не сдал бы экзамена по собственным произведениям.<br />
Godlab.ru
]]>
Изменяем контент (обычный HTML) внутри CDATA[.
И вызываем окно:
Code
<script type="text/javascript">
$(function(){
new _uWnd('test3','Название окна',250,350,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},{url:'путь_к_xml_файлу',xml:true});
});
</script>
Работа с фреймом:
Code
<script type="text/javascript">
$(function(){
new _uWnd('test4','Название окна',250,350,{
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('test5','Название окна',250,350,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},'Контент<br>перевод на новую строку<br> \'Кавычки\'');
};
</script>
- ссылка:
Code
<a href="javascript://" onclick="open_ajax();">Пример5</a>
- или кнопка:
Code
<input type="button" value="Пример5" onclick="open_ajax();"/>
Вставляем переменную, вместо контента:
Code
<script type="text/javascript">
function open_ajax1(content){
new _uWnd('test6','Название окна',250,350,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},content);//изменяем контент на переменную
};
</script>
И сама кнопка:
Code
<input type="button" value="Пример6" onclick="open_ajax1('Ваше содержимое в окне');"/>
Code
<script type="text/javascript">
var button =_uButton(null, 'button',{ text: 'Закрыть окно', content: 'onclick="_uWnd.close(\'test7\')"' });
function open_ajax2(content){
new _uWnd('example7','Название окна',250,350,{
shadow:1,
header:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},content+button);//изменяем контент на переменную
};
</script>
И сама кнопка:
Code
<input type="button" value="Пример7" onclick="open_ajax2('Ваше содержимое в окне');"/>
Cut.moy.su
