Плавное разворачивание/сворачивание области и создание 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-режиме или в режиме “Источник”. Если вы будете использовать для вставки кода визуальный редактор, ничего работать не будет!