Вход на сайт
Меню сайта
Категории раздела
Мини-чат
ОК
На сайте

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи
Гости сайта
Популярные файлы
Наш опрос
Оцените мой сайт

Результат опроса Все опросы нашего сайта
Всего ответов: 56
О сайте.

Добро пожаловать на WebTOPS!

На нашем портале вы можете найти программы для вашего компьютера, фильмы, игры, сериалы, картинки. А также всё для uCoz, DLE, CS1.6, PS, AE. Посещаемость сайт составляет до 100 хостов в день.Опубликовано более 800 файлов.

Дорогие гости сайта просим вас пройти регистрацию или авторизоваться через емейл и пароль uNet.

CY-PR.com


Как Создать uCoz ajax окно
Как Создать uCoz ajax окно
Открыть оригинальный размер изображения

Про 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.



Автор: Extr1m | 15.09.2011 | Просмотров: 1214 | Загрузок: 0 | Скрипты для uCoz | Жалоба на материал
Теги материала: Ajax, окно, создать, uCoz
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]