Переход на целевую Web-страницу при щелчке на пункте полосы навигации
Переход на целевую Web-страницу при щелчке на пункте полосы навигации
На очереди — реализация перехода на целевую Web-страницу при щелчке на любом месте в пункте полосы навигации, не обязательно точно на гиперссылке.
Откроем таблицу стилей main.css и найдем в ней стили гиперссылок с селекторами вида #navbar A<псевдокласс>. Удалим их и вместо них напишем стиль, приведенный в листинге 16.4.
Листинг 16.4
#navbar A: focus,
#navbar A: hover,
#navbar A: active,
#navbar A: visited { color: #576C8C; text-decoration: none }
Он задает для гиперссылок в списке navbar независимо от их состояния одинаковый цвет текста и отсутствие подчеркивания. Негласный стандарт для гиперссылок полосы навигации требует, чтобы они всегда имели один и тот же вид.
Далее откроем файл Web-сценария main.js и вставим в функцию, которая передается методу onReady объекта Ext в качестве параметра, код листинга 16.5.
Листинг 16.5
ceLinks.on("click", function(e, t) { var elA = Ext.get(this). child("A"); if (elA) {
var href = elA.getAttribute("HREF");
e. stopEvent();
window.location.href = href;
}
});
В листинге 16.5 мы привязываем к событию click всех пунктов всех списков, формирующих полосу навигации, функцию-обработчик, которую там же и объявляем.
Рассмотрим тело этой функции построчно.
Сначала получаем из переменной this экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором обрабатывается событие, преобразуем его в экземпляр объекта Element и сразу же получаем его потомок, созданный тегом <A>:
var elA = Ext.get(this). child("A");
Фактически мы получаем пункт списка, на который щелкнули мышью, и добираемся до находящейся в нем гиперссылки.
Поскольку у нас пока еще не все пункты списков имеют гиперссылки, обязательно проверяем, существует ли вообще эта гиперссылка:
if (elA) {
Если она существует, метод child в предыдущем выражении вернет ссылку на экземпляр объекта Element, которое языком JavaScript будет преобразовано в логическое значение true. Условие будет выполнено, следовательно, выполнится блок "то" условного выражения.
Если же такой гиперссылки нет, метод child вернет значение null. JavaScript преобразует его в значение false, условие не будет выполнено, и код блока "то" условного выражения будет пропущен.
Первое выражение блока "то" извлекает значение атрибута HREF тега <A> — интернет-адрес гиперссылки:
var href = elA.getAttribute("HREF");
Останавливаем всплытие события и отменяем его действие по умолчанию:
e. stopEvent();
И вот почему…
Мы выполняем программный переход на другую Web-страницу, так что "услуги" гиперссылки нам в этом случае не нужны. Поэтому мы отменяем действие по умолчанию события click для гиперссылки — переход на целевую Web-страницу.
Событие click, возникнув в пункте вложенного списка, продолжит всплытие, пока не окажется в пункте "внешнего" списка, к которому тоже привязан обработчик этого события. Этот обработчик также выполнится и произведет переход на Web-страницу, на которую указывает гиперссылка уже пункта "внешнего" списка, что нам совсем не нужно. Поэтому мы останавливаем дальнейшее всплытие события.
Далее выполняем переход на полученный интернет-адрес:
window.location.href = href;
}
На этом блок "то" условного выражения закончен.
Вот и все. Теперь посетители нашего Web-сайта, чтобы перейти на другую Web- страницу, могут щелкать на любом месте пункта полосы навигации, не обязательно точно на находящейся в нем гиперссылке.
Что ж, настало время создать остальные Web-страницы нашего Web-сайта. Точнее, переделать их под новый дизайн.
Откроем папку tags, где хранятся файлы Web-страниц, описывающих различные теги HTML. Переименуем их все, добавив расширение bak. После этого откроем в Блокноте Web-страницу index.htm.
Дальнейшие действия рассмотрим на примере Web-страницы t_audio.htm, описывающей тег <AUDIO>.
1. Копируем открытую Web-страницу index.htm под именем t_audio.htm в папку tags.
2. Открываем старую Web-страницу, которая сейчас хранится в файле t_audio.htm.bak.
3. Копируем HTML-код из секции тела Web-страницы t_audio.htm.bak в контейнер cmain только что созданной Web-страницы t_audio.htm. Код, формирующий гиперссылку на Web-страницу index.htm, можно опустить — эта гиперссылка нам больше не нужна.
4. Исправляем в коде Web-страницы t_audio.htm интернет-адреса, указывающие на файлы других Web-страниц, таблицы стилей и Web-сценария. Здесь все просто:
смотрим, в какой папке хранится целевой файл, и указываем в интернет-адресе относительный путь к нему.
Вот теги <LINK> и <SCRIPT>, указывающие на внешнюю таблицу стилей и файлы
Web-сценариев:
<LINK REL="stylesheet" HREF="../main.css" TYPE="text/css">
<SCRIPT SRC="../ext-core.js"></SCRIPT>
<SCRIPT SRC="../main.js"></SCRIPT>
А вот HTML-код, формирующий гиперссылки на Web-страницы index.htm и t_img.htm:
<LI><A HREF="../index.htm">HTML</A>
<LI><CODE><A HREF="t_img.htm">IMG</A></CODE></LI>
Интернет-адреса остальных гиперссылок формируются аналогично.
5. Сохраняем готовую Web-страницу t_audio.htm.
Остается проделать все это с остальными Web-страницами, описывающими теги, что мы к этому времени создали.
Создадим также Web-страницы с описанием технологии CSS, примеров и сведениями о разработчиках. Они будут храниться в файлах css_index.htm, samples_index.htm и about.htm.
Во втором и третьем пункте "внешнего" списка, формирующего полосу навигации, создадим вложенные списки по аналогии с тем, что мы уже создали в первом его пункте. Пусть они будут содержать по два-три пункта, потом мы добавим остальные.
Также создадим хотя бы по одной Web-странице, описывающей какой-нибудь атрибут стиля CSS и пример. Сформируем гиперссылки на эти Web-страницы на основе соответствующих пунктов только что созданных вложенных списков.
Конечно, наш Web-сайт все еще неполон, но для его отладки созданных Web- страниц вполне хватит. Потом, закончив с программированием, мы доделаем его до конца.
Более 800 000 книг и аудиокниг! 📚
Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением
ПОЛУЧИТЬ ПОДАРОКДанный текст является ознакомительным фрагментом.
Читайте также
Создание полосы навигации
Создание полосы навигации Напоследок создадим для наших Web-страниц нормальную полосу навигации. Сейчас она у нас слишком уж простенькая.Еще в главе 6 мы узнали, что полоса навигации может быть горизонтальной или вертикальной, может формироваться в одном абзаце, с помощью
Выделение пункта полосы навигации при наведении на него курсора мыши
Выделение пункта полосы навигации при наведении на него курсора мыши Ну, это мы уже сделали. В листинге 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).
Переход на целевую Web-страницу при щелчке на пункте полосы навигации
Переход на целевую Web-страницу при щелчке на пункте полосы навигации На очереди — реализация перехода на целевую Web-страницу при щелчке на любом месте в пункте полосы навигации, не обязательно точно на гиперссылке.Откроем таблицу стилей main.css и найдем в ней стили
Выделение пункта полосы навигации, соответствующего открытой в данный момент Web-странице
Выделение пункта полосы навигации, соответствующего открытой в данный момент Web-странице Что ж, скрытие и открытие вложенных списков, формирующих полосу навигации, в "содружестве" с библиотекой Ext Core реализуется весьма просто. Но работа над полосой навигации еще не
Генерирование полосы навигации
Генерирование полосы навигации Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент,
Как добавить страницу в избранное
Как добавить страницу в избранное Добавляет вашу страницу в "Избранное".Эта возможность позволяет посетителю вашей страницы сделать закладку, если он не успевает просмотреть или просто запомнить адрес вашего ресурса.<a href="#" onClick="window.external.addFavorite ("http://www.spravkaweb.ru/", "Краткий
getURL - Переход на веб-страницу
getURL - Переход на веб-страницу getURL(Глобальная функция)Загружает документ с указанного адреса (URL) в окно, или передает переменные другому приложению по URL (выполняет сценарии на стороне сервера), либо генерирует событие Macromedia Director.Синтаксис:getURL(URL)getURL(URL, window)getURL(URL, window,
getURL - Переход на веб-страницу
getURL - Переход на веб-страницу getURL(Глобальная функция)Загружает документ с указанного адреса (URL) в окно, или передает переменные другому приложению по URL (выполняет сценарии на стороне сервера), либо генерирует событие Macromedia Director.Синтаксис:getURL(URL)getURL(URL, window)getURL(URL, window,
Создание полосы навигации
Создание полосы навигации Напоследок создадим для наших Web-страниц нормальную полосу навигации. Сейчас она у нас слишком уж простенькая.Еще в главе 6 мы узнали, что полоса навигации может быть горизонтальной или вертикальной, может формироваться в одном абзаце, с помощью
Как Web-сценарии помещаются в Web-страницу
Как Web-сценарии помещаются в Web-страницу Как мы только что убедились, Web-сценарии, формирующие поведение Web- страницы, можно поместить как в саму Web-страницу, так и в отдельный файл. Рассмотрим подробнее, как это делается.Для вставки Web-сценария в HTML-код в любом случае
Выделение пункта полосы навигации при наведении на него курсора мыши
Выделение пункта полосы навигации при наведении на него курсора мыши Ну, это мы уже сделали. В листинге 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).
Выделение пункта полосы навигации, соответствующего открытой в данный момент Web-странице
Выделение пункта полосы навигации, соответствующего открытой в данный момент Web-странице Что ж, скрытие и открытие вложенных списков, формирующих полосу навигации, в "содружестве" с библиотекой Ext Core реализуется весьма просто. Но работа над полосой навигации еще не
Генерирование полосы навигации
Генерирование полосы навигации Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент,
1.4. Настраиваем домашнюю страницу
1.4. Настраиваем домашнюю страницу Как выглядит домашняя страница Яндекса (рис. 1.3), знают все, кто пользуется его сервисами. Но знаете ли вы, что ее можно видоизменить, настроить в соответствии с собственными интересами? Кого-то совершенно не интересует работа с каталогом,
Ссылка на главную страницу
Ссылка на главную страницу Да, вы не ошиблись, на главной странице иногда есть ссылка на… главную страницу. С точки зрения логики ссылаться на самого себя – серьезная ошибка. Ведь если нажать на такую ссылку, окажешься там же.Запутанная проблема, которой следует избегать.
Как сохранить веб-страницу?
Как сохранить веб-страницу? Веб-страницы можно сохранять на компьютере в виде файлов. Впоследствии вы сможете открыть и просмотреть их даже без подключения к Интернету.Щелкните на кнопке Страница (1). Откроется меню.Выберите в нем команду Сохранить как (2).Откроется диалог