«Хм» скажите Вы, «а что же такое Прокачка сайта?». И действительно, а что же это такое? Неужели кто-то соригинальничал и украл задумку про прокачку машин с известного музыкального телевидения! Да нет, все намного проще. Давайте разберемся, что такое «прокачка сайта».

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

«Прокачка сайта» - это условное обозначение технологическому оснащению сайта на основе приложений и программ разного рода языков, а так же приемы и ухищрения в разработке и поддержке сайта.
Для начинающих: javascript поддерживается на абсолютно всех хостингах мира, так же как и html - язык для клиентского браузера.

В этой статье мы рассмотрим использование супер удобных библиотек Ext JS - http://extjs.com.
Это бесплатное программное обеспечение для ваших сайтов, на javascript. Распространяется в виде библиотек, с примерами и пояснениями, на английском.

Что же это такое «ваще». Это разрозненная кучка файлов, которая способна превратить ваш сайт в цветущий сад. Странно, подумаете Вы, но к сожалению для вашего сайта его спокойные дни закончились, теперь не Он не Вы не будете спать спокойно, пока не прокачаете на сайте хоть что то.

Данная библиотека способна организовать настоящий веб-интерфейс, плавающие окна и другие формы, системы Ajax, системы использования видео эффектов в том виде, в котором прописали разработчики JS, системы слайд шоу для графики и многое чего другого, что мы с Вами и рассмотрим постепенно.

Для сегодняшней вводной работы в данную область вебарта нам потребуется, собственно, сама библиотека приложений Ext JS. Найти данный архив Вы сможете либо на официальном сайте производителя, либо в приложениях к данной статье. Хотя на официальном сайте Вы, возможно, нароете еще, что нибудь для себя интересного. На данный момент актуален выпуск - Ext Core Library 3.0 (Beta).

И так, скачав библиотеку, приступим к нашим экспериментам.

Некоторое пояснение к содержанию архива. Архив состоит из папок: «src» - рабочие javascript файлы, именно это и есть библиотека, все остальное это так, от делать нечего положено, «build» - сжатые рабочие файлы, они весят меньше, но зашифрованные для быстроты передачи их клиенту на ПК, «docs» - документация на английском, довольно скучная, «examples» - некоторые наглядные примеры использования библиотеки, «ext-core-debug.js» - не сжатый «js движочек» библиотеки, «ext-core.js» - сжатый «js движочек» библиотеки, «LICENSE.txt» - ваше лицензионное соглашение об использовании библиотеке и его распространении («как есть»).
Откроем «examples/carousel» здесь демонстрация слайд шоу, именно на ней мы научимся пользоваться библиотекой. Для просмотра данной штучки откройте файл index.html в данной папке.

Ну как красиво? :) Просто? И удобно, я вас уверяю. Мы рассмотрим первый тип слайд шоу, с остальными Вам предстоит познакомиться самостоятельно.

Сейчас кому лень делать нечто такое же, просто скачайте архив с примером (example_1.zip [315,67 Kb] (cкачиваний: 306)), в нем собраны необходимые файлы таким образом, что бы как можно быстрее понять их функционал и необходимость.

1. Новый файл «index.html» или любой другой на ваше усмотрение.

2. В самый топик:



3. Подключаем стили:



Это необходимо для самого скрипта.

4. Подключаем движок:



В сжатом виде, можно и не в сжатом, не забудьте про правильные адреса при вызове.

5. Вставляем вот это:


Хотя это можно будет убрать и в сам файл скрипта.

6. Сам собственно скрипт для данного слайд шоу:



7. В тело документа вставляем собственно виновника торжества:



Как видите это всего-лишь то навсего тег DIV который обхватывает картинки, обратите внимание на ID этого тега, именно по нему скрипт определяет активный объект, с которым и начинает в дальнейшем работать. Картинки могут иметь параметр TITLE, который потом отображается как название картинки при просмотре. Не забывайте, что адреса картинок должны вести к существующим картинкам.

8. Закончили с «index.html». Сейчас скопируем в каталог, в тот же где и «index.html», последовательно вот эту папку, из архива с библиотекой, «examples/carousel/images» - это папка где находятся картинки которые требуются скрипту, кстати, эти картинки вы можете конечно же изменять, а также можете изменять адреса к ним в самом скрипте. «Examples/carousel/slides» - здесь собственно картинки для слайд шоу. Так же копируем файлы «Examples/carousel/carousel.css» - стили для скрипта, «Examples/carousel/carousel.js» - сам скрипт. В корне архива с библиотекой находим файл «ext-core.js», который и есть движочек, ложем его в ту же папку где и наш файл «index.html».

9. Должно быть готово, если выполнили все верно. Проверьте запуском «index.html».
Думаю, сейчас Вам понятно, что же такое библиотеки Ext JS и как их использовать. Они действительно очень удобны в использовании. Если у Вас не получилось пошагово сложить демонстрацию библиотеки, скачайте уже сложенную в архив правильную конструкцию файлов.

Ждем Ваших вопросов, смело задавайте их.

Приложение 1: ext-core-3.0-beta1.zip [1,43 Mb] (cкачиваний: 113), библиотека Ext JS.

Приложение 2: example_1.zip [315,67 Kb] (cкачиваний: 306), пример использования.