19 октября, 2007

В этой статье мы посмотрим, какие возможности предоставляет Scriptaculous для изменения размеров элементов web страницы.

Об установке и подключении этой библиотеки я писал в прошлый раз. Сейчас мы разберем, каким образом можно изменять размер элементов html страницы.

Для решения этой задачи используется эффект Scale. Создать и использовать его очень просто:

new Effect.Scale(‘имя_элемента’, масштаб_в_процентах, параметры);

Первый параметр – название элемента, к которому будет применен эффект.
Второй – размер элемента в процентах от первоначальной величины.

В третьем параметре указываются настройки эффекта. Тут можно указать:
duration – продолжительность масштабирования (в секундах);
scaleX, scaleY – включают или выключают масштабирование вдоль одной из осей;
scaleContent – позволяет указать, нужно ли масштабировать содержимое элемента;
scaleMode – позволяет задать начальные размеры элемента (в пикселах).

Теперь посмотрим несколько примеров.

Допустим, у нас есть html страница с текстовым блоком и двумя кнопками:

<body>
<div id="textBlock">Этот этот блок будет изменять размер при нажатии на кнопки "Увеличить", "Уменьшить"</div>
<p><input type="button" id="zoomIn" value="Увеличить блок" onclick="zoomIn('textBlock')" /></p>
<p><input type="button" id="zoomOut" value="Уменьшить блок" onclick="zoomOut('textBlock')" /></p>
</body>

Нажатие на кнопки вызывает функции zoomIn() и zoomOut(), которые в качестве параметра принимают название блока:

function zoomIn(targetBlock) {
new Effect.Scale(targetBlock, 200, {duration: 5});
}
function zoomOut(targetBlock) {
new Effect.Scale(targetBlock, 50, {duration: 5});
}

Здесь мы создаем объект Effect, вызываем его метод Scale(), указываем название блока, размеры после увеличения и время масштабирования (5 секунд). Обратите внимание, что в обоих случаях используется одна и та же функция (Scale()), только для zoomIn() мы указываем масштаб 200% (увеличение в два раза), а для zoomOut() – 50% (уменьшение в два раза).

Примечание. При использовании этого эффекта будет увеличиваться и сам блок, и его содержимое, в том числе и размеры отступов (padding). Если вы хотите сохранить отступы постоянными, можно использовать следующий прием. Установите для textBlock все отступы равными нулю (margin:0; padding:0), а текст блока разместите внутри параграфа (подойдет любой блочный элемент). Например:

<div id="textBlock">
<p>Этот блок содержит параграф с текстом. ……</p>
</div>

После этого в таблице стилей (CSS) устанавливаем отступы для параграфа:

#textBlock p {
padding: 10px 10px 10px 10px;
margin: 0 0 0 0;
}

Теперь можно масштабировать textBlock. Текст будет менять размер, а отступы – нет.

Для увеличения блока только вдоль горизонтальной оси нужно задать параметры scaleX и scaleY:

new Effect.Scale(targetBlock, 200, {duration: 5, scaleX: true, scaleY: false});

Изменение размера вдоль вертикальной оси выполняется аналогично, только нужно изменить значения параметров на противоположные.

Вы также можете запретить изменение размеров содержимого блока с помощью параметра scaleContent (полезно, если внутри блока находятся картинки):

new Effect.Scale(targetBlock, 200, {duration: 5, scaleContent: false});

И, наконец, вы можете задать начальные размеры блока в параметре scaleMode:

new Effect.Scale(targetBlock, 200, {duration: 5, scaleMode: {originalHeight:170, originalWidth:200}});

Высота задается параметром originalHeight, а ширина – originalWidth (в пикселах).
Применение этого эффекта мгновенно изменит размер блока до величины, указанной в scaleMode (200х170), а затем, в течение 5 секунд, будет увеличивать его до 400х340.

Для всех приведенных в этой статье примеров я сделал демонстрационную страницу, которую вы можете скачать и использовать по своему усмотрению.

P.S. Попробуйте поиграть с параметрами эффекта. Уверен, вы легко найдете подходящие для вас значения.

Постовой

Лучшее решение для управления большим количеством сайтов - Zebrum.ru

Понравилась статья? Подпишитесь на продолжение !