Добавляем...


Раскрывающиеся меню
Одним из наиболее часто используемых средств навигации является меню выбора. Функциональные возможности этого простого раскрывающегося меню соответствуют функциональным возможностям, обеспечиваемым дескриптором <select> (X)HTML. Этот дескриптор содержит набор элементов <option>, определяющих навигационные варианты или задачи, предлагаемые на выбор пользователю. Обработчик событий, связанный с дескриптором <select>, вызывает выполнение подходящего действия при осуществлении выбора пользователем, например, немедленно направляя пользователя к выбранной странице. Раскрывающиеся меню, подобные обычным меню приложений, как правило, размещают в верхней части страницы.

Такие меню экономят немало места в сравнении с обычными навигационными панелями, которые показывают пользователю все варианты выбора сразу, но в меню это достигается путем ограничения видимости вариантов, когда в каждый момент времени оказываются скрытыми все, кроме одной ссылки. Хотя в определенных случаях это может быть вполне приемлемо, это означает, что раскрывающиеся меню удобно использовать в двух случаях: для осуществления перехода пользователя к выбранной странице и для традиционного использования в виде поля формы. Такая двойственность может смутить некоторых пользователей, если контекст использования меню окажется недостаточно ясным. Раскрывающиеся меню, используемые для навигации, не должны размещаться в рамках формы, предназначенной для ввода данных, и такие меню должны сопровождаться недвусмысленными поясняющими метками.


<script type="text/javascript">
<! —
function redirect(menu)
{
var choice = menu.selectedlndex;
if (choice != 0)
window.location = menu.options[choice].value;
(
// —>
</script>
<form name="navform" id="navform" method="post" action="redirector.cgi">
<strong>Bыбор узла для noceщения</strong><br />
<select name="sites" id="sites" onchange="redirect(this);"> <option value="" selected="seclected">Bыберите узел для посещения/
option>
<option value="http://news.google.соm">Новости Google
<option value="http://news.yahoo.соm">Новости Yahoo!
<option value="http://www.alternet,org">AlterNet
<option value="http://allafrica.com">ALLAfrica
</select>
<noscript>
<input type="submit" value="nepeйти" />
</noscript>
</form>



В связи с этим примером, некоторые моменты заслуживают дополнительного обсуждения. Во-первых, обратите внимание на то, что здесь в рамках дескриптора <noscript> определяется кнопка Перейти, которая должна начинать загрузку страницы. Эта кнопка инициирует подачу запроса CGI-программе сервера, которая расшифрует выбранное состояние меню, и соответствующим образом перенаправит запрос пользователя. Наличие такой кнопки оказывается важным в том случае, когда браузер пользователя не поддерживает JavaScript или поддержка JavaScript отключена. Наличие такой кнопки часто оказывается важным даже при наличии поддержки JavaScript. Конечно, автоматическая загрузка страницы выполняется быстрее, но такая форма навигации может создавать проблемы. Вполне вероятно, особенно в длинном меню, что пользователь случайно отпустит кнопку мыши, и тогда автоматически начнется загрузка ненужной страницы.

Другим достойным обсуждения моментом в предыдущем примере является то, что в данном меню по умолчанию будет выбран "фиктивный" вариант. В отсутствие этого варианта, выбираемого по умолчанию, автоматически был бы выбран первый элемент списка вариантов навигации, а в результате пользователь не имел бы возможности перейти на страницу Новости Google, поскольку обработчик onchange вызывается только при изменении опции меню.

Подобной, но не решенной здесь проблемой, является и то, что, если пользователь выберет вариант перехода, посетит соответствующую страницу, а затем щелкнет на кнопке Назад, в меню будет по умолчанию выделен пункт, соответствующий предыдущему выбору пользователя.

А поскольку onchange вызывается только при изменении выбора опции, то в том случае, когда пользователь снова выберет тот же вариант, браузер к соответствующей странице не перейдет. Аналогичная проблема возникает и в меню с разделением вариантов выбора — именно такие меню мы собираемся рассмотреть в следующем разделе.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика