Использование Scriptaculous для изменения прозрачности элементов web страницы

Владимир | | HTML, JavaScript.

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

Напомню, что Scriptaculous – это JavaScript библиотека, которая предоставляет широкие возможности для создания эффектов, элементов управления и т.п. Для своей работы Scriptaculous использует библиотеку более низкого уровня – prototype, которая значительно упрощает взаимодействие с элементами страницы, выполнение ajax запросов, работу с массивами и многое другое.

В состав Scriptaculous (версии 1.7.0) входит 7 файлов, каждый из которых может быть использован независимо от остальных. Такая структура позволяет сократить количество загружаемого кода.

Для управления прозрачностью элементов html страницы используется библиотека эффектов, которая находится в файле effects.js. Для решения нашей задачи нам нужны три файла: prototype.js, scriptaculous.js и effects.js.

Подключаем их в заголовке html страницы (файлы библиотеки находятся в папке lib):

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js?load=effects"></script>

Обратите внимание как подключен effects.js. Мы подключаем scriptaculous.js, а после знака «?» указываем команду «load» и имя нужного файла (effects) без расширения. Если нужно загрузить несколько библиотек, то их имена можно указать через запятую.

Теперь для управления прозрачностью мы можем использовать метод Opacity объекта Effect. При вызове этого метода мы должны указать:
1) элемент страницы, прозрачность которого нужно изменить;
и параметры:
2) duration – длительность изменения (в секундах);
3) from – начальное значение прозрачности (в диапазоне от 0.0 до 1.0);
4) to – конечное значение прозрачности.

Например:

new Effect.Opacity('note', {duration:2.5, from:0.0, to:1.0});

Заметьте, что этот эффект только изменяет прозрачность элемента на странице. Чтобы полностью убрать или добавить элемент на страницу, можно воспользоваться методами Fade и Appear. Параметры, которые нужно указать при их вызове, аналогичны методу Opacity. Причем, начальное и конечное значение прозрачности указывать не обязательно:

new Effect.Fade('noteTitle', {duration:1.5});
new Effect.Appear('noteTitle', {duration:1.5});

Теперь посмотрим, как все это можно использовать.
Создадим простенькую страницу с двумя текстовыми блоками и двумя кнопками:

<body>
<div id="noteTitle">Этот текст идет до записи. Весь этот блок будет плавно исчезать при нажатии на кнопку.</div>
<div id="note">Этот текст должен плавно появляться при открытии страницы</div>
<p><input type="button" id="show" value="Показать блок" onclick="showBlock()" /></p>
<p><input type="button" id="hide" value="Убрать блок" onclick="hideBlock()" /></p>
</body>

Блок «note» у нас будет плавно появляться при загрузке страницы. А с помощью кнопок «show» и «hide» мы будем убирать или добавлять блок «noteTitle».

Теперь создадим JavaScript файл с функциями, которые будут вызываться при нажатии на кнопки:

window.onload = function() {
	new Effect.Opacity('note', {duration:2.5, from:0.0, to:1.0});
}

function hideBlock() {
	new Effect.Fade('noteTitle', {duration:1.5});
}

function showBlock() {
	new Effect.Appear('noteTitle', {duration:1.5});
}

Примечание: этот файл должен быть указан в заголовке страницы (<script type="text/javascript" src="testEffects.js"></script>) вместе с библиотеками prototype и Scriptaculous.

В строках 1-3 мы присвоили функцию обработчику window.onload, который вызывается при загрузке страницы. В ней мы создали объект Effect и вызвали его метод Opacity. В параметрах метода указано, что прозрачность элемента «note» будет изменяться от 0 до 1 в течении 2.5 с.

Функции hideBlock() и showBlock() работают аналогичным образом. Главное отличие в том, что методы Fade и Appear не только изменяют прозрачность, но и полностью удаляют (добавляют) блок со страницы. При этом, все остальные элементы страницы смещаются.

Как видите, Scriptaculous предоставляет очень удобные средства управления прозрачностью объектов. Любая операция выполняется с помощью всего одной строки кода.

Естественно, описанные эффекты – это только незначительная часть возможностей библиотеки, о которых я обязательно расскажу в следующих выпусках блога.

Вы можете скачать файлы приведенного примера.

Постовой

