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


Усовершенствованные раскрывающиеся меню
часто в меню используется разделение элементов <option> или в него добавляются заголовки, поясняющие смысл группировки опций. Но что случится, если пользователь раскроет меню и выберет разделитель? Будет ли в результате выполнен автоматический переход в самый верх меню, в его исходное состояние, как обычно происходит в приложениях? Как правило, этого не происходит. Следует учитывать и тот случай, когда пользователь выделяет допустимый вариант выбора и отправляется на новую страницу, а затем возвращается назад. В этом случае в раскрывающемся меню будет выделен вариант, соответствующий только что осуществленному пользователем выбору. Если пользователь теперь вдруг решит, что только что посещавшаяся страница и есть той, которая требуется, ему придется либо перезагрузить страницу, чтобы переустановить состояние раскрывающегося меню, либо выбрать какой-то неподходящий пункт меню, чтобы получить возможность выбрать подходящий (попробуйте это сами!). В обоих случаях проблема заключается в том, что меню не восстанавливает свое исходное состояние при возвращении пользователя к странице или выборе неактивного элемента типа разделителя. В следующем примере эти проблемы решаются и, кроме того, осуществляются косметические улучшения раскрывающегося меню навигации.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hавигационное меню></title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<style type="text/css">
<! —
.nochoice {color: black;}
.choice {color: blue;}
—>
</style>
<script type="text/javascript">
<! —
function redirect(pulldown)
{
var newLocation = pulldown[pulldown.selectedlndex].value;
if (newLocation != "")
self.location = newLocation;
}
function reset ifBlank (pulldown)
{
var possibleNewLocation = pulldown[pulldown.selectedlndex].value;
if (possibleNewLocation == "")
pulldown.selectedlndex = 0; // восстановление состояния
}
II—>
</script>
</head>
<body>
<form name="navform" id="navform" action="redirector.cgi" method="post">
<Ь>Избранное:</b>
<select name="menu" id="menu" onchange="resetIfBlank(this) ; ">
<option value="" class="nochoice" selected="selected">Bыберите узел для посещения </option>
<option value="" class="nochoice"></option>
<option value="" class="nochoice">noncковики</option>
<option value="" class="nochoice">--------------------------</option>
<option value="http://www.google.com" class="choice">Google</option>
<option value="http://www.yahoo.com" class="choice">Yahoo!</option>
<option value="http://www.teoma.com" class="choice">Teoma</option>
<option value="" class="nochoice"></option>
<option value="" class="nochoice">Internet-Maraзины</option>
<option value="" class="nochoice">----------------------</option>
<option value="http://www.amazon.com" class="choice">Amazon</option>
<option value="http://www.buy.com" class="choice">Buy.com</option>
<option value="" class="nochoice"x/option> <option value="" class="nochoice">Демонстрация</option>
<option value="" class="nochoice">--------------------</option>
<option value="http://www.democompany.com" class="choice">DemoCompany</
<option>
</select>
<input type="submit" value="Пepeйти"
onclick="redirect(document.navform.menu); return false;" />
</form>
<script type="text/javascript">
<! —
document.navform.menu.selectedlndex = 0;
//—>
</script>
</body>
</html>

После недолгих экспериментов с этим примером выясняется, что в данном случае не только после выбора пользователем "пустых" вариантов меню, но и после щелчка на кнопке Назад на странице, к которой осуществлен переход, меню успешно возвращается к своему исходному состоянию (это происходит благодаря установке значения 0 для selectedlndex в <script>). Раскрывающиеся меню HTML как элементы навигации располагаются в стороне от традиций разработки графического интерфейса, поэтому об их эффективности или пользе сказать можно немного.
Вместо предложенного здесь нетрадиционного варианта использования стандартного элемента формы можно использовать более привычное для графического интерфейса меню, создаваемое средствами JavaScript и CSS, и мы сейчас рассмотрим такую возможность.
далее:


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


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

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


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







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