Страница навигации
logo  
RSS news bestarchive

Выберите раздел




Теги/Tags



Друзья/Friends

❤ Radio-FeelingFloyd


❤ Radio-FeelingFloyd


» »

Как создать ajax-окно
02.03.2012, 21:29

Ajax-окна придают сайту большего функционала, оперативности обмена и удобства.

И так приступим к творению.
Code
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 ассоциируется массив вида
 
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

Скачаиваем  (правый клик по иконке и копировать ссылку) в нём находим:
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>


Вызываем ajax-окно при нажатии на кнопку.
Вставляем вызов функции окна.
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('Ваше содержимое в окне');"/>


Источник:   http://godlab.ru


 
+4








Похожие материалы:





| Категория: | Добавил: Dzheykey | Теги: Ajax-окно, как создать, скрипты
Просмотров: 1306 | Загрузок: | Рейтинг: 5.0/4


Что ты об этом думаешь?: 0
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
bestarchive

Язык/Lang


Архив записей

Совет/Advice

Для корректного просмотра фильмов
Вам понадобится:

v.

Все

Юзеры

Гости

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Контакты/Contact

Связь с администратором

Друзья сайта

I Love Pink Floyd

Топ пользователей

Именинники


На bestarchive