На занятиях в методологическом кружке мы как-то обсуждали то, что режимы в интерфейсах могут являться источниками ошибок пользователей и иногда приводят к увеличению количества действий вместо ожидаемого уменьшения. Например, пользователю потребуется некоторое время, чтобы разглядеть индикатор раскладки клавиатуры или он попробует что-то напечатать и будет удалять введенный текст, если была установлена неверная раскладка. С другой стороны, когда пользователь осознанно активирует какой-то функционал и получает физическую обратную связь (например, переключает регистр, удерживая клавишу Shift), то он однозначно понимает, какой режим сейчас включен. Это называется квази-режимом.
Квази-режимы являются весьма эффективными с точки зрения устранения режимов и уменьшению количества ошибочных действий.
Начинающие верстальщики, когда речь заходит о переключении видимости блоков в зависимости от текущего режима, допускают одну типичную ошибку: они явно скрывают один блок и показывают другой.
<div>
<div id="mode1" style="display: block;">Режим 1</div>
<div id="mode2" style="display: none;">Режим 2</div>
<div id="mode3" style="display: none;">Режим 3</div>
<div id="mode4" style="display: none;">Режим 4</div>
</div>
Замена атрибута style на class у каждого блока особо ситуацию не меняет. Это все равно остается явное определение.
Мне нравится другой метод.
<div class="mode1">
<div id="mode1">Режим 1</div>
<div id="mode2">Режим 2</div>
<div id="mode3">Режим 3</div>
<div id="mode4">Режим 4</div>
</div>
Устанавливая класс у внешнего div в значения «mode1», «mode2», «mode3» или «mode4» активируются те или иные CSS-правила.
#mode1 {
display: block;
}
#model2, #model3, #model4 {
display: none;
}
.mode2 #mode1, .mode3 #mode1, .mode4 #mode1 {
display: none;
}
.mode2 #mode2, .mode3 #mode3, .mode4 #mode4 {
display: block;
}
Блок #mode1 будет видим по умолчанию, а остальные при соответствующем классе у внешнего блока.
Этот простой пример не учитывает случай, когда внешнему блоку назначают несколько классов. Чтобы полностью обезопасить себя от таких ситуаций нужно описать все возможные комбинации селекторов. В моей примере таких комбинаций будет 16.
Плюсы такого способа:
- Вся логика переключения представлений сконцентрирована в CSS-файле
- Удобно вести отладку. Нужно заменить только одной значение, чтобы полностью поменялся внешний вид.
- Уменьшается количество однотипного JavaScript-кода