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" — область с содержимым скрыта по умолчанию
• текст — само содержимое области, которое будет показываться при раскрытии. Вместо слова текст может быть любой текст, картинка и даже форма. Например, можно вставить в содержимое код почтовой формы $MFORM_1$

Если код области с содержимым находится над второй частью кода, то содержимое будет раскрываться над ссылкой “Развернуть”. Если под второй частью кода, содержимое раскроется под ссылкой:

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

• a onclick="$('#spol') — отвечает за клик по ссылке, инициирующий открытие области, привязан к идентификатору и должен совпадать с ним
• .slideToggle('slow') — отвечает за сам процесс плавного разворачивания области

Если на странице требуется вывести несколько таких скрытых областей, каждой области следует задать свой индивидуальный идентификатор. В нашем примере выделенные красным элементы нужно заменить на уникальные в двух местах:

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

Для второй области spol заменить на spol2, для третьей области spol заменить на spol3 и т.д.

Вместо слова “Развернуть” вы можете поставить картинку:

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

Можете установить кнопку:

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

Устанавливать код плавного разворачивания области можно в шаблоны сайта, в содержимое страниц, созданных в редакторе, и в материалы. Во всех случаях вставлять нужно только в HTML-режиме или в режиме “Источник”. Если вы будете использовать для вставки кода визуальный редактор, ничего работать не будет!

Создание 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>

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

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

• a href="javascript://" onclick="new _uWnd — вызов Ajax-окна по клику
• name — уникальный идентификатор окна. Если на странице необходимо разместить несколько таких всплывающих по клику окон, name нужно изменить на name2 для второго окна, на name3 для третьего и т.д. Вы можете давать любые произвольные имена окнам, главное, чтобы они не повторялись у разных окон
• Заголовок окна — это шапка окна, где можно прописать название
• 500,200 — исходные размеры окна (500 — ширина, 200 — высота)
• Содержимое окна — текстовая информация, которая будет выводиться в теле окна
• Ссылка, вызывающая окно — текст, который будет показываться ссылкой вызова

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

Единица возле элемента настройки говорит об активной функции. Ноль — неактивная, запрещенная.

• min:1 — кнопка сворачивания окна (минимизирует окно в угол экрана)
• max:1 — кнопка разворачивания окна на весь экран
• header:1 — шапка окна, где прописан заголовок
• shadow:1 — тень окна
• modal:1 — затемнение страницы при вызове окна (если активна настройка 1, кнопка минимизации окна показываться не будет)
• nomove:0 — при значении 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>

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

Ссылка

• a href="javascript://"onmouseover="new _uWnd — отвечает за вызов окна при наведении на ссылку
• ajax — уникальное имя окна
• заголовок — шапка окна с названием
• 500 и 200 — размеры окна (ширина и высота)
• close:true — разрешает закрыть окно
• header:true — разрешает показ заголовка
• nomove:false — разрешает перемещение окна
• fixed:false — запрещает фиксацию окна в одном месте

Устанавливать код вызова всплывающего Ajax-окна можно в шаблоны сайта, в содержимое страниц, созданных в редакторе, и в материалы. Во всех случаях вставлять нужно только в HTML-режиме или в режиме “Источник”. Если вы будете использовать для вставки кода визуальный редактор, ничего работать не будет!