Wiki-учебник по веб-технологиям: JavaScript/СтрокаСостояния ...

Главная | Каталог |

Строка cостояния


Ваши программы JavaScript могут писать в строку состояния – это область снизу вашего окна браузера. Все, что вы должны сделать, это указать строку в window.status. Следующий пример показывает вам две кнопки, которые могут использоваться, чтобы записать в строку состояния и опять стереть текст.
Сценарий выглядит следующим образом:

<html>
<head>
<script language="JavaScript">
<!-- hide

function statbar(txt) {
   window.status = txt;
}

// -->
</script>
</head>
<body>

<form>
  <input type="button" name="look" value="Write!" 
    onClick="statbar('Hi! This is the statusbar!');">
  <input type="button" name="erase" value="Erase!" 
    onClick="statbar('');">
</form>

</body>
</html>


Мы создаем форму с двумя кнопками. Обе кнопки вызывают функцию statbar(). Посмотрите, как выглядит обращение к функции, созданное кнопкой Write!:

statbar('Hi! This is the statusbar!');


Внутри скобок мы определяем строку "Hi! This is the statusbar!" Это значит, что строка передаётся в функцию statbar(). Вы видите, что мы определили функцию statbar(), как показано ниже:

function statbar(txt) {
   window.status = txt;}


Что является новым – то, что мы используем txt внутри скобок имени функции. Это означает строка, которую мы передали в функциу, сохранена в переменной txt. Передача переменных в функции – часто используемый путь для создания более гибких функций. вы можете передавать несколько значений в функции – вы только должны отделить их через запятые.

Строка txt отображается в строке состояния через window.status = txt.
Стирание текста в строке состояния — достигаеться через задание пустой строки в window.status.

Показ текста в строке состояния может легко использоваться в комбинации с ссылками. Вместо того, чтобы показывать URL связи вы можете объяснять на словах, относительно чего следующая страница. Эта ссылка показывает это – только переместите ваш курсор поверх ссылки. Код для этого примера выглядит следующим образом:

<a href="dontclck.htm" 
  onMouseOver="window.status='Don\'t click me!'; return true;"
  onMouseOut="window.status='';">link</a>


Здесь мы используем onMouseOver и onMouseOut, чтобы обнаружить, когда курсор перемещается поверх ссылки.

Вы можете задать вопрос, почему мы должны писать return true внутри свойства onMouseOver. Это означает, что браузер не будет выполнять собственный код как реакцию на событие MouseOver. Обычно браузер отображает URL ссылки в строке состояния. Если мы не используем return true, браузер будет писать в строку состояния сразу после того, как наш код был выполнен – это означает, что браузер записало поверх нашего текста, и пользователь не смог бы прочитать его. В общем, мы можем подавить такие действия браузера, используя return true в обработчике событий.

onMouseOut не существовал в JavaScript 1.0. Вы можете получить различные результаты на различных платформах. На Unix платформах например текст исчезнет даже при том, что браузер не знает onMouseOut. В Windows текст останется. Если вы хотите, чтобы ваш сценарий был совместимым, вы могли бы например писать функцию, которая пишет текст в строку состояния и стирает этот текст после некоторого периода времени. Это программируется с использованием таймаутов. Мы узнаем больше относительно таймаутов в следующем разделе.

В этом сценарии вы можете видеть другую вещь – иногда вы хотите вывести кавычки. Мы хотим вывети строку Don't click me — поскольку мы определяем эту строку внутри onMouseOver обработчика событий, мы используем одиночные кавычки. Но слово Don't тоже использует одиночную кавычку! Броузер запутается, если вы просто напишете 'Don't ...'. Чтобы решить эту проблему, вы можете просто написать наклонную черту влево \ перед кавычкой – что означает, что она принадлежит выводу (вы можете проделать тоже самое с двойными кавычками " ).