Навигация по рамкам окна

Важным свойством рамок является возможность настроить взаимодействие между ними. Для пользователя набор рамок должен выглядеть как окно одного документа, части которого функционально связаны друг с другом. Выбор гиперссылки или щелчок на кнопке в рамке колонтитула должен изменять содержимое в области основной рамки, тогда как колонтитулы остаются прежними. Чтобы указать, в каком окне гиперссылка должна открыть связанный документ, воспользуйтесь атрибутом target(вы уже знакомились с этим атрибутом в главе 3). Например, в рассматриваемом примере гиперссылки нижнего колонтитула Начальная, Карта узла, Список литературыи Гостевая книга (см. рис. 5.8) должны открывать документы в основной рамке, которой в листинге 5.7 присвоено имя main.Поэтому код HTML гиперссылок должен выглядеть следующим образом:

<А href =' index.htm' target= 'main'>Начальная</А>

Иногда необходимо, чтобы щелчок на гиперссылке изменил содержимое сразу нескольких рамок. Для этого придется воспользоваться командой JavaScript, назначенной событию гиперссылки onClick.Например, предположим, что переход на начальную страницу узла должен сопро-нождаться сменой левой панели гиперссылок (рамка с именем panelв листинге 5.7). Измените код гиперссылки следующим образом:

<А href='index.htm' target='main' onClick=top.panel.location, replace ('имя_страницы.htm')>Начальная</А>

Чтобы досконально разобраться в смысле команды, присвоенной событию onClick,нужно приобрести пособие по языку JavaScript. Общий принцип ее построения следующий. Начинается команда с обращения к окну обозревателя top.Это стандартное неизменяемое имя. Затем, после точки, следует имя рамки, содержимое которой нужно изменить: panel.Затем необходимо обратиться к свойству locationэтой рамки и вызвать для нее функцию replace,в аргументе которой указать имя файла документа, который должен отобразиться в этой рамке. Как вы видите, изменяемыми частями данной команды являются только имя рамки и имя файла. Поэтому вам не составит труда самостоятельно создать команды для изменения других рамок.

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

<LI onMouseOver=on_select('artl.htm')>

<A href= 'artl.htm'>Статья 1</А></LI>

В аргументе функции on_selectпередается имя документа, который следует открыть, но сама функция on_selectпока осталась пустой. Но теперь не составит проблем написание сценария на JavaScript, который будет открывать документ, например, в основной рамке. Для этого нужно внести некоторые изменения. Код документа panel.htmследует заменить на код листинга 3.14, а функцию on_selectизменить.

function on_select(name){top.main.location.replace(name );

};

Теперь программа будет работать так, как показано на рис. 5.9.

Рис. 5.9. При выборе ссылки из всплывающего списка открывается документ в основной рамке

Программа работает следующим образом. Наведение указателя мыши на пункт нумерованного списка вызывает функцию обработки события onMouseOver, которая добавляет всплывающий список ссылок. Переведите указатель на пункт всплывающего списка. Событие onMouseOver этого пункта вызовет функцию on_select и передаст в нее имя связанного документа. В функции используется уже знакомая вам команда top.main.location.replace(), которая открывает указанный документ в рамке с именем main.