Домашняя страница Сединко А.М.
на главную / к статье Интерфейс. Контекстная подсказка. Справочная система.

 

 
  Ввод исходных данных          Расчет на год. Ошибка при вводе исходных данных Включены пояснения
Количество реализованного откормочного молодняка в течение года, голов 203
203 		Цикл воспроизводства, дней;
  в составе:
Величина технологической группы в подсосный период, голов   - Фаза холостого содержания, дней
Многоплодие свиноматок, голов   - Фаза условно-супоросного содержания, дней
Число опоросов от одной свиноматки в год   - Фаза супоросного содержания, дней
Процент браковки свиноматок, %   - Фаза тяжелосупоросного содержания, дней
Процент перегулов свиноматок, %   - Подсосный период, дней
 
   Итак, перед нами фрагмент приложения. Нажмите кнопку "Справка" - откроется слой справочной системы. Следует пояснить, что различные формы ввода, поясняющая графика, справочная система приложения оформлены в виде набора слоев, которые переключаются соответствующими кнопками. "Справку" - обычный HTML текст, можно дополнить ссылками на другие файлы, открываемые в новом окне, располагая в слое главного файла только содержание, т.е. используя обычные приемы web дизайна со всеми его мультимедийными возможностями. Здесь удобно сделать ссылки на обучающие модули (элементы дистанционного обучения).
   В целом, эта часть приложения не должна вызывать затруднений. Управление слоями - управление их "видимостью", например, кнопка "Справка" вызывает javascript функцию обработки нажатия:

    <input type="button" onClick="n_click(5)" STYLE=" font-size: 11 pt; width:143" value="Справка">

И, собственно, фрагмент функции (понятно, что каждому слою присвоено имя): 
function n_click(value) {
   switch (value){
  	case 1: {
   	document.all["layVvDat"].style.visibility="visible";
   	document.all["layIntro"].style.visibility='hidden';
   	// document.all["ciclo1"].style.visibility="hidden";
   	break;
   	}
   	case 5: {
   	document.all["layVvDat"].style.visibility="hidden";
   	document.all["layIntro"].style.visibility='visible';
   	// document.all["ciclo1"].style.visibility="hidden";
   	break;
   	}
   }
}
   Возвращаемся в режим ввода данных и включаем подсказку (появляется признак включенной подсказки). Проведите указателем мышки по окнам ввода и расчетным цифрам (SPAN), получите пояснения по различным позициям. Измените фазу холостого содержания и посмотрите на изменения в пояснениях к SPAN областям при наличии ошибки (на "красном" числе).
   Как это устроено. Во первых, с каждым объектом, к которому относится подсказка, ассоциируем события мыши, назначаем обработку и присваиваем индекс подсказки из массива (здесь 18), например:

<span id="cycl_ras" onMouseMove = "inform(18)" onMouseOut = "close_info()"
STYLE="background-color : #bbeebb" > 203 </span>

    Функция inform() получает номер подсказки, фиксирует координаты мыши (event.x и event.y), формирует содержимое подсказки, делает "видимым" слой подсказки и перемещает его: 
function inform(n_sprav){
x = event.x;
y = event.y;	
	if (infoOn==1) {
	  content.innerHTML=answer[n_sprav];	
		if ((isError==1)&& (n_sprav==8)){	
		  content.innerHTML="Ошибка по циклу: сумма фаз не соответствует"+
		  " расчету через число опоросов, равному "+
		  Math.round(365/parseFloat(n_oporos_god.value))+
		  " дней. Попробуйте изменить продолжительность фазы ...";
		}
	  document.all["info"].style.visibility="visible";
	  document.all["info"].style.left=x+10;
	  document.all["info"].style.top=y;
	}
}
    Если нет ошибок, то простой выбор из массива по индексу, иначе, как в примере, можно подготовить подсказку с учетом введенных данных, т.е. элемент советующей системы. Полезно так же подготовить массив подсказок, ассоциированный с номерами ошибок. Массивы подсказок хранятся в отдельном текстовом файле, который написан по правилам javascript и подключаются следующим образом:

<SCRIPT LANGUAGE="JavaScript1.1" SRC="sprav.txt"></SCRIPT>

   Подсказка помещается в SPAN область c id=content, которая размещена на слое info:

<div id="info" style="position: ABSOLUTE; visibility: hidden; background: #ededdd;
padding: .5em; z-index: 3; width: 45%; float: right">
<IMG SRC="info1.GIF"><span id="content">&nbsp;</span>
</div>

   При выходе указателя мыши за пределы объекта, возникает событие onMouseOut и вызывается функция close_info(), которая просто скрывает слой info:

function close_info(){
document.all["info"].style.visibility="hidden";
}

   Для полноты изложения. Кнопка "Подсказка" вызывает функцию info_On(), которая управляет флагом включения подсказок (infoOn) и признаком (рисунком info_but): 
function info_On(){
   if (infoOn==0) {
     infoOn=1;
     document.all["info_but"].style.visibility="visible";
   }
   else{
     infoOn=0;
     document.all["info_but"].style.visibility="hidden";
   }
}
   Таким образом, используя довольно простые приемы, можно построить весьма совершенную справочную систему. Более того, при необходимости провести изменения, можно воспользоваться замечательным инструментом - Блокнотом, и этого будет достаточно.
Вернемся к статье?

 ©2003 Сединко А.М.


Hosted by uCoz