Интересное предложение на стиральную машину WHIRLPOOL AWM 1000 в Одессе
Удобная посудомоечная машина ELECTROLUX ESF 2440S в Одессе

  • Hot Ice

    Привет. Спасибо за статью.
    На ее основе я решил сверстать макет своего дизайна на сайте. И у меня возникла проблема. Мне необходимо, чтобы при загрузке страницы 3 div'a уменьшали свою прозрачность с о до 80% и один div до 90% в течении 3 секунд. Я использовал файлы из приложенного архива. В testEffects.js заменил содержимое на:


    window.onload = function() {
    new Effect.Opacity$('div', {duration:3, from:0.0, to:0.9});
    }

    window.onload = function() {
    new Effect.Opacity$('div2', {duration:3, from:0.0, to:0.8});
    }

    window.onload = function() {
    new Effect.Opacity$('div3', {duration:3, from:0.0, to:0.8});
    }

    window.onload = function() {
    new Effect.Opacity$('div4', {duration:3, from:0.0, to:0.8});
    }

    И при этом срабатывает только последний div4. Что я делаю не так?

    Пересмотрел много статей по aculo, но ничего не нашел.
    Единственное что-то похожее — это функция $():
    allNodes = $("firstDiv", "secondDiv");
    for(i = 0; i < allNodes.length; i++) {
    alert(allNodes[i].innerHTML);
    }

    Только как ее использовать — не знаю.

    Заранее спасибо за помощь.

  • Hot Ice

    Привет. Спасибо за статью.
    На ее основе я решил сверстать макет своего дизайна на сайте. И у меня возникла проблема. Мне необходимо, чтобы при загрузке страницы 3 div'a уменьшали свою прозрачность с о до 80% и один div до 90% в течении 3 секунд. Я использовал файлы из приложенного архива. В testEffects.js заменил содержимое на:


    window.onload = function() {
    new Effect.Opacity$('div', {duration:3, from:0.0, to:0.9});
    }

    window.onload = function() {
    new Effect.Opacity$('div2', {duration:3, from:0.0, to:0.8});
    }

    window.onload = function() {
    new Effect.Opacity$('div3', {duration:3, from:0.0, to:0.8});
    }

    window.onload = function() {
    new Effect.Opacity$('div4', {duration:3, from:0.0, to:0.8});
    }

    И при этом срабатывает только последний div4. Что я делаю не так?

    Пересмотрел много статей по aculo, но ничего не нашел.
    Единственное что-то похожее — это функция $():
    allNodes = $("firstDiv", "secondDiv");
    for(i = 0; i < allNodes.length; i++) {
    alert(allNodes[i].innerHTML);
    }

    Только как ее использовать — не знаю.

    Заранее спасибо за помощь.

  • Hot Ice

    Сорри, допустил ошибку:

    new Effect.Opacity$('

    Но исправление на

    new Effect.Opacity$('

    проблему не решает.

    • Hot Ice

      *new Effect.Opacity('

    • Вы четыре раза установили обработчик функции window.onload

      Т.е. вы объявили 4 различных функции и установили их как обработчики.

      Представьте, что произойдет, если выполнить такой код:
      m = 1;
      m = 2;
      m = 3;
      Чему будет равно m? Правильно, 3.
      Точно также после исполнения вашего кода в качестве обработчика будет использоваться последняя функция

      window.onload = function() {
      new Effect.Opacity$('div4', {duration:3, from:0.0, to:0.8});
      }

      И выполняться будет только она.
      Исправить ситуацию не сложно. Просто разместите все обработчики внутри одной функции:

      window.onload = function() {
      new Effect.Opacity('div', {duration:3, from:0.0, to:0.9});
      new Effect.Opacity('div2', {duration:3, from:0.0, to:0.8});
      new Effect.Opacity('div3', {duration:3, from:0.0, to:0.8});
      new Effect.Opacity('div4', {duration:3, from:0.0, to:0.8});
      }

      P.S. Если нужно изменить последовательность выполнения эффектов почитайте Управление эффектами (Scriptaculous)

      • Hot Ice

        Большое спасибо за помощь!
        Я так пробовал, но у меня не вышло. Видимо в прошлый раз где-то допустил ошибку.

        Еще один вопрос. можно ли сделать так, чтобы на внутренние элементы, которые являются содержимым этих div'ов не наследовались свойства прозрачности?
        Я пробовал для них прописать в таблице CSS


        #innerdiv {
        height: 220px;
        filter:alpha(opacity=100) !important;
        -moz-opacity: 1.0 !important;
        -khtml-opacity: 1.0 !important;
        opacity: 1.0 !important;
        }

        Но ничего не выходит.
        Так же я пробовал для них прописать обработчики:


        new Effect.Opacity('innerdiv', {duration:2.5, from:0.0, to:1.0});

        — и это тоже не помогло.

        • Я тоже немного поэкспериментировал. Похоже, что установка прозрачности контейнера автоматически распространяется на все вложенные элементы (по-идее так и должно быть). Если внешний элемент невидимый, то и его содержимое должно быть невидимым. Иначе чтобы сделать невидимым абзац:
          <p>1111<strong>2222</strong>1111</p>
          пришлось бы сначала сделать невидимым текст внутри тегов <strong>, а затем сам абзац.
          Но на сто процентов я не уверен. Возможно решение существует.

          В любом случае, эту проблему можно обойти. Например, изменив разметку страницы.

  • Hot Ice

    Сорри, допустил ошибку:

    new Effect.Opacity$('

    Но исправление на

    new Effect.Opacity$('

    проблему не решает.

    • Hot Ice

      *new Effect.Opacity('

    • Вы четыре раза установили обработчик функции window.onload

      Т.е. вы объявили 4 различных функции и установили их как обработчики.

      Представьте, что произойдет, если выполнить такой код:
      m = 1;
      m = 2;
      m = 3;
      Чему будет равно m? Правильно, 3.
      Точно также после исполнения вашего кода в качестве обработчика будет использоваться последняя функция

      window.onload = function() {
      new Effect.Opacity$('div4', {duration:3, from:0.0, to:0.8});
      }

      И выполняться будет только она.
      Исправить ситуацию не сложно. Просто разместите все обработчики внутри одной функции:

      window.onload = function() {
      new Effect.Opacity('div', {duration:3, from:0.0, to:0.9});
      new Effect.Opacity('div2', {duration:3, from:0.0, to:0.8});
      new Effect.Opacity('div3', {duration:3, from:0.0, to:0.8});
      new Effect.Opacity('div4', {duration:3, from:0.0, to:0.8});
      }

      P.S. Если нужно изменить последовательность выполнения эффектов почитайте Управление эффектами (Scriptaculous)

      • Hot Ice

        Большое спасибо за помощь!
        Я так пробовал, но у меня не вышло. Видимо в прошлый раз где-то допустил ошибку.

        Еще один вопрос. можно ли сделать так, чтобы на внутренние элементы, которые являются содержимым этих div'ов не наследовались свойства прозрачности?
        Я пробовал для них прописать в таблице CSS


        #innerdiv {
        height: 220px;
        filter:alpha(opacity=100) !important;
        -moz-opacity: 1.0 !important;
        -khtml-opacity: 1.0 !important;
        opacity: 1.0 !important;
        }

        Но ничего не выходит.
        Так же я пробовал для них прописать обработчики:


        new Effect.Opacity('innerdiv', {duration:2.5, from:0.0, to:1.0});

        — и это тоже не помогло.

        • Я тоже немного поэкспериментировал. Похоже, что установка прозрачности контейнера автоматически распространяется на все вложенные элементы (по-идее так и должно быть). Если внешний элемент невидимый, то и его содержимое должно быть невидимым. Иначе чтобы сделать невидимым абзац:
          <p>1111<strong>2222</strong>1111</p>
          пришлось бы сначала сделать невидимым текст внутри тегов <strong>, а затем сам абзац.
          Но на сто процентов я не уверен. Возможно решение существует.

          В любом случае, эту проблему можно обойти. Например, изменив разметку страницы.

  • Anthony

    попробуй установить в свойствах элементов position:absolute и z-index больше, чем у твоего прозрачного div'а

  • Anthony

    попробуй установить в свойствах элементов position:absolute и z-index больше, чем у твоего прозрачного div'а

  • Хороший обзор, интересная библиотека, пригодилась для пары проектов

  • Хороший обзор, интересная библиотека, пригодилась для пары проектов

  • Custod

    Спасибо, очень полезно.