Учебники

script.aculo.us — Обзор

Январь 12, 2019

script.aculo.us — это библиотека JavaScript, созданная на основе Prototype JavaScript Framework, улучшающая графический интерфейс пользователя и предоставляющая веб-пользователям возможность работы с Web 2.0.

script.aculo.us был разработан Томасом Фуксом и впервые был выпущен для публики в июне 2005 года.

script.aculo.us предоставляет динамические визуальные эффекты и элементы пользовательского интерфейса через объектную модель документа (DOM).

Prototype JavaScript Framework — это JavaScript-фреймворк, созданный Сэмом Стивенсоном, который предоставляет Ajax-фреймворк и другие утилиты.

Как установить script.aculo.us?

Установить библиотеку script.aculo.us довольно просто. Это можно настроить в три простых шага —

  • Перейдите на страницу загрузки, чтобы скачать последнюю версию в удобной упаковке.

  • Распакуйте загруженный пакет, и вы найдете следующие папки —

    • lib — содержит файл prototype.js

    • src — содержит следующие 8 файлов —

      • builder.js
      • controls.js
      • dragdrop.js
      • effects.js
      • scriptaculous.js
      • slider.js
      • sound.js
      • unittest.js

    • test — содержит файлы для тестирования.

    • CHANGELOG — Файл, содержащий историю всех изменений.

    • MIT-LICENSE — файл с описанием условий лицензирования.

    • README — файл с описанием пакета установки, включая инструкции по установке.

  • Теперь поместите следующие файлы в каталог вашего сайта, например, / javascript.

    • builder.js
    • controls.js
    • dragdrop.js
    • effects.js
    • scriptaculous.js
    • slider.js
    • prototype.js

Перейдите на страницу загрузки, чтобы скачать последнюю версию в удобной упаковке.

Распакуйте загруженный пакет, и вы найдете следующие папки —

lib — содержит файл prototype.js

src — содержит следующие 8 файлов —

test — содержит файлы для тестирования.

CHANGELOG — Файл, содержащий историю всех изменений.

MIT-LICENSE — файл с описанием условий лицензирования.

README — файл с описанием пакета установки, включая инструкции по установке.

Теперь поместите следующие файлы в каталог вашего сайта, например, / javascript.

ПРИМЕЧАНИЕ. — Файлы sound.js и unittest.js являются необязательными.

Как использовать библиотеку script.aculo.us?

Теперь вы можете включить скрипт script.aculo.us следующим образом: 

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

По умолчанию scriptaculous.js загружает все остальные файлы JavaScript, необходимые для эффектов, перетаскивания, ползунков и всех других функций script.aculo.us.

Если вам не нужны все функции, вы можете ограничить количество загружаемых дополнительных скриптов, указав их в списке через запятую, например: 

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

Сценарии, которые можно указать:

  • последствия
  • перетаскивания
  • строитель
  • управления
  • ползунок

ПРИМЕЧАНИЕ. — Некоторые скрипты требуют, чтобы другие загружались для правильной работы.

Как вызвать библиотечную функцию script.aculo.us?

Чтобы вызвать библиотечную функцию script.aculo.us, используйте теги HTML script, как показано ниже —

Live Demo 

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

Здесь мы используем модуль Effect и применяем эффект Highlight к элементу.

Это даст следующий результат —

Другой простой способ вызвать функцию любого модуля — это обработчики событий следующим образом:

Live Demo 

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

Это даст следующий результат —

43
Share: