1. Плавное разворачивание/сворачивание области
2. Создание Ajax-окон

Плавное разворачивание/сворачивание области

Плавное разворачивание и сворачивание элементов на странице помогает сохранить компактность и разнообразить функционал сайта. Например, при нажатии на изображение можно вывести пояснительный текст, а при нажатии на ссылку «Отправить письмо администратору» — отобразить почтовую форму. Таких элементов может быть несколько на странице.

Простейший пример: при нажатии на ссылку «Развернуть» будет показан текст:

<div id="spol" style="display:none">текст</div>
<a onclick="$('#spol').slideToggle('slow');" href="javascript://">Развернуть</a>

Демонстрация работы кода:

Развернуть

Код состоит из двух частей:

<div id="spol" style="display:none">текст</div>

• id="spol" — идентификатор области с содержимым.
• style="display:none" — область скрыта по умолчанию.
• текст — содержимое, которое будет отображаться при раскрытии. Вместо текста можно вставить изображение, форму или любой другой HTML-элемент (например, код почтовой формы $MFORM_1$).

Вторая часть:

<a onclick="$('#spol').slideToggle('slow');" href="javascript://">Развернуть</a>

• onclick="$('#spol')" — клик по ссылке инициирует открытие области с указанным идентификатором.
• .slideToggle('slow') — отвечает за плавное разворачивание или сворачивание области.

<div id="spol" style="display:none">текст</div>
<a onclick="$('#spol').slideToggle('slow');" href="javascript://">Развернуть</a>

Вместо текста «Развернуть» можно использовать изображение:

<img border="0" src="ссылка на картинку">

Или кнопку:

<button>Кнопка развернуть</button>

Создание Ajax-окон

Пример простого Ajax-окна, которое открывается при клике. Такие окна подходят для вывода дополнительной информации.

Пример вызова Ajax-окна по клику

<a href="javascript://" onclick="new _uWnd('name', 'Заголовок окна', 500, 200, {min:1, shadow:1, modal:1, header:1, max:1, nomove:0, resize:1}, 'Содержимое окна');">Ссылка, вызывающая окно</a>

Демонстрация:

Ссылка, вызывающая окно

• name — уникальный идентификатор окна. Для нескольких окон используйте уникальные имена: name2, name3 и т.д.
• Заголовок окна — отображается в шапке.
• 500, 200 — размеры окна (ширина и высота).
• Содержимое окна — текст или HTML-код, который будет отображаться в теле окна.
• Ссылка, вызывающая окно — текст ссылки.

Настройки Ajax-окна

Единица — функция активна, ноль — неактивна.

• min:1 — кнопка свернуть окно.
• max:1 — кнопка развернуть окно на весь экран.
• header:1 — отображает шапку окна.
• shadow:1 — тень у окна.
• modal:1 — затемнение страницы (при этом кнопка свернуть не будет отображаться).
• nomove:0 — разрешает перемещать окно.
• resize:1 — разрешает изменять размеры окна.

Вместо текста «Ссылка, вызывающая окно» можно использовать картинку:

<img border="0" src="ссылка на картинку">

Или кнопку:

<button>Вызвать окно</button>

Пример вызова Ajax-окна при наведении

<a href="javascript://" onmouseover="new _uWnd('ajax', 'заголовок', '500', '200', {close:true, header:true, nomove:false, fixed:true}, 'содержимое окна')">Ссылка</a>

Демонстрация:

Ссылка

• onmouseover="new _uWnd(...)" — окно появляется при наведении.
• ajax — уникальное имя окна.
• заголовок — название в шапке.
• 500, 200 — размеры окна.
• close:true — возможность закрыть окно.
• header:true — отображение заголовка.
• nomove:false — разрешает перемещать окно.
• fixed:true — фиксирует положение окна.