Комментарии

Применение расширений MooTools
( 0 Голосов )

Помимо базовых функциональных средств MooTools, поддерживается веб-сайт по адресу http://mootools.net/forge, где перечислены многие расширения базовой среды MooTools. Эти расширения могут быть загружены и использованы на веб-сайте Joomla. Продемонстрируем их возможности на примере простого в употреблении расширения Grayscale Image Hover, написанного Рувеном Уэсслингом (Rouven Wessling). Это расширение позволяет изменять полутоновое изображение на цветное при наведении на него курсора мыши. Ниже приведена последовательность действия для внедрения этого расширения в исходный код разрабатываемого приложения.

Загрузите архивный файл по адресу http://mootools.net/forge/p/gray-scale_image_hover.

Извлеките файлы из этого архива и скопируйте исходный файл grayscalehover.js в папку templates/beez_20/javascript.

Введите приведенный ниже фрагмент кода в файл шаблона templates/beez_20/index.php после строки с последним вызовом метода addScript ().

$doc->addScript($this->baseurl.
('/templates/beez_20/javascript/grayscalehover.js', 'text/javascript', btrue) ;
$grayscaleHover = "
window.addEvent('domready', function() { new Grayscalelmages('img');
});
$doc->addScriptDeclaration($grayscaleHover);

В этом фрагменте кода сначала вводится новый исходный файл JavaScript, чтобы использовать определенные в нем функции, а затем код JavaScript, чтобы связать новую функцию с событием domready. В данном примере изменения вносятся в каждый элемент разметки img с целью воспользоваться новой функцией при загрузке страницы. Для того чтобы посмотреть эту функцию в действии, перейдите к странице Australian Parks (Австралийские парки) в выборочных данных. Первоначально изображение показывается на этой странице как полутоновое, но если навести на него курсор, оно постепенно станет цветным. Аналогичным образом другие расширения MooTools могут быть загружены из упомянутого выше веб-сайта и внедрены на разрабатываемом веб-сайте Joomla.


Понравился материал? Пригодилась информация? Плюсани в социалки!


 
Похожие новости
Добавить комментарий


Защитный код