| MoNsTeR-666 | Дата: Понедельник, 26.08.2013, 05:23 | Сообщение # 1 |
 Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 12
Статус: Offline
| Ajax-окна придают сайту большего функционала, оперативности обмена и удобства.
И так приступим к творению.
Код new _uWnd('Уникальный id','Название окна', Высота, Ширина,{
// Параметры
},{//контент
};);
Уникальный 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 ассоциируется массив вида
Код [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.) Простой вид контента: Код $(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:
Код <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>
Скачаиваем http://cut.moy.su/skriny/test3.xml в нём находим:
Код <![CDATA[
XML Контент<br>перевод на новую строку<br> \'Кавычки\'
Ни один классик не сдал бы экзамена по собственным произведениям.<br />
Godlab.ru
]]>
Изменяем контент (обычный HTML) внутри CDATA[.
И вызываем окно:
Код <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>
Код <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>
Вставляем вызов функции окна.
Код <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>
- ссылка:
Код <a href="javascript://" onclick="open_ajax();">Пример5</a>
Код <input type="button" value="Пример5" onclick="open_ajax();"/>
Вставляем переменную, вместо контента:
Код <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>
Код <input type="button" value="Пример6" onclick="open_ajax1('Ваше содержимое в окне');"/>
Код <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>
Код <input type="button" value="Пример7" onclick="open_ajax2('Ваше содержимое в окне');"/> |
| |
| |
