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

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

Или на мой твиттер

Добавьте эту страницу в Tweet

Опубликовано в HTML, JavaScript Комментарии (10) »

Вы можете оставить комментарий. Трекбеки закрыты.

Space

Здравствуйте! Попробовал поэкспериментировать и обнаружил некоторые недостатки: если для вызова эффекта использовать не onclick, а, например, onmouseover на самом объекте, то возникает вот какая проблема – при наведении курсора все вроде бы как надо увеличивается, но если мы уберем курсор и снова его наведем – то получим увеличение уже увеличенного. если же onmouseout использовать вместе onmouseover, то мы получим тоже оригинальную проблемму – при наведении – все нормально, если убираем курсор, то 1. объект будет уменьшать в процентах от того что он увеличился перед этим (во всяком случае я так и не смог первоначального размера добиться)
2. Если несколько раз навести курсор и убрать подряд – получиться жуть, глюки конкретные, но это надо видеть)))

http://www.simplecoding.org/ Владимир

Все так и должно быть. Если вы указываете, что при событии onmouseout элемент должен уменьшиться в 2 раза, то он так и уменьшается.
Попробуйте следующее:
1) добавьте переменную, в которой будете сохранять состояние блока (увеличенный/уменьшенный) – это позволит проигнорировать повторное событие onmouseover.
2) Вообще можно вычислить точный процент на который нужно уменьшать блок (новый размер в пикселах / исходный размер * 100)

Space

Здравствуйте! Попробовал поэкспериментировать и обнаружил некоторые недостатки: если для вызова эффекта использовать не onclick, а, например, onmouseover на самом объекте, то возникает вот какая проблема – при наведении курсора все вроде бы как надо увеличивается, но если мы уберем курсор и снова его наведем – то получим увеличение уже увеличенного. если же onmouseout использовать вместе onmouseover, то мы получим тоже оригинальную проблемму – при наведении – все нормально, если убираем курсор, то 1. объект будет уменьшать в процентах от того что он увеличился перед этим (во всяком случае я так и не смог первоначального размера добиться)
2. Если несколько раз навести курсор и убрать подряд – получиться жуть, глюки конкретные, но это надо видеть)))

http://www.simplecoding.org/ Владимир

Все так и должно быть. Если вы указываете, что при событии onmouseout элемент должен уменьшиться в 2 раза, то он так и уменьшается.
Попробуйте следующее:
1) добавьте переменную, в которой будете сохранять состояние блока (увеличенный/уменьшенный) – это позволит проигнорировать повторное событие onmouseover.
2) Вообще можно вычислить точный процент на который нужно уменьшать блок (новый размер в пикселах / исходный размер * 100)

Space

Я просто думал, что возможны какие-нибудь средства внутренние для решения. Но я теперь все сам сделал. У меня единственный вопрос: можно ли как-нибудь узнать, что процесс увеличенияуменьшения закончился? есть ли встроенный флаг?

http://www.simplecoding.org/ Владимир

Флага нет, но scriptaculous может вызвать вашу функцию после окончания эффекта (или до его начала).
Подробнее здесь.

Space

Я просто думал, что возможны какие-нибудь средства внутренние для решения. Но я теперь все сам сделал. У меня единственный вопрос: можно ли как-нибудь узнать, что процесс увеличения\уменьшения закончился? есть ли встроенный флаг?

http://www.simplecoding.org/ Владимир

Флага нет, но scriptaculous может вызвать вашу функцию после окончания эффекта (или до его начала).
Подробнее здесь.