Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
window.alert("Привет от объекта Window!");
Метод confirm выводит на экран окно-предупреждение с указанным текстом и кнопками ОK и Отмена. Такие окна-предупреждения обычно используются, чтобы запросить у посетителя подтверждение или отмену какого-либо действия:
window.confirm(<текст, выводимый в окне-предупреждении>)
Единственный передаваемый параметр — строка с текстом, который будет выведен в окне-предупреждении.
Метод confirm возвращает true, если посетитель нажал кнопку ОK, и false, если он нажал кнопку Отмена.
Событие resize возникает, когда посетитель изменяет размеры окна Web-обозревателя.
Пример:
Ext.fly(window). on(function()
{
// Что-то делаем
}
);
Здесь показано, как рекомендуется привязывать обработчик к событию resize окна Web-обозревателя (это справедливо и для других событий окна).
Объект HTMLElement, как мы уже знаем, представляет элемент Web-страницы. Рассмотрим некоторые его свойства.
Свойство textContent хранит текстовое содержимое элемента Web-страницы в виде строки. Если элемент не имеет текстового содержимого, оно хранит значение null.
Пример:
var htelCHeader = Ext.getDom("cheader");
var s = htelCHeader.textContent; htelCHeader.textContent = "!" + s +"!";
Здесь мы получаем текстовое содержимое контейнера cheader, добавляем к нему слева и справа восклицательные знаки и снова помещаем его в контейнер cheader.
Свойство innerHTML хранит HTML-код содержимого данного элемента Web-страницы в виде строки.
Пример:
var htelCHeader = Ext.getDom("cheader");
var s = htelCHeader.textContent; htelCHeader.innerHTML = "<EM>" + s + "</EM>";
Объектам Web-обозревателя впору посвящать отдельную книгу — настолько это объемная тема. Мы рассмотрели только несколько инструментов, которые предоставляют они и которые не найти в библиотеке Ext Core. Впоследствии мы еще вернемся к объектам Web-обозревателя, но это будет нескоро.
Что дальше?
Эта глава почти полностью была посвящена библиотеке Ext Core — инструменту, значительно упрощающему работу Web-программиста. Мы рассмотрели несколько объектов этой библиотеки и такое количество их методов, что просто голова кругом.
В следующей главе мы применим полученные знания на практике. О, это будет интересно и поучительно!
ГЛАВА 16. Создание интерактивных Web-страниц
В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?
Этому будет целиком посвящена данная глава. Мы научимся создавать Web- страницы, реагирующие (причем с пользой для дела) на действия посетителя, — интерактивные Web-страницы.
Давайте сначала составим список того, чему хотим "научить" наши Web-страницы.
— Изменять размеры блочных контейнеров, формирующих дизайн Web-страниц, чтобы они занимали всю клиентскую область окна Web-обозревателя.
— Менять цвет рамки у пунктов полосы навигации при наведении на них курсора мыши. (Собственно, мы уже это сделали в главе 14; здесь мы просто разберем, как все работает.)
— Выполнять переход на Web-страницу при щелчке на любом месте соответствующего пункта полосы навигации, не обязательно точно на гиперссылке.
— Скрывать и открывать вложенные списки, формирующие полосу навигации, при щелчке на пункте "внешнего" списка, в который они вложены.
— Выделять пункт полосы навигации, соответствующий открытой в данный момент Web-странице.
— Реализовать скрытие и открытие текста примеров на Web-страницах, посвященных отдельным тегам и атрибутам стиля, при щелчке мышью на заголовке "Пример: ".
Довольно много, не так ли? Но библиотека Ext Core поможет нам сделать все с минимальным объемом кода.
Управление размерами блочных контейнеров
И первое, что мы сделаем, — заставим блочные контейнеры на наших Web-страницах изменять свои размеры так, чтобы занимать всю клиентскую область окна Web-обозревателя и при этом не выходить за ее пределы.
Сначала откроем таблицу стилей main.css и найдем в ней стиль переопределения тега <BODY>. Изменим его так, как показано в листинге 16.1.
Листинг 16.1
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px; overflow: hidden }
Мы добавили в этот стиль атрибут overflow со значением hidden, тем самым убрав у всей Web-страницы полосы прокрутки. Они нам не нужны, более того, появляясь в самый неподходящий момент, они могут нарушить местоположение блочных контейнеров.
Сохраним таблицу стилей. И сразу же откроем файл Web-сценариев main.js. В самом его начале, еще до вызова метода onReady объекта Ext, вставим код листинга 16.2.
Листинг 16.2
function adjustContainers() {
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
var cNavbarWidth = Ext.get("cnavbar"). getWidth();
var cHeaderHeight = Ext.get("cheader"). getHeight();
var cCopyrightHeight = Ext.get("ccopyright"). getHeight();
Ext.get("cheader"). setWidth(clientWidth);
var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30; Ext.get("cnavbar"). setHeight(cNavbarHeight); Ext.get("cmain"). setHeight(cNavbarHeight); Ext.get("cmain"). setWidth(clientWidth — cNavbarWidth—10); Ext.get("ccopyright"). setWidth(clientWidth);
}
В конце тела функции, которую мы передаем в качестве параметра методу onReady
объекта Ext, вставим два выражения:
Ext.fly(window). on("resize", adjustContainers);
adjustContainers();
Сохраним файл main.js. Откроем Web-страницу index.htm в Web-обозревателе — и сразу отметим, что блочные контейнеры приняли такие размеры, чтобы занять всю клиентскую область окна Web-обозревателя. Попробуем изменить размеры окна и понаблюдаем, как меняются размеры контейнеров.
Но как все это работает? Сейчас разберемся.
Код, добавленный нами в файл main.js, объявляет функцию adjustContainers, которая станет обработчиком события resize окна Web-обозревателя. Именно эта функция будет задавать размеры контейнеров. Давайте рассмотрим ее код построчно.
Сначала мы получаем ширину и высоту клиентской области окна Web-обозревателя:
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
К данным значениям мы будем обращаться не один раз, так что лучше сохранить их в переменных. Ведь доступ к переменной выполняется значительно быстрее, чем вызов метода.
Затем получаем ширину контейнера cnavbar, высоту контейнеров cheader и ccopyright:
var cNavbarWidth = Ext.get("cnavbar"). getWidth();
var cHeaderHeight = Ext.get("cheader"). getHeight();
var cCopyrightHeight = Ext.get("ccopyright"). getHeight();
Эти значения также понадобятся нам в дальнейшем.
Далее задаем ширину контейнера cheader равной ширине клиентской области окна Web-обозревателя:
Ext.get("cheader"). setWidth(clientWidth);
Вычисляем высоту контейнеров cnavbar и cmain:
var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30;
Для этого вычитаем из высоты клиентской области высоту контейнеров cheader и ccopyright и дополнительно 30 пикселов — чтобы создать отступ между нижним краем контейнера ccopyright и нижним краем клиентской области.
Задаем полученное ранее значение в качестве высоты контейнеров cnavbar и cmain:
Ext.get("cnavbar"). setHeight(cNavbarHeight); Ext.get("cmain"). setHeight(cNavbarHeight);
Задаем ширину контейнера cmain:
Ext.get("cmain"). setWidth(clientWidth — cNavbarWidth — 10);
Ее значение получаем, вычтя из ширины клиентской области ширину контейнера cnavbar и еще 10 пикселов — величину внешнего отступа между ними (он задан в именованном стиле navbar атрибутом стиля margin-right).
Напоследок задаем ширину контейнера ccopyright равной ширине клиентской области окна Web-обозревателя:
Ext.get("ccopyright"). setWidth(clientWidth);
На этом выполнение функции adjustContainers закончилось.
Теперь рассмотрим два выражения, помещенные в тело функции, являющейся параметром метода onReady объекта Ext.
Привязываем функцию adjustContainers в качестве обработчика к событию resize окна Web-обозревателя:
Ext.fly(window). on("resize", adjustContainers);
И сразу же ее вызываем, чтобы контейнеры приняли правильные размеры сразу после загрузки Web-страницы:
adjustContainers();
Вот и все. Согласитесь — ничего сложного.
Выделение пункта полосы навигации при наведении на него курсора мыши
Ну, это мы уже сделали. В листинге 16.3 приведен написанный нами в главе 14 JavaScript-код.
Листинг 16.3
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");
});
Разберем его построчно.
Сначала получаем все пункты списков, формирующих полосу навигации, — и "внешнего", и всех вложенных:
var ceLinks = Ext.select("UL[id=navbar] LI");
Затем привязываем к событию mouseover полученных пунктов функцию-обработчик, которую там же и объявляем:
ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");});
Этот обработчик сначала получит из переменной this экземпляр объекта HTMLElement, представляющий пункт списка, к которому, собственно, он и привязан. Вызовом метода get он преобразует его в экземпляр объекта Element и вызовом метода addClass привяжет к нему стилевой класс hovered (его определение см. в главе 14), который изменит цвет рамки этого пункта.
Откройте для себя мир чтения на siteknig.com - месте, где каждая книга оживает прямо в браузере. Здесь вас уже ждёт произведение Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов, относящееся к жанру Прочая справочная литература. Никаких регистраций, никаких преград - только вы и история, доступная в полном формате. Наш литературный портал создан для тех, кто любит комфорт: хотите читать с телефона - пожалуйста; предпочитаете ноутбук - идеально! Все книги открываются моментально и представлены полностью, без сокращений и скрытых страниц. Каталог жанров поможет вам быстро найти что-то по настроению: увлекательный роман, динамичное фэнтези, глубокую классику или лёгкое чтение перед сном. Мы ежедневно расширяем библиотеку, добавляя новые произведения, чтобы вам всегда было что открыть "на потом". Сегодня на siteknig.com доступно более 200000 книг - и каждая готова стать вашей новой любимой. Просто выбирайте, открывайте и наслаждайтесь чтением там, где вам удобно.
