Более сложный Web-сценарий

Более сложный Web-сценарий

Теперь сделаем что-нибудь посложнее — заставим пункты списков, формирующих полосу навигации на Web-странице index.htm, менять цвет рамки при наведении на них курсора мыши. Так мы дадим посетителю понять, что данные элементы Web-страницы могут реагировать на его действия.

Сначала откроем таблицу стилей и внесем в ее CSS-код некоторые изменения. Прежде всего, исправим комбинированные стили #navbar LI и #navbar LI UL LI так, как показано в листинге 14.3.

Листинг 14.3

#navbar LI { padding: 5px 10px; margin: 10px 0px; border: thin solid #B1BEC6; cursor: pointer }

.

#navbar LI UL LI { font-size: 12pt; padding: 2px; margin: 0px 0px; border: thin solid #F8F8F8; cursor: pointer }

Во-первых, мы задали для пунктов "внешнего" и вложенного списков, формирующих полосу навигации, форму курсора в виде "указующего перста". Так мы дадим посетителю понять, что эти пункты ведут себя как гиперссылки, и на них можно щелкать мышью.

Во-вторых, мы создали у пунктов вложенного списка тонкую сплошную рамку того же цвета, что и фон Web-страницы. Такая рамка будет невидима.

Далее добавим в таблицу стилей вот такой стиль:

hovered { border-color: #3B4043!important }

Мы создали стилевой класс, задающий цвет рамки. Поскольку стилевой класс является менее конкретным, чем комбинированный стиль, мы сделали атрибут стиля, задающий цвет рамки, важным. (О важных атрибутах стиля см. главу 7.)

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

После этого отправимся по интернет-адресу http://www.extjs.com/products/core/download.php?dl=extcore31 и загрузим оттуда архивный файл с именем вида ext-core-<номер версии>.zip — библиотеку Ext Core, упрощающую написание даже очень сложных Web-сценариев. (Подробнее речь о ней пойдет в главе 15.) Распакуем этот файл, найдем в распакованном содержимом файл ext-core.js и скопируем в корневую папку нашего Web-сайта, где хранится Web-страница index.htm и таблица стилей main.css. Теперь библиотека Ext Core готова к использованию.

ВНИМАНИЕ!

Если по указанному интернет-адресу архивный файл библиотеки Ext Core загрузить не удается, следует открыть Web-страницу http://www.extjs.com/products/core/download.php, найти на ней гиперссылку загрузки этого файла (на данный момент она имеет текст "Download") и щелкнуть на ней.

Теперь откроем в Блокноте Web-страницу index.htm и поместим в ее секцию заголовка (тег <HEAD>) такой тег:

<SCRIPT SRC="ext-core.js"></SCRIPT>

А в самом конце HTML-кода этой Web-страницы, перед закрывающим тегом

</BODY>, вставим такой тег:

<SCRIPT SRC="main.js"></SCRIPT>

Напоследок в корневой папке нашего Web-сайта создадим текстовый файл main.js и запишем в него содержимое листинга 14.4.

Листинг 14.4

Ext.onReady(function()

{var ceLinks = Ext.select("UL[id=navbar] LI");

ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");});

ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered");});

});

Это тоже Web-сценарий. Но поместили его мы уже в отдельный файл main.js.

Сохраним его, выбрав кодировку UTF-8 (как это сделать, было описано в главе 1).

Все, поведение создано. Откроем Web-страницу index.htm в Web-обозревателе. Наведем курсор мыши на любой пункт полосы навигации и увидим, как вокруг него появится темная рамка.

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК

Данный текст является ознакомительным фрагментом.