Пятница, 19.04.2024, 07:08
Приветствую Вас Гость

Ajax окна - Форум

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Верстка » JS » Ajax окна
Ajax окна
AvAtAr
сообщение Суббота, 15.05.2010, 13:27 |
Сообщение # 1


Подполковник

  • Группа: Администраторы
  • Сообщений: 160
  • Репутация: 10
  • Статус: Offline




Аякс окна эта такие окна при загрузки которых идёт подзагрузка
опредённого Java скрипта, а точнее openLayerA.js. подключить его можете
прописав в тегах

Code
<head></head>

путь к скрипту
Code
<script type="text/javascript" src="http://www.ucoz-net.ru/openLayerA.js"></script>

После того как у вас подключен openLayerA.js вы можете создавать аякс окна.

Аякс окнон после обновления uCoz стало два вида


Первые это те что прописываються как openLayerA, это обычные окна, нетрудные в прописывании.

выглядит так:

Code
<a
href="javascript:openLayerA('Здесь как бы имя вашего аякс окна, к
каждому окну своё имя (например Abc или gfgb)','Здесь ссылка на
страницу что будет в аякс окне','Здесь аякс, тоесть заголовок','Высота
в Px','Ширина в Px','auto'); ">пример</a>

пример




Вторые появились после обнавления, прописываються как openLayerВ, при
перетаскивании становятся прозрачными, можно делять фон заднего плана
мутным и если пропишите ширину и высоту больше, то он сам сузиться до
нужных размеров

Прописываються они так:

Code
<a
href="javascript://" onclick="openLayerB('Здесь опятьже имя аякса,
тоесть его ID (например Ad), ТАКОЕЖЕ КАК И XML ФАЙЛЕ',0,'Здесь ссылка
до вашего xml файла','здесь
заголовок',ширина,высота,'0','1','1',0,'justify'); return
false;">Пример</a>

С этим аякс окном сложнее так нам требуеться xml файл. Чтобы его создать открываем блокнот и пишет туда следующее:

