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

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

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