script.aculo.us
| script.aculo.us | |
|---|---|
| Тип | библиотека функций и библиотека JavaScript |
| Разработчик | Томас Фукс |
| Написана на | JavaScript[1] |
| Операционная система | Кроссплатформенное ПО |
| Дата выпуска | июнь2005 |
| Последняя версия |
|
| Репозиторий | github.com/madrobby/scri… |
| Лицензия | лицензия MIT |
| Сайт | script.aculo.us |
script.aculo.us —JavaScript-библиотека для разработки пользовательского интерфейсавеб-приложений, построенная нафреймворкеPrototype.
Обычно используетсяпрограммистами вместе сRuby on Rails, однако также доступен в виде отдельнойбиблиотеки, и присутствует в составе некоторых других каркасов для разработки сайта.
Была создана Томасом Фукс в процессе работы над веб-интерфейсом инструмента цифрового управления активами Fluxiom компании Wollzelle[3], впервые был опубликован в июне2005 года.
Возможности
[править |править код]script.aculo.us используетPrototype в качестве фундамента и добавляет усовершенствованные методы работы сAJAX-запросами,класс под названием Builder для манипуляций сDOM-элементами, а также инструменты для создания специальных эффектов любой сложности.
Визуальные эффекты
[править |править код]Существуют пять основных эффектов script.aculo.us: Opacity, Scale, MoveBy, Highlight, и Parallel. Кроме них насчитывается более 16 дополнительных эффектов, которые подключаются с помощью дополнительных модулей. Программисты могут также расширить список новыми эффектами.
Для активации эффекта необходимо указать идентификатор элемента ID и одну строку кода с указанием необходимой функции. Ниже приведён пример для функции Effect.Fade, применяемой к DOM-элементу с идентификатором 'id_of_element'. Этот код приведёт к постепенному исчезновению (увеличению прозрачности) элемента, вплоть до полной невидимости с помощьюCSS стиляdisplay:none.
newEffect.Fade('id_of_element');
Также можно указать параметры эффекта: продолжительность и границы воздействия. Следующий пример приведёт к увеличению прозрачности элемента с остановкой на 80 % полного эффекта (с прозрачностью 20 %).
newEffect.Fade('id_of_element',{duration:2.0,from:0.0,to:0.8});
Класс Builder
[править |править код]Builder позволяет динамически создавать DOM-элементы. Использование образца кода ниже:
element=Builder.node('div',{id:'ghosttrain'},[Builder.node('div',{className:'controls',style:'font-size:11px'},[Builder.node('h1','Ghost Train'),"testtext",2,3,4,Builder.node('ul',[Builder.node('li',{className:'active',onclick:'test()'},'Record')]),]),]);
создаёт следующий код (без переносов строк):
<divid="ghosttrain"><divclass="controls"style="font-size:11px"><h1>Ghost Train</h1> testtext234<ul><liclass="active"onclick="test()">Record</li></ul></div></div>
Использование
[править |править код]Включение script.aculo.us в веб-сайт требует копирования всех javascript-файлов и добавления следующих строк в началоHTML-документа:
<scriptsrc="javascripts/prototype.js"type="text/javascript"></script><scriptsrc="javascripts/scriptaculous.js"type="text/javascript"></script>
Эти скрипты должны быть загружены перед любым вызовом функций Prototype или script.aculo.us. После загрузки функции библиотек можно вызвать в любом javascript-теге, в том числе и в обработчиках событий.
См. также
[править |править код]Примечания
[править |править код]- ↑The scriptaculous Open Source Project on Open Hub: Languages Page — 2006.
- ↑Release 1.9.0 — 2010.
- ↑Audible Ajax Episode 12: Thomas Fuchs of Script.aculo.us (англ.). Дата обращения: 9 марта 2024. Архивировано изоригинала 4 мая 2007 года.