Главная » FAQ » FAQ по окнам ajax



Сначала немного теории:
Почти на всех страницах используется ajax окна и из-за этого идет подгрузка нужного java скрипта которая непосредственно и отвечает за создание окна, и исходя из этого данные окна можно содать почти везде. Почему почти? Повторюсь не везде прописан код jav'ы...
А теперь само создание, так как ajax окно состоит и из xml файла, где описано его содержимое, то:

1 шаг. создание xml файла:
В любом текстовом редакторе потдерживающем кодировку Utf-8, пишем:

Цитирую
<ajax><cmd t="layerContentID" p="innerHTML"><![CDATA[HTML код]]></cmd></ajax>

где:
ID - Уникальное имя xml и ссылки (запоминаем, в плоть до регистра)
красным - ваш HTML код или какие нибудь надписи..

2 шаг. создание ссылки для появления окна:

Цитирую
<a href="javascript://" onclick="openLayerB('ID',0,'http://****.xml','Название окна',200,100,'1','','',0,'justify'); return false;">Ссылка</a>

здесь:
ID - Уникальное имя xml и ссылки (тот же ID, что и в xml файле)
синим - прямая ссылка до xml файла
красным - название создаваемого окна
фиолетовым - это рамеры окна, где 200 - ширина и 100 - высота соответсвенно
зеленым - сама ссылка Ну все ваше ajax окно создано!

Начнем сразу с примера:

Code
<a href="javascript://" onclick="new _uWnd('myName','Заголовок окна',500,200,{autosize:1,maxh:300,minh:100},'Здесь находится контент окна');">Я ссылка</a>

Нам нужет вот этот код:

Code
new _uWnd('myName','Заголовок окна',500,200,{autosize:1,maxh:300,minh:100},'Здесь находится контент окна');

Начинаем разбирать по частях.

myName - это уникальное название окошка. Этот текст нигде не отображается, но используется при работе с такими окнами.

Заголовок окна - это заголовок, который отображается вверху аякс-окошка

500 - ширина.

200 - высота

Здесь находится контент окна - сам контент окна Здесь также могут использоваться html коды.

Вот мы и создали первое наше окошко. Теперь переходим к более сложным действиям - добавим пару фишек.

Code
<a href="javascript://" onclick="new _uWnd('myName','Заголовок окна',500,200,{min:1,shadow:1,header:1,max:1,resize:0},'Здесь находится контент окна');">Я ссылка</a>

И снова разбираем по частям

Основа окна не отличается от предыдущего примера, поэтому я не буду снова это писать.

Теперь добавился код:

Code
{min:1,shadow:1,header:1,max:1,resize:0}

Число 0 заменяет слово "Нет"

Число 1 заменяет слово "Да"

min - отображение кнопки свернуть (у нас стоит число 1, поэтому кнопка отображается)

shadow - добавляет тень к окошку

header - отображение шапки (где находятся кнопки свернуть, развернуть, закрыть и название окошка)

max - отображение кнопки "развернуть"

resize - разрешение пользователю изменить размеры окошка (у нас стоит 0, поэтому нельзя изменять размеры окна)

Среди возможностей можно добавить еще пару полезных функций:

modal[1/0] - модальное окно. Если данная опция включена, то все остальное пространство будет закрыто полупрозрачным слоем

nomove[1/0] - Можно запретить перемещение окна.
[Table]Новые команды от июнь 2010г[/Table]
align:[1/0] центрирование окна

fadetype:[0/1/2] вид открывания окна

fadespeed:[0/999999] время открывания окна

fadeclosetype:[0/1/2] вид закрывания окна

fadeclosespeed:[0/999999] время закрывание окна

Вот и все.


Этот метод я больше всего использую на своем сайте http://ucozon.ru/

чем он удобен , тем что в него можно встраивать ссылки с тегами, что не сделаешь в других окнах ajax.
как выглядит примерный скрипт:
Code
<script type="text/javascript">
vid_rekc = function(){
new _uWnd('myName','Форма заказа на ucozon.ru',300,150,{min:1,shadow:1,header:1,max:1,modal:1,resize:0},'Добро пожаловать на сайт ucozon.ru');
}
</script>

Установка обычно поверх ссылки вызова, можно вставить этот скрипт и в js файл убрав предварительно
Code

<script type="text/javascript"> и </script>
и вставлять сам файл таким образом
Code

<script type="text/javascript" src="/ссылка на файл js/ajax1.js"></script>

где уже указывал что такое min:1,shadow:1,header:1,max:1,modal:1,resize:0 в прошлом ответе
,300,150, ширина и высота окна
vid_rekc это уникальное имя вызова окна, заметьте что оно есть и в ссылки вызова
сама ссылка вызова окна

Code

<a href="javascript://" onclick="vid_rekc();"><b>Форма заказа Видео</b></a>

установка может быть в любом месте в место Форма заказа Видео можно вставить кнопку картинки html кодом

Это вставляем между head с вашей информацией!

Code
<script type="text/javascript">
    function nrmurl(){$("#rchp, #normurl").show(); $("#nrml, #chpy").hide();} function chpyrl(){$("#rchp, #normurl").hide(); $("#nrml, #chpy").show();} function urlopen1(){new _uWnd('link',Название',400,600,{align:0,shadow:1,autosize:1,maxh:350,minh:200,resize:0},'ТУТ ЛЮБОЙ ВАШ БЛОК ИЛИ ТЕКСТ И Т.Д И Т.П');}
</script>

В ТУТ ЛЮБОЙ ВАШ БЛОК ИЛИ ТЕКСТ И Т.Д И Т.П - Вписывается любой текст, можно вставлять информеры, даже форму входа) Все uCoz'вские коды работают в нем

urlopen1 - 1 это ID Ajax Окна,для каждого окна оно должно быть уникальным!

Теперь там где вам нужна ссылка на открытие окна вставляем вот это

Code
<a href="javascript:urlopen1();" style="text-decoration: none;" title="">Название</a>
urlopen1 - 1 Должно совпадать с ID кода в Ajax окне!

другой тип проверенный

Это после body
Code
<script type="text/javascript">
function nrmurl(){$("#rchp, #normurl").show(); $("#nrml, #chpy").hide();} function chpyrl(){$("#rchp, #normurl").hide(); $("#nrml, #chpy").show();}   
</script>

Это окно:
<a href="javascript://" onclick="new _uWnd('myName','Окно ajax',300,100,{align:0,shadow:1,autosize:1,maxh:350,minh:200,resize:0},'Тут впишите Текст который будет отображаться в окне ajax');">Сcылка на окно ajax</a>

Авто-открытие окна делается так:
Вставляем куда хотим код

Code
<script type="text/javascript">
new _uWnd('myName','Окно ajax',300,100,{align:0,shadow:1,autosize:1,maxh:350,minh:200,resize:0},'Тут впишите Текст который будет отображаться в окне ajax');
</script>

Открытие окна по клику с ID:

Quote
<script type="text/javascript">
$('#ID').click(function () {new _uWnd('myName','Окно ajax',300,100,{align:0,shadow:1,autosize:1,maxh:350,minh:200,resize:0},'Тут впишите Текст который будет отображаться в окне ajax');});
</script>

Открытие окна по клику с Class:

Quote
<script type="text/javascript">
$('.Class').click(function () {new _uWnd('myName','Окно ajax',300,100,{align:0,shadow:1,autosize:1,maxh:350,minh:200,resize:0},'Тут впишите Текст который будет отображаться в окне ajax');});
</script>


День рождения отмечают

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',250,250,{autosize:0},{url:'/index/62-1'});return false;" class="fUsrList">День рождения отмечают</a>



0) Сегодняшние посетители

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',250,250,{autosize:0},{url:'/index/62-2'});return false;" class="fUsrList">Сегодняшние посетители</a>



1) Онлайн пользователи

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',250,250,{autosize:0},{url:'/index/62-3'});return false;" class="fUsrList">Онлайн пользователи</a>



2) Подписка, отписка от ЛС

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',350,250,{autosize:0},{url:'/index/67-1'});return false;" class="fUsrList">Подписка, отписка от ЛС</a>



3) Полный список смайлов

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',500,500,{autosize:0},{url:'/index/35-1'});return false;" class="fUsrList">Полный список смайлов</a>



4) Форма входа

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',250,150,{autosize:0},{url:'/index/40-1'});return false;" class="fUsrList">Форма входа</a>



5) Цвет Админ-бара

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',250,190,{autosize:0},{url:'/index/42-1'});return false;" class="fUsrList">Цвет Админ-бара</a>



6) Поиск

Code
<a href="javascript://" onclick="new _uWnd('TdUsrLst',' ',200,120,{autosize:0},{url:'/index/45-1'});return false;" class="fUsrList">Поиск</a>

uWnd - название ucozoвских ajax окон. uWnd - уникальные Ajax окна системы uCoz, неимеющие аналогов.
Как создать?
простое окно
Code
<script type="text/javascript">
function uwnd_funk(){
new _uWnd("name","title",200,100,{modal:1},"контент");
}
</script>

Code
<a href="javascript:uwnd_funk()">Ссылка</a>
uwnd_funk - название функции
200,100, - высота и ширина окошка
{modal:1} - опции окошка /через запятую/
"контент" - содержимое окна

Как создать?
более функциональное окно/
Code
<script type="text/javascript">
function uwnd_funk(){
new _uWnd("name","title",200,100,{modal:1},$("#uwnd_funk").html());
}  
</script>

Code
<a href="javascript:uwnd_funk()">Ссылка</a>
<div style="display:none" id="uwnd_funk">контент</div>

new _uWnd("name","title",200,100,{А вот тут опции},"контент");
Используются через запятую, вида: параметр:значение,
Параметрыautosize /0;1/ - автоопределение размеров.
autosizewidth /0;1/ - автоопределение ширины.
autosizeonimages /0;1/ - автоматическое изменение размеров после загрузки картинки.
waitimagess /0;1/ - ждать загрузки всех картинок.
hideonresize /0;1/ - скрывать содержимое при изменении размеров окна.
markload /'текст'/ - текст загрузки.
align /0;1/ - выравнивание.
shadow /0;1/ - тень.
header /0;1/ - отображать шапку.
min /0;1/ - отображать ли кнопку Minimize (свернуть).
max /0;1/ - отображать ли кнопку Maximize (развернуть).
close /0;1/ - отображать ли кнопку Close (закрыть).


счетчик посещений