Система YstokHelp позволяет отображать содержимое не только непосредственно в правой фрамуге, но и во всплывающем окне. Оно выскакивает над местом в основном тексте, которое помечается как обычная гиперссылка (возможно и особое оформление).
При ЩЕЛЧКЕ-ЛЕВОЙ-КНОПКОЙ или нажатии ENTER, когда гиперссылка имеет фокус, вместо перехода по ней "всплывает" окошко подходящего размера. Оно позиционируется под указателем мыши или рядом с ним в рамках правой фрамуги. При нажатии ESCAPE или ЩЕЛЧКЕ-ЛЕВОЙ-КНОПКОЙ на пустом месте фрамуги или внутри всплывающего окна, последнее исчезает с экрана. Оно также прячется при переходе по гиперссылке, расположенной в нём самом, в основном тексте или в левой фрамуге.
Следует избегать ссылок на всплывающие окна в списке страниц под заголовком "См. также" или т.п.
Всплывающие окна бывают двух типов
HTML-код статейной страницы, из которой "всплывают" окна, должен включать следующие сценарии ECMAScript.
<script src="popupref.js" type="text/javascript"></script>Причём данный сценарий должен следовать после help.js.
<script type="text/javascript"> make_popup();make_popup_menu(); </script>
При использовании компилятора {product-name}
Вам не нужно беспокоиться о таких деталях. Компилятор анализирует
атрибут onclick
всех ссылок и, если обнаруживает вызов
"popup(event)"
или "popup_menu"
,
он сам вставляет вышеуказанные сценарии в результирующую страницу.
Всплывающая заметка обычно содержит пояснительный текст, дополнительное описание и т.п., которое недостаточно велико, чтобы фигурировать в виде отдельной статейной страницы.
Пример вызова всплывающей заметки и исходного кода оформления соответствующей гиперссылки:
<a href="popup-note.html" onclick="popup(event)" onkeydown="popup_okd()" onkeyup="popup_oku()">
Обработчики событий onkeydown
и onkeyup
для элемента A
позволяют лучше позиционировать всплывающее окно
при вызове с помощью клавиатуры.
Из сценариев файл заметки требует только набор popup.js. HTML-код заметки должен включать в себя следующие элементы и вызовы:
<base target="_parent"> <script src="popup.js" type="text/javascript"></script> <script type="text/javascript"> <!--[CDATA[ popup_onopen(); // ]]--> </script>
Всплывающая заметка является
полноценным HTML-документом, в ней допустимы графика и гиперссылки. Если
атрибут target
гиперссылки не задан, то целевая страница откроется в
родительском окне, т.е. в правой фрамуге.
Указание target="_self"
допустимо, только если целевая
страница также является всплывающей заметкой. Последняя откроется в том же
"всплывшем"
окошке при переходе по такой ссылке.
Всплывающее меню аналогично контекстному меню браузера или другой программы с оконным интерфейсом. Однако вызывается оно ЩЕЛЧКОМ-ЛЕВОЙ-КНОПКИ мыши, а в качестве пунктов содержит только гиперссылки.
Когда имеется неоднозначность фразы, под которой вместо одного возможного перехода "возникает" несколько, рекомендуется подставлять всплывающее меню. Этим оно отличается от контекстного, которое содержит в основном команды и очень зависит от браузера.
Простейший пример вызова всплывающего меню. Исходного код:
<a href="yhusing.html" onclick="popup_menu(event, ['yhusing.html','О книге помощи',null, 'compiler/popups.html','Компиляция', 'Вызовы всплывающих окно, формируемые компилятором'])">
Более сложный пример задания массива и вызова меню. Исходный код:
<script type="text/javascript"> var menuitem2 = {uri:'introduction.html', title:'Введение', description:'Введение в систему YstokHelp'}; </script> <a href="yhusing.html" onclick="popup_menu(event,'Заголовок меню',['yhusing.html','О книге помощи',null,menuitem2])" onkeydown="popup_okd()" onkeyup="popup_oku()">
Конструирование меню и его "всплытие" обеспечивает функция popup_menu
.
[ECMAScript Function] popup_menu(event, [title,] items)
null
, то без заголовка.
(Согласно канонам GUI, всплывающие окна не должны иметь заголовка.)null
.
{uri,title,description}
.['uri1.html','Title 1','Description 1',
{uri:'uri2.html',title:'Title 2'}]
Аргумент title
может быть опущен совсем, что
равносильно заданию его равным null
.
Массив удобно инициализировать в виде переменной в элементе HEAD
.