В этой статье мы посмотрим, какие возможности предоставляет 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