Code
<?xml
version="1.0" encoding="UTF-8"?><ajax><cmd
t="layerContentздесь ID, ТАКОЕЖЕ КАК мы прописали выше (например Ad)"
p="innerHTML"><![CDATA[Здесь пишем что хотим, может использовать
html (обчно здесь пишут фрейм на другую страницу, выглядит он так :
<iframe style="width:ширинаpx;height:высотаpx" frameborder="0"
scrolling="no" hspace="0" vspace="0" allowtransparency="true"
src="ссылка на
страницу"></iframe>)]]></cmd></ajax>

должно быть что-то типо этого
Code
<?xml
version="1.0" encoding="UTF-8"?><ajax><cmd
t="layerContentAD" p="innerHTML"><![CDATA[<iframe
style="width:500;height:500" frameborder="0" scrolling="no" hspace="0"
vspace="0" allowtransparency="true"
src="http://coolsite.ucoz.net/0-175"></iframe>)]]></cmd></ajax>


Делее нажимаем файл, сохранить как, выбираем кодировку UTF-8 и в имени
файла изменяем .txt на .xml. нажимаем сохранить и заливам себе на сайт.

Пример


Источник: 7ucoz.com














Для более продвинутых пользователей:



Создание AJAX окон:
Новое Ю.Окошко создается следующим кодом:
Code

1.new _uWnd(name, title, width, height, opts, content, menuitems, app)

Где:

* namestring - уникальное имя окошка. Нигде не отображается, но исползуется при работе с такими окнами.
* title string - заголовок окошка. Отображается в шапке.
* width integer - ширина окошка.
* height integer - высота окошка.
* opts object - дополнительные параметры:

o autosize boolean - автоопределение размеров.
o autosizewidth boolean - автоопределение ширины.
o autosizeonimages boolean - автоматически изменять размеры после загрузки картинок.
o hideonresize boolean - прятать содержимое при изменении размеров окна.
o waitimages boolean - ждать загрузки всех картинок.
o markload string - текст загрузки.
o align string - выравнивание.
o shadow boolean - тень.
o header boolean - отображать ли шапку.
o min boolean - отображать ли кнопку Minimize (свернуть).
o max boolean - отображать ли кнопку Maximize (развернуть).
o design string - дизайн. Является ключем объекта _uWnd.designs.
o close boolean - отображать ли кнопку Close (закрыть).
o hidden boolean - скрытое окно.
o modal boolean - модальное окно (все остальное пространство закрывается полупрозраным слоем).
o alert boolean - окно будет отображаться выше модальных окон.
o popup boolean - закрывать ли окно при клике на пространстве вне окна.
o nomove boolean - запретить перемещение окна.
o hideonmove boolean - скрывать содержимое окна при перемещении окна.
o resize boolean - разрешить изменение размеров окна пользователем.
o fixed boolean - фиксированное окно (прокручивается вместе со страницей).
o minh integer - минимальная высота.
o maxh integer - максимальная высота.
o minw integer - минимальная ширина.
o maxw integer - максимальная ширина.
o icon string - иконка для окна. Отображается в заголовке.
o oncontent function - функция, выполняющаяся после добавления контента в окно.
o onclose function - функция, выполняющаяся после закрытия окна.
o onbeforeclose function - функция, выполняющаяся до закрытия окна (после клика на кнопку закрытия).
o oninit function - функция, выполняющаяся при открытии окна.
o onmousemove function - функция, выполняющаяся движении мышью над контентом окошка.
o onposchange function - функция, выполняющаяся при каждом изменении позиции окна.
o onactivate function - функция, выполняющаяся при получении окошком фокуса.
o ondeactivate function - функция, выполняющаяся при потере окошком фокуса.

o closeonesc boolean - закрывать ли окно при нажатии клавиши Esc.
o initstate 'max'|'min' - состояние при открытии.
o headerh integer - высота шапки.
o headerc string|object - содержимое шапки. Строка или DOM-узел.
o hideheader boolean|object - прятать шапку при загрузке.
o footerh integer - высота футера.
o footerс string|object - содержимое футера. Строка или DOM-узел.
o hidefooter boolean|object - прятать футер при загрузке.
o center boolean - по центру.
o customButtons object - дополнительные кнопки. Формат записи:

Code
1.{'name': [init_visible,actionfunc,thispar,param]}
             Класс кнопки: 'xt-name', 'xt-name-over' при наведении. Здесь:

+ name string - имя кнопки. Используется в классе.
+ init_visible boolean - показывать ли кнопку при инициализации окна.

+ actionfunc function - функция, которая будет вызвана при клике на
кнопку. Аргументы: [ссылка на окно, параметры]. Объект this будет
указывать на thispar.
+ thispar mixed - второй аргумент для функции.
+ param mixed - параметр. Если не указан, используется имя окна.

o havemenu boolean - наличие меню. Определяется автоматически, в зависимости от аргумента menuitems.
o menuopts object - Опции меню.


* content object | string | function - контент. Может быть строкой,
объектом или функций, возвращающей строку. Объект может содержать
следующие свойства:

o url string - ссылка на документ.
o form string - ID формы, данные которой нужно отправить серверу.
o xml boolean - обрабатывать полученный код как XML или нет.
o type 'GET' | 'POST' - тип запроса.
o cache boolean - разрешить / запретить кеширование.
o async boolean - устанвить режим запроса (синхронный / асинхронный).
o success function - функция, срабатывающая после успешного получения данных. Принимает 2 аргумента:

+ data string | object - непосредственно запрошенный документ.
+ status integer - статус.

o error function - функция обработки ошибок.
o dataType string - тип данных. Нужен для функции success.

Так же есть следующие функции:

Code
1._uWnd.alert(txt,title,opts)
Создает всплывающее окошко-alert в правом нижнем углу, живущее 5 секунд.

Аргументы:

* txt object | string | function - контент, аналогично аргументу content функции _uWnd.
* title string - заголовок.
* opts object - опции, аналогично аргументу opts функции _uWnd.

Code

1._uWnd.messageBox(txt,title,b,onselect,opts,param,app)
Создает всплывающее окошко-alert по центру, блокирует все остальное пространство.

Аргументы:

* txt object | string | function - контент, аналогично аргументу content функции _uWnd.
* title string - заголовок.
* b array - массив из строк с ID либо объектов со следующими ключами:

o id string - ID.
o t string - Текст кнопки. Если не указан, используется ID.
o def 1|2 - стандартное состояние. 1: фокус получен, 2: ???.

* opts object - опции.
* onselect function - функция, которая будет вызвана при выделении.

Работа с AJAX окнами:
1._uWnd.close(name)
Закрывает окно с name="name" (первый аргумент при создании окна).
Аналог: метод close() самого окна.

Code
1._uWnd.header(name,content)
Устанавливает содержимое шапки на content для окна с name="name" (первый аргумент при создании окна).

Аналог: метод header(content) самого окна.

Code
1._uWnd.content(name,content)
Устанавливает контент content для окна с name="name" (первый аргумент при создании окна).

Аналог: метод content(content) самого окна.

Code
1._uWnd.footer(name,content)
Устанавливает содержимое футера на content для окна с name="name" (первый аргумент при создании окна).

Аналог: метод footer(content) самого окна.

Code
1._uWnd.headerheight(name,h)
Устанавливает высоту шапки в h пикселей для окна с name="name" (первый аргумент при создании окна).

Аналог: метод headerheight(content) самого окна.

Code
1._uWnd.footerheight(name,h)
Устанавливает высоту футера в h пикселей для окна с name="name" (первый аргумент при создании окна).

Аналог: метод footerheight(content) самого окна.

Code
1._uWnd.reload(name,content)

Переустанавливает контент content для окна с name="name" (первый
аргумент при создании окна, для документов, полученных от сервера).

Аналог: метод reload(content) самого окна.

Code
1._uWnd.setTitle(name,title)
Устанавливает заголовок title для окна с name="name".

Аналог: метод setTitle(title) самого окна.

Еще полезные функции:

Code
1._uGetOffset(obj)
Возвращает объект {top:y, left:x} с координатами DOM-узла, переданного в аргументах.

Code
1._uColorBox(did,fid)
Создает палитру для выбора цвета.

Аргументы:

* did string - глагол прошедшего времени в английском языке id элемента, куда будет помещен выбор цвета.

* fid string - id элемента (допускаются только элементы форм, т.е.
имеющие аттрибут value), куда будет записан HEX код цвета. К слову: не
разрешается использовать символ кавычки ".

Code
1.includeJSfile(src,id)
Подключает внешний .js файл и помещает его в head документа.

Аргументы:

* src string - URL.
* id string - ID, который будет присвоен созданному элементу script.

Code
1.encodeHtmlVal(s)
Возвращает строку, где символы '"<&> заменены на соответствующие им HTML-сущности.

Code

1.dumpObject(o,depth,ex)
Рекурсивный дамп простых обьектов (Не используйте с DOM элементами - это грозит бесконечным циклом). Не работает с функциями.

Code
1._uButton(frm,type,opts)
Создает кнопку в U.Стиле.

Аргументы:

* frm string - ID формы. Для submit кнопки нужно для запуска submit-кнопки формы с аттрибутом id="submfrm"
* type 's' | 'b' | 'r' - тип создаваемой кнопки. Submit, Button, Reset.
* opts object - обьект с настройками:

o text string - текст кнопки
o content string - дополнительные аттрибуты. Например, 'onclick="alert('clicked!')"'
o style integer - Определяет вид кнопки

Code
1._uButtonEn(id,enable)
Делает кнопку с id="id" активной / неактивной.

* id string|object - ID кнпоки или DOM-узел.

1

Code
._uButtonExt(frm)
Возвращает HTML-код невидимой кнопки sumbit для формы с id="frm".

* frm string - ID формы.

Класс _uSuggestList
Используется для создания автозаполнения для полей ввода.
Вид вызова:

Code
1.new _uSuggestList(name,inputId,opts,vals)
Где:

* name string - уникальное имя.
* inputId string | object - задает целевой input. Принимается либо DOM-объект, либо строка с ID.
* opts object - объект с опциями:

o design string - дизайн. Является ключем объекта _uSuggestList.designs. Пример такого объекта:

01.std : {
02. suggest_init: function (o) {
03. var p = {};
04. $(o.obj).attr("class", "x-selectable u-suggedit " + $(o.obj).attr("class"));

05. $(o.top).append('<div class="u-sugglist"
style="zoom:1"><div style="zoom:1"><table border="0"
cellspacing="0" class="x-unselectable u-suggcont"
width="100%"></table></div></div>');
06. p.list = $(o.top).find(".u-sugglist")[0];
07. p.content = $(o.top).find(".u-suggcont")[0];
08. $(o.top).find("div,span,table").andSelf().attr("unselectable", "on");
09. return p
10. },
11. append_row: function (o, a, b, c) {
12. var d = o.parts.content.insertRow( - 1);

13. $(d).bind("mousedown", o, o._onrowmousedown).bind("mousemove", o,
o._onrowmousemove).bind("mouseover", o,
o._onrowmouseover).addClass('u-suggrow').attr("usuggeststr", a[0]);
14. var v = String(a[0]);

15. if (v.toLowerCase().substr(0, c.length) == c.toLowerCase()) v =
'<span class="u-suggmark">' + v.substr(0, c.length) +
'</span>' + v.substr(c.length);
16. for (var j = 0; j < b; j++) {
17. $(d).append("<td unselectable='on' class='u-suggcell" + j + "'>" + (j == 0 ? v: a[j]) + "</td>")
18. }
19. },
20. _select: function (o, a) {
21. $(a).addClass("u-suggrowhl")
22. },
23. _deselect: function (o, a) {
24. $(a).removeClass("u-suggrowhl")
25. }
26.}

o maxlistheight 'auto' | integer - максимальная высота окошка.
o colwidth array - ?
o minlen integer - минимальная длина введенного значения (в input).
o url string - адрес для подгрузки содержимого.
o separator string - символ разделителя значений в input.

* valsarray - уже полученные значения для автозаполнения (будут помещены в кеш).

Как работает _uSuggestList


На input вешаются обработчики событий onblur, onkeydown, onkeyup.
Причем, только последний инициализует запрос (кому интересно - смотрим
_uSuggestList.prototype.onblur, _uSuggestList.prototype.onkeydown и
_uSuggestList.prototype.onkeyup). Скрипт обращается по адресу opts.url
+ '&tag=' + tag, где tag - набираемое значение. В ответ получает
JSON массив вроде







 
Nel
сообщение Суббота, 12.06.2010, 10:38 |
Сообщение # 2


Лейтенант

  • Группа: Пользователь
  • Сообщений: 45
  • Репутация: 1
  • Статус: Offline



серьезно говорю познакомился с этим только сдесь:)

 
Форум » Верстка » JS » Ajax окна
  • Страница 1 из 1
  • 1
Поиск